vxe-table 3.5.9-beta.7 → 3.5.9-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "3.5.9-beta.7",
+  "version": "3.5.9-beta.8",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",

package/packages/edit/src/mixin.js

@@ -3,7 +3,7 @@ import VXETable from '../../v-x-e-table'
 import UtilTools, { isEnableConf } from '../../tools/utils'
 import { getRowid } from '../../table/src/util'
 import DomTools, { browse } from '../../tools/dom'
-import { warnLog, errLog } from '../../tools/log'
+import { warnLog, errLog, getLog } from '../../tools/log'
 
 function insertTreeRow (_vm, newRecords, isAppend) {
   const { tableFullTreeData, afterFullData, fullDataRowIdData, fullAllDataRowIdData, treeOpts } = _vm
@@ -130,7 +130,7 @@ export default {
             }
           } else {
             if (treeConfig) {
-              throw new Error(UtilTools.getLog('vxe.error.noTree', ['insert']))
+              throw new Error(getLog('vxe.error.noTree', ['insert']))
             }
             let afIndex = -1
             // 如果是可视索引

package/packages/export/src/mixin.js

@@ -4,7 +4,7 @@ import VXETable from '../../v-x-e-table'
 import UtilTools from '../../tools/utils'
 import { mergeBodyMethod, isColumnInfo } from '../../table/src/util'
 import { browse } from '../../tools/dom'
-import { warnLog, errLog } from '../../tools/log'
+import { warnLog, errLog, getLog } from '../../tools/log'
 
 const { formatText } = UtilTools
 
@@ -576,7 +576,7 @@ export function saveLocalFile (options) {
     }
     return Promise.resolve()
   }
