vxe-table 3.4.14-beta.2 → 3.5.0-beta.0

package/packages/table/src/body.js

@@ -1,9 +1,9 @@
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import VXETable from '../../v-x-e-table'
-import { UtilTools, DomTools, isEnableConf } from '../../tools'
+import UtilTools, { isEnableConf } from '../../tools/utils'
 import { getOffsetSize, calcTreeLine, mergeBodyMethod, removeScrollListener, restoreScrollListener } from './util'
-import { browse } from '../../tools/src/dom'
+import DomTools from '../../tools/dom'
 
 const renderType = 'body'
 
@@ -83,7 +83,8 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
     editStore,
     validStore,
     tooltipConfig,
-    rowOpts
+    rowOpts,
+    columnOpts
   } = $xetable
   const { type, cellRender, editRender, align, showOverflow, className, treeNode } = column
   const { actived } = editStore
@@ -267,7 +268,7 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
       'col--valid-error': hasValidError,
       'col--current': currentColumn === column
     }, UtilTools.getClass(className, params), UtilTools.getClass(cellClassName, params)],
-    key: columnKey ? column.id : $columnIndex,
+    key: columnKey || columnOpts.useKey ? column.id : $columnIndex,
     attrs,
     style: Object.assign({
       height: hasEllipsis && (scrollYRHeight || rowHeight) ? `${scrollYRHeight || rowHeight}px` : ''
@@ -343,7 +344,7 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
           rowid: rowid
         },
         style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-        key: rowKey || treeConfig ? rowid : $rowIndex,
+        key: (rowKey || rowOpts.useKey) || treeConfig ? rowid : $rowIndex,
         on: trOn
       }, tableColumn.map((column, $columnIndex) => {
         return renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
@@ -401,7 +402,7 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
  * 同步滚动条
  */
 let scrollProcessTimeout
-function syncBodyScroll (scrollTop, elem1, elem2) {
+function syncBodyScroll (_vm, fixedType, scrollTop, elem1, elem2) {
   if (elem1 || elem2) {
     if (elem1) {
       removeScrollListener(elem1)
@@ -412,9 +413,27 @@ function syncBodyScroll (scrollTop, elem1, elem2) {
       elem2.scrollTop = scrollTop
     }
     clearTimeout(scrollProcessTimeout)
-    scrollProcessTimeout = setTimeout(function () {
+    scrollProcessTimeout = setTimeout(() => {
+      // const { tableBody, leftBody, rightBody } = _vm.$refs
+      // const bodyElem = tableBody.$el
+      // const leftElem = leftBody ? leftBody.$el : null
+      // const rightElem = rightBody ? rightBody.$el : null
       restoreScrollListener(elem1)
       restoreScrollListener(elem2)
+      // 检查滚动条是的同步
+      // let targetTop = bodyElem.scrollTop
+      // if (fixedType === 'left') {
+      //   if (leftElem) {
+      //     targetTop = leftElem.scrollTop
+      //   }
+      // } else if (fixedType === 'right') {
+      //   if (rightElem) {
+      //     targetTop = rightElem.scrollTop
+      //   }
+      // }
+      // setScrollTop(bodyElem, targetTop)
+      // setScrollTop(leftElem, targetTop)
+      // setScrollTop(rightElem, targetTop)
     }, 300)
   }
 }
@@ -621,10 +640,10 @@ export default {
       }
       if (leftElem && fixedType === 'left') {
         scrollTop = leftElem.scrollTop
-        syncBodyScroll(scrollTop, bodyElem, rightElem)
+        syncBodyScroll($xetable, fixedType, scrollTop, bodyElem, rightElem)
       } else if (rightElem && fixedType === 'right') {
         scrollTop = rightElem.scrollTop
-        syncBodyScroll(scrollTop, bodyElem, leftElem)
+        syncBodyScroll($xetable, fixedType, scrollTop, bodyElem, leftElem)
       } else {
         if (isRollX) {
           if (headerElem) {
@@ -637,7 +656,7 @@ export default {
         if (leftElem || rightElem) {
           $xetable.checkScrolling()
           if (isRollY) {
-            syncBodyScroll(scrollTop, leftElem, rightElem)
+            syncBodyScroll($xetable, fixedType, scrollTop, leftElem, rightElem)
           }
         }
       }
@@ -689,15 +708,15 @@ export default {
             wheelYInterval = wheelYInterval - (wheelYTotal - wheelYSize)
           }
           const { scrollTop, clientHeight, scrollHeight } = bodyElem
-          const targerTop = scrollTop + (wheelYInterval * (isTopWheel ? -1 : 1))
-          bodyElem.scrollTop = targerTop
+          const targetTop = scrollTop + (wheelYInterval * (isTopWheel ? -1 : 1))
+          bodyElem.scrollTop = targetTop
           if (leftElem) {
-            leftElem.scrollTop = targerTop
+            leftElem.scrollTop = targetTop
           }
           if (rightElem) {
-            rightElem.scrollTop = targerTop
+            rightElem.scrollTop = targetTop
           }
-          if (isTopWheel ? targerTop < scrollHeight - clientHeight : targerTop >= 0) {
+          if (isTopWheel ? targetTop < scrollHeight - clientHeight : targetTop >= 0) {
             this.wheelTime = setTimeout(handleSmooth, 10)
           }
           this.wheelYTotal = wheelYTotal
@@ -728,8 +747,8 @@ export default {
       const { tableBody } = $refs
       const bodyElem = tableBody.$el
 
-      const deltaTop = browse.firefox ? deltaY * 40 : deltaY
-      const deltaLeft = browse.firefox ? deltaX * 40 : deltaX
+      const deltaTop = deltaY
+      const deltaLeft = deltaX
       const isTopWheel = deltaTop < 0
       // 如果滚动位置已经是顶部或底部，则不需要触发
       if (isTopWheel ? scrollBodyElem.scrollTop <= 0 : scrollBodyElem.scrollTop >= scrollBodyElem.scrollHeight - scrollBodyElem.clientHeight) {

package/packages/table/src/cell.js

@@ -1,8 +1,9 @@
 import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import VXETable from '../../v-x-e-table'
-import { UtilTools, DomTools } from '../../tools'
-import { eqEmptyValue, isEnableConf } from '../../tools/src/utils'
+import DomTools from '../../tools/dom'
+import UtilTools, { eqEmptyValue, isEnableConf, getFuncText } from '../../tools/utils'
+import { getColumnConfig } from './util'
 
 function renderHelpIcon (h, params) {
   const { $table, column } = params
@@ -136,7 +137,7 @@ export const Cell = {
           renMaps.renderHeader = this.renderFilterHeader
         }
     }
-    return UtilTools.getColumnConfig($xetable, _vm, renMaps)
+    return getColumnConfig($xetable, _vm, renMaps)
   },
   /**
    * 单元格
@@ -182,7 +183,7 @@ export const Cell = {
         // 如果设置占位符
         h('span', {
           class: 'vxe-cell--placeholder'
-        }, UtilTools.formatText(UtilTools.getFuncText(cellPlaceholder), 1))
+        }, UtilTools.formatText(getFuncText(cellPlaceholder), 1))
       ] : UtilTools.formatText(cellValue, 1))
     ]
   },

package/packages/table/src/column.js

@@ -1,5 +1,5 @@
 import Cell from '../../table/src/cell'
-import { UtilTools } from '../../tools'
+import UtilTools from '../../tools/utils'
 
 const props = {
   // 列唯一主键

package/packages/table/src/columnInfo.js

@@ -0,0 +1,148 @@
+import XEUtils from 'xe-utils'
+import GlobalConfig from '../../v-x-e-table/src/conf'
+import { formats } from '../../v-x-e-table/src/formats'
+import { toFilters } from './util'
+import { getFuncText } from '../../tools/utils'
+import { warnLog, errLog } from '../../tools/log'
+
+export class ColumnInfo {
+  /* eslint-disable @typescript-eslint/no-use-before-define */
+  constructor ($xetable, _vm, { renderHeader, renderCell, renderFooter, renderData } = {}) {
+    const $xegrid = $xetable.$xegrid
+    const proxyOpts = $xegrid ? $xegrid.proxyOpts : null
+    const formatter = _vm.formatter
+    const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true
+
+    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      const types = ['seq', 'checkbox', 'radio', 'expand', 'html']
+      if (_vm.type && types.indexOf(_vm.type) === -1) {
+        warnLog('vxe.error.errProp', [`type=${_vm.type}`, types.join(', ')])
+      }
+      if (XEUtils.isBoolean(_vm.cellRender) || (_vm.cellRender && !XEUtils.isObject(_vm.cellRender))) {
+        warnLog('vxe.error.errProp', [`column.cell-render=${_vm.cellRender}`, 'column.cell-render={}'])
+      }
+      if (XEUtils.isBoolean(_vm.editRender) || (_vm.editRender && !XEUtils.isObject(_vm.editRender))) {
+        warnLog('vxe.error.errProp', [`column.edit-render=${_vm.editRender}`, 'column.edit-render={}'])
+      }
+      if (_vm.cellRender && _vm.editRender) {
+        warnLog('vxe.error.errConflicts', ['column.cell-render', 'column.edit-render'])
+      }
+      if (_vm.type === 'expand') {
+        if ($xetable.treeConfig && $xetable.treeOpts.line) {
+          errLog('vxe.error.errConflicts', ['tree-config.line', 'column.type=expand'])
+        }
+      }
+      if (_vm.remoteSort) {
+        warnLog('vxe.error.delProp', ['column.remote-sort', 'sort-config.remote'])
+      }
+      if (_vm.sortMethod) {
+        warnLog('vxe.error.delProp', ['column.sort-method', 'sort-config.sortMethod'])
+      }
+      if (formatter) {
+        if (XEUtils.isString(formatter)) {
+          const globalFunc = formats.get(formatter) || XEUtils[formatter]
+          if (!XEUtils.isFunction(globalFunc)) {
+            errLog('vxe.error.notFunc', [formatter])
+          }
+        } else if (XEUtils.isArray(formatter)) {
+          const globalFunc = formats.get(formatter[0]) || XEUtils[formatter[0]]
+          if (!XEUtils.isFunction(globalFunc)) {
+            errLog('vxe.error.notFunc', [formatter[0]])
+          }
+        }
+      }
+    }
+
+    Object.assign(this, {
+      // 基本属性
+      type: _vm.type,
+      property: _vm.field,
+      field: _vm.field,
+      title: _vm.title,
+      width: _vm.width,
+      minWidth: _vm.minWidth,
+      resizable: _vm.resizable,
+      fixed: _vm.fixed,
+      align: _vm.align,
+      headerAlign: _vm.headerAlign,
+      footerAlign: _vm.footerAlign,
+      showOverflow: _vm.showOverflow,
+      showHeaderOverflow: _vm.showHeaderOverflow,
+      showFooterOverflow: _vm.showFooterOverflow,
+      className: _vm.className,
+      headerClassName: _vm.headerClassName,
+      footerClassName: _vm.footerClassName,
+      formatter: formatter,
+      sortable: _vm.sortable,
+      sortBy: _vm.sortBy,
+      sortType: _vm.sortType,
+      sortMethod: _vm.sortMethod,
+      remoteSort: _vm.remoteSort,
+      filters: toFilters(_vm.filters),
+      filterMultiple: XEUtils.isBoolean(_vm.filterMultiple) ? _vm.filterMultiple : true,
+      filterMethod: _vm.filterMethod,
+      filterResetMethod: _vm.filterResetMethod,
+      filterRecoverMethod: _vm.filterRecoverMethod,
+      filterRender: _vm.filterRender,
+      treeNode: _vm.treeNode,
+      cellType: _vm.cellType,
+      cellRender: _vm.cellRender,
+      editRender: _vm.editRender,
+      contentRender: _vm.contentRender,
+      exportMethod: _vm.exportMethod,
+      footerExportMethod: _vm.footerExportMethod,
+      titleHelp: _vm.titleHelp,
+      // 自定义参数
+      params: _vm.params,
+      // 渲染属性
+      id: _vm.colId || XEUtils.uniqueId('col_'),
+      parentId: null,
+      visible,
+      // 内部属性（一旦被使用，将导致不可升级版本）
+      halfVisible: false,
+      defaultVisible: visible,
+      checked: false,
+      halfChecked: false,
+      disabled: false,
+      level: 1,
+      rowSpan: 1,
+      colSpan: 1,
+      order: null,
+      sortTime: 0,
+      renderWidth: 0,
+      renderHeight: 0,
+      resizeWidth: 0,
+      renderLeft: 0,
+      renderArgs: [], // 渲染参数可用于扩展
+      model: {},
+      renderHeader: renderHeader || _vm.renderHeader,
+      renderCell: renderCell || _vm.renderCell,
+      renderFooter: renderFooter || _vm.renderFooter,
+      renderData: renderData,
+      // 单元格插槽，只对 grid 有效
+      slots: _vm.slots
+    })
+    if (proxyOpts && proxyOpts.beforeColumn) {
+      proxyOpts.beforeColumn({ $grid: $xegrid, column: this })
+    }
+  }
+
+  getTitle () {
+    return getFuncText(this.title || (this.type === 'seq' ? GlobalConfig.i18n('vxe.table.seqTitle') : ''))
+  }
+
+  getKey () {
+    return this.property || (this.type ? `type=${this.type}` : null)
+  }
+
+  update (name, value) {
+    // 不支持双向的属性
+    if (name !== 'filters') {
+      if (name === 'field') {
+        // 兼容旧属性
+        this.property = value
+      }
+      this[name] = value
+    }
+  }
+}