-  return Promise.reject(new Error(UtilTools.getLog('vxe.error.notExp')))
+  return Promise.reject(new Error(getLog('vxe.error.notExp')))
 }
 
 function downloadFile ($xetable, opts, content) {

package/packages/filter/src/panel.js

@@ -16,15 +16,22 @@ export default {
   },
   render (h) {
     const { $parent: $xetable, filterStore } = this
-    const { column } = filterStore
+    const { args, column } = filterStore
     const filterRender = column ? column.filterRender : null
     const compConf = filterRender ? VXETable.renderer.get(filterRender.name) : null
+    const filterClassName = compConf ? compConf.filterClassName : ''
     return h('div', {
-      class: ['vxe-table--filter-wrapper', 'filter--prevent-default', compConf && compConf.className ? compConf.className : '', {
-        'is--animat': $xetable.animat,
-        'is--multiple': filterStore.multiple,
-        'is--active': filterStore.visible
-      }],
+      class: [
+        'vxe-table--filter-wrapper',
+        'filter--prevent-default',
+        compConf && compConf.className ? compConf.className : '',
+        UtilTools.getClass(filterClassName, Object.assign({ $panel: this }, args)),
+        {
+          'is--animat': $xetable.animat,
+          'is--multiple': filterStore.multiple,
+          'is--active': filterStore.visible
+        }
+      ],
       style: filterStore.style
     }, filterStore.visible ? this.renderOptions(h, filterRender, compConf).concat(this.renderFooter(h)) : [])
   },

package/packages/form/src/form-config-item.js

@@ -30,6 +30,7 @@ const VxeFormConfigItem = {
     const { rules, data, collapseAll, validOpts, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow } = $xeform
     const { slots, title, folding, visible, visibleMethod, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, children } = item
     const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
+    const itemClassName = compConf ? compConf.itemClassName : ''
     const span = item.span || $xeform.span
     const align = item.align || $xeform.align
     const titleAlign = XEUtils.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign
@@ -88,15 +89,22 @@ const VxeFormConfigItem = {
       mouseleave: $xeform.handleTitleTipLeaveEvent
     } : {}
     return h('div', {
-      class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : null, className ? (XEUtils.isFunction(className) ? className(params) : className) : '', {
-        'is--title': title,
-        'is--colon': titleColon,
-        'is--asterisk': titleAsterisk,
-        'is--required': isRequired,
-        'is--hidden': folding && collapseAll,
-        'is--active': !itemVisibleMethod || itemVisibleMethod(params),
-        'is--error': showError
-      }],
+      class: [
+        'vxe-form--item',
+        item.id,
+        span ? `vxe-col--${span} is--span` : null,
+        className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
+        itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : className) : '',
+        {
+          'is--title': title,
+          'is--colon': titleColon,
+          'is--asterisk': titleAsterisk,
+          'is--required': isRequired,
+          'is--hidden': folding && collapseAll,
+          'is--active': !itemVisibleMethod || itemVisibleMethod(params),
+          'is--error': showError
+        }
+      ],
       props: {
         itemConfig: item
       },

package/packages/form/src/form-item.js

@@ -44,6 +44,7 @@ const renderItem = (h, _vm, item, slots) => {
   const { rules, data, collapseAll, validOpts, titleOverflow: allTitleOverflow } = _vm
   const { title, folding, visible, visibleMethod, field, collapseNode, itemRender, showError, errRule, className, titleOverflow } = item
   const compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null
+  const itemClassName = compConf ? compConf.itemClassName : ''
   const span = item.span || _vm.span
   const align = item.align || _vm.align
   const titleAlign = item.titleAlign || _vm.titleAlign
@@ -82,13 +83,20 @@ const renderItem = (h, _vm, item, slots) => {
     mouseleave: _vm.handleTitleTipLeaveEvent
   } : {}
   return h('div', {
-    class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : null, className ? (XEUtils.isFunction(className) ? className(params) : className) : '', {
-      'is--title': title,
-      'is--required': isRequired,
-      'is--hidden': visible === false || (folding && collapseAll),
-      'is--active': !itemVisibleMethod || itemVisibleMethod(params),
-      'is--error': showError
-    }]
+    class: [
+      'vxe-form--item',
+      item.id,
+      span ? `vxe-col--${span} is--span` : '',
+      className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
+      itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : className) : '',
+      {
+        'is--title': title,
+        'is--required': isRequired,
+        'is--hidden': visible === false || (folding && collapseAll),
+        'is--active': !itemVisibleMethod || itemVisibleMethod(params),
+        'is--error': showError
+      }
+    ]
   }, [
     h('div', {
       class: 'vxe-form--item-inner'

package/packages/table/src/body.js

@@ -66,7 +66,7 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
     isAllOverflow,
     align: allAlign,
     currentColumn,
-    cellClassName,
+    cellClassName: allCellClassName,
     cellStyle,
     mergeList,
     spanMethod,
@@ -90,6 +90,9 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
   const { actived } = editStore
   const { rHeight: scrollYRHeight } = sYOpts
   const { height: rowHeight } = rowOpts
+  const renderOpts = editRender || cellRender
+  const compConf = renderOpts ? VXETable.renderer.get(renderOpts.name) : null
+  const cellClassName = compConf ? compConf.cellClassName : ''
   const showAllTip = tooltipOpts.showAll || tooltipOpts.enabled
   const columnIndex = $xetable.getColumnIndex(column)
   const _columnIndex = $xetable.getVTColumnIndex(column)
@@ -255,19 +258,26 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
     }
   }
   return h('td', {
-    class: ['vxe-body--column', column.id, {
-      [`col--${cellAlign}`]: cellAlign,
-      [`col--${type}`]: type,
-      'col--last': $columnIndex === columns.length - 1,
-      'col--tree-node': treeNode,
-      'col--edit': isEdit,
-      'col--ellipsis': hasEllipsis,
-      'fixed--hidden': fixedHiddenColumn,
-      'col--dirty': isDirty,
-      'col--actived': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
-      'col--valid-error': hasValidError,
-      'col--current': currentColumn === column
-    }, UtilTools.getClass(className, params), UtilTools.getClass(cellClassName, params)],
+    class: [
+      'vxe-body--column',
+      column.id,
+      {
+        [`col--${cellAlign}`]: cellAlign,
+        [`col--${type}`]: type,
+        'col--last': $columnIndex === columns.length - 1,
+        'col--tree-node': treeNode,
+        'col--edit': isEdit,
+        'col--ellipsis': hasEllipsis,
+        'fixed--hidden': fixedHiddenColumn,
+        'col--dirty': isDirty,
+        'col--actived': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
+        'col--valid-error': hasValidError,
+        'col--current': currentColumn === column
+      },
+      UtilTools.getClass(cellClassName, params),
+      UtilTools.getClass(className, params),
+      UtilTools.getClass(allCellClassName, params)
+    ],
     key: columnKey || columnOpts.useKey ? column.id : $columnIndex,
     attrs,
     style: Object.assign({
@@ -343,15 +353,20 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
     }
     rows.push(
       h('tr', {
-        class: ['vxe-body--row', treeConfig ? `row--level-${rowLevel}` : '', {
-          'row--stripe': stripe && ($xetable.getVTRowIndex(row) + 1) % 2 === 0,
-          'is--new': isNewRow,
-          'is--expand-row': isExpandRow,
-          'is--expand-tree': isExpandTree,
-          'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
-          'row--radio': radioOpts.highlight && $xetable.selectRow === row,
-          'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row)
-        }, rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''],
+        class: [
+          'vxe-body--row',
+          treeConfig ? `row--level-${rowLevel}` : '',
+          {
+            'row--stripe': stripe && ($xetable.getVTRowIndex(row) + 1) % 2 === 0,
+            'is--new': isNewRow,
+            'is--expand-row': isExpandRow,
+            'is--expand-tree': isExpandTree,
+            'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
+            'row--radio': radioOpts.highlight && $xetable.selectRow === row,
+            'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row)
+          },
+          rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
+        ],
         attrs: {
           rowid: rowid
         },

package/packages/table/src/methods.js

@@ -138,12 +138,12 @@ function calculateMergerOffserIndex (list, offsetItem, type) {
 function setMerges (_vm, merges, mList, rowList) {
   if (merges) {
     const { treeConfig, visibleColumn } = _vm
-    if (treeConfig) {
-      throw new Error(UtilTools.getLog('vxe.error.noTree', ['merge-footer-items']))
-    }
     if (!XEUtils.isArray(merges)) {
       merges = [merges]
     }
+    if (treeConfig && merges.length) {
+      errLog('vxe.error.noTree', ['merge-cells | merge-footer-items'])
+    }
     merges.forEach(item => {
       let { row, col, rowspan, colspan } = item
       if (rowList && XEUtils.isNumber(row)) {
@@ -187,12 +187,12 @@ function removeMerges (_vm, merges, mList, rowList) {
   const rest = []
   if (merges) {
     const { treeConfig, visibleColumn } = _vm
-    if (treeConfig) {
-      throw new Error(UtilTools.getLog('vxe.error.noTree', ['merge-cells']))
-    }
     if (!XEUtils.isArray(merges)) {
       merges = [merges]
     }
+    if (treeConfig && merges.length) {
+      errLog('vxe.error.noTree', ['merge-cells | merge-footer-items'])
+    }
     merges.forEach(item => {
       let { row, col } = item
       if (rowList && XEUtils.isNumber(row)) {
@@ -963,7 +963,7 @@ const Methods = {
         if (!this.isInsertByRow(row)) {
           const rowIndex = this.getRowIndex(row)
           if (treeConfig && rowIndex === -1) {
-            throw new Error(UtilTools.getLog('vxe.error.noTree', ['revertData']))
+            errLog('vxe.error.noTree', ['revertData'])
           }
           const oRow = tableSourceData[rowIndex]
           if (oRow && row) {

package/types/v-x-e-table/renderer.d.ts

@@ -21,9 +21,19 @@ export interface VxeGlobalRenderer {
 }
 
 export interface RendererMapOptions {
-  // 筛选渲染
+  /**
+   * 请使用 filterClassName
+   * @deprecated
+   */
   className?: string;
+  /**
+   * 请使用 showFilterFooter
+   * @deprecated
+   */
   isFooter?: boolean;
+  // 筛选渲染
+  filterClassName?: string | ((params: ColumnFilterRenderParams) => string | { [key: string]: boolean })
+  showFilterFooter?: boolean;
   renderFilter?(h: CreateElement, renderOpts: ColumnFilterRenderOptions, params: ColumnFilterRenderParams): VNode[] | string[];
   filterMethod?(params: ColumnFilterMethodParams): boolean;
   filterResetMethod?(params: ColumnFilterResetParams): void;
@@ -31,6 +41,7 @@ export interface RendererMapOptions {
   defaultFilterMethod?(params: ColumnFilterMethodParams): boolean;
 
   // 单元格渲染
+  cellClassName?: string | ((params: ColumnCellRenderParams | ColumnEditRenderParams) => string | { [key: string]: boolean })
   renderHeader?(h: CreateElement, renderOpts: ColumnCellRenderOptions | ColumnEditRenderOptions, params: ColumnCellRenderParams | ColumnEditRenderParams): VNode[] | string[];
   renderDefault?(h: CreateElement, renderOpts: ColumnCellRenderOptions | ColumnEditRenderOptions, params: ColumnCellRenderParams | ColumnEditRenderParams): VNode[] | string[];
   renderFooter?(h: CreateElement, renderOpts: ColumnCellRenderOptions | ColumnEditRenderOptions, params: ColumnFooterRenderParams): VNode[] | string[];
@@ -50,6 +61,7 @@ export interface RendererMapOptions {
   renderToolbarTool?(h: CreateElement, renderOpts: ToolbarToolRenderOptions, params: ToolbarToolRenderParams): VNode[] | string[];
 
   // 表单-项渲染
+  itemClassName?: string | ((params: FormItemRenderParams) => string | { [key: string]: boolean })
   renderItemTitle?(h: CreateElement, renderOpts: FormItemRenderOptions, params: FormItemRenderParams): VNode[] | string[];
   renderItemContent?(h: CreateElement, renderOpts: FormItemRenderOptions, params: FormItemRenderParams): VNode[] | string[];
   itemVisibleMethod?(params: FormItemVisibleParams): boolean;