vxe-table 3.13.7 → 3.13.9

package/packages/grid/src/grid.ts

@@ -733,7 +733,7 @@ export default {
       const { $refs, toolbar, toolbarConfig, toolbarOpts, proxyOpts, tablePage, pagerConfig, editRules, isRespMsg, isActiveMsg, validConfig, pagerOpts } = this
       const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts
       const resConfigs = proxyOpts.response || proxyOpts.props || {}
-      const $xetable = $refs.xTable
+      const $xeTable = $refs.xTable
       const formData = this.getFormData()
       let button: any
       let code: string
@@ -799,8 +799,8 @@ export default {
             }
             if (isInited) {
               let defaultSort = null
-              if ($xetable) {
-                const { sortOpts } = $xetable
+              if ($xeTable) {
+                const { sortOpts } = $xeTable
                 defaultSort = sortOpts.defaultSort
               }
               // 如果使用默认排序
@@ -816,16 +816,16 @@ export default {
                   }
                 })
               }
-              if ($xetable) {
-                filterList = $xetable.getCheckedFilters()
+              if ($xeTable) {
+                filterList = $xeTable.getCheckedFilters()
               }
             } else {
-              if ($xetable) {
+              if ($xeTable) {
                 if (isReload) {
-                  $xetable.clearAll()
+                  $xeTable.clearAll()
                 } else {
-                  sortList = $xetable.getSortColumns()
-                  filterList = $xetable.getCheckedFilters()
+                  sortList = $xeTable.getSortColumns()
+                  filterList = $xeTable.getCheckedFilters()
                 }
               }
             }
@@ -848,6 +848,7 @@ export default {
             const applyArgs = [commitParams].concat(args)
             return Promise.resolve((beforeQuery || ajaxMethods)(...applyArgs))
               .then(rest => {
+                let tableData: any[] = []
                 this.tableLoading = false
                 if (rest) {
                   if (pagerConfig && isEnableConf(pagerOpts)) {
@@ -855,7 +856,7 @@ export default {
                     const total = (XEUtils.isFunction(totalProp) ? totalProp({ data: rest, $grid: this }) : XEUtils.get(rest, totalProp || 'page.total')) || 0
                     tablePage.total = XEUtils.toNumber(total)
                     const resultProp = resConfigs.result
-                    this.tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $grid: this }) : XEUtils.get(rest, resultProp || 'result')) || []
+                    tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $grid: this }) : XEUtils.get(rest, resultProp || 'result')) || []
                     // 检验当前页码，不能超出当前最大页数
                     const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1)
                     if (tablePage.currentPage > pageCount) {
@@ -863,10 +864,17 @@ export default {
                     }
                   } else {
                     const listProp = resConfigs.list
-                    this.tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $grid: this }) : XEUtils.get(rest, listProp)) : rest) || []
+                    tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $grid: this }) : XEUtils.get(rest, listProp)) : rest) || []
                   }
+                }
+                if ($xeTable as any) {
+                  $xeTable.loadData(tableData)
                 } else {
-                  this.tableData = []
+                  $xeTable.$nextTick(() => {
+                    if ($xeTable) {
+                      $xeTable.loadData(tableData)
+                    }
+                  })
                 }
                 if (afterQuery) {
                   afterQuery(...applyArgs)
@@ -894,21 +902,21 @@ export default {
           const deleteSuccessMethods = ajax.deleteSuccess
           const deleteErrorMethods = ajax.deleteError
           if (ajaxMethods) {
-            const selectRecords = $xetable.getCheckboxRecords()
-            const removeRecords = selectRecords.filter((row: any) => !$xetable.isInsertByRow(row))
+            const selectRecords = $xeTable.getCheckboxRecords()
+            const removeRecords = selectRecords.filter((row: any) => !$xeTable.isInsertByRow(row))
             const body = { removeRecords }
             const commitParams = { $grid: this, code, button, body, form: formData, options: ajaxMethods }
             const applyArgs = [commitParams].concat(args)
             if (selectRecords.length) {
               return this.handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
                 if (!removeRecords.length) {
-                  return $xetable.remove(selectRecords)
+                  return $xeTable.remove(selectRecords)
                 }
                 this.tableLoading = true
                 return Promise.resolve((beforeDelete || ajaxMethods)(...applyArgs))
                   .then(rest => {
                     this.tableLoading = false
-                    $xetable.setPendingRow(removeRecords, false)
+                    $xeTable.setPendingRow(removeRecords, false)
                     if (isRespMsg) {
                       // 检测弹窗模块
                       if (process.env.VUE_APP_VXE_ENV === 'development') {
@@ -995,7 +1003,7 @@ export default {
                 return Promise.resolve((beforeSave || ajaxMethods)(...applyArgs))
                   .then(rest => {
                     this.tableLoading = false
-                    $xetable.clearPendingRow()
+                    $xeTable.clearPendingRow()
                     if (isRespMsg) {
                       // 检测弹窗模块
                       if (process.env.VUE_APP_VXE_ENV === 'development') {
@@ -1054,7 +1062,7 @@ export default {
           const gCommandOpts = commands.get(code)
           if (gCommandOpts) {
             if (gCommandOpts.commandMethod) {
-              gCommandOpts.commandMethod({ code, button, $grid: this, $table: $xetable }, ...args)
+              gCommandOpts.commandMethod({ code, button, $grid: this, $table: $xeTable }, ...args)
             } else {
               if (process.env.VUE_APP_VXE_ENV === 'development') {
                 errLog('vxe.error.notCommands', [code])
@@ -1247,16 +1255,16 @@ export default {
     },
     getProxyInfo () {
       const { $refs, sortData, proxyConfig } = this
-      const $xetable = $refs.xTable
+      const $xeTable = $refs.xTable
       if (proxyConfig) {
         return {
-          data: this.tableData,
+          data: $xeTable ? $xeTable.getFullData() : [],
           filter: this.filterData,
           form: this.getFormData(),
           sort: sortData.length ? sortData[0] : {},
           sorts: sortData,
           pager: this.tablePage,
-          pendingRecords: $xetable ? $xetable.getPendingRecords() : []
+          pendingRecords: $xeTable ? $xeTable.getPendingRecords() : []
         }
       }
       return null

package/packages/locale/lang/ja-JP.ts

@@ -10,7 +10,7 @@ export default {
       text: 'Loading...'
     },
     error: {
-      downErr: '下载失败',
+      downErr: 'ダウンロードに失敗しました',
       errLargeData: '当绑定的数据量过大时，应该请使用 {0}，否则可能会出现卡顿',
       groupFixed: 'ヘッダー結合を使用する場合、固定列はグループで設定しなければなりません',
       groupMouseRange: 'ヘッダー結合と「{0}」は同時に使用できません。これによりエラーが発生する可能性があります',
@@ -119,7 +119,7 @@ export default {
     button: {
       confirm: 'OK',
       cancel: 'キャンセル',
-      clear: '清除'
+      clear: 'パージ'
     },
     filter: {
       search: '検索'

package/packages/table/module/edit/mixin.ts

@@ -320,7 +320,7 @@ function handleClearEdit ($xeTable: VxeTableConstructor & VxeTablePrivateMethods
   return $xeTable.$nextTick().then(() => $xeTable.updateCellAreas())
 }
 
-function handleEditActive ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, params: any, evnt: Event | null, isFocus: boolean) {
+function handleEditActive ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, params: any, evnt: Event | null, isFocus: boolean, isPos: boolean) {
   const props = $xeTable
   const reactData = $xeTable as unknown as TableReactData
 
@@ -413,7 +413,7 @@ function handleEditActive ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
         column.renderHeight = cell.offsetHeight
         actived.args = params
         actived.column = column
-        if (isFocus) {
+        if (isPos) {
           setTimeout(() => {
             $xeTable.handleFocus(params, evnt)
           })
@@ -444,7 +444,7 @@ function handleEditCell ($xeTable: VxeTableConstructor & VxeTablePrivateMethods,
           columnIndex: $xeTable.getColumnIndex(column),
           cell,
           $table: $xeTable
-        }, null, false)
+        }, null, isPos, isPos)
         internalData._lastCallTime = Date.now()
       }
       return $xeTable.$nextTick()
@@ -717,7 +717,7 @@ export default {
     handleEdit (params: any, evnt: any) {
       const $xeTable = this
 
-      return handleEditActive($xeTable, params, evnt, true)
+      return handleEditActive($xeTable, params, evnt, true, true)
     },
     /**
      * @deprecated
@@ -860,10 +860,12 @@ export default {
       const $xeTable = this
 
       let column = XEUtils.find(this.visibleColumn, column => isEnableConf(column.editRender))
+      let isPos = false
       if (fieldOrColumn) {
+        isPos = true
         column = XEUtils.isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn
       }
-      return handleEditCell($xeTable, row, column, false)
+      return handleEditCell($xeTable, row, column, isPos)
     },
     _setActiveCell (row: any, fieldOrColumn: any) {
       if (process.env.VUE_APP_VXE_ENV === 'development') {

package/packages/table/module/filter/panel.ts

@@ -3,6 +3,8 @@ import { formatText, isEnableConf, getClass } from '../../../ui/src/utils'
 import { getSlotVNs } from '../../../ui/src/vn'
 import { CreateElement } from 'vue'
 
+import type { VxeTableConstructor, VxeTablePrivateMethods, TableInternalData } from '../../../../types'
+
 const { getI18n, getIcon, renderer } = VxeUI
 
 export default {
@@ -17,13 +19,16 @@ export default {
     }
   } as any,
   render (this: any, h: CreateElement) {
-    const $xeTable = this.$parent
+    const $panel = this
+    const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+    const tableInternalData = $xeTable as unknown as TableInternalData
 
     const { filterStore } = this
-    const { args, visible, multiple, column } = filterStore
+    const { visible, multiple, column } = filterStore
     const filterRender = column ? column.filterRender : null
     const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
     const filterClassName = compConf ? (compConf.tableFilterClassName || compConf.filterClassName) : ''
+    const params = Object.assign({}, tableInternalData._currFilterParams, { $panel, $table: $xeTable })
     const filterOpts = $xeTable.computeFilterOpts
     const { destroyOnClose } = filterOpts
     return h('div', {
@@ -31,7 +36,7 @@ export default {
         'vxe-table--filter-wrapper',
         'filter--prevent-default',
         compConf && compConf.className ? compConf.className : '',
-        getClass(filterClassName, Object.assign({ $panel: this, $table: $xeTable }, args)),
+        getClass(filterClassName, params),
         {
           'is--animat': $xeTable.animat,
           'is--multiple': multiple,
@@ -43,21 +48,27 @@ export default {
   },
   methods: {
     renderOptions (h: CreateElement, filterRender: any, compConf: any) {
-      const { $parent: $xetable, filterStore } = this
-      const { args, column, multiple, maxHeight } = filterStore
+      const $panel = this
+      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+      const tableInternalData = $xeTable as unknown as TableInternalData
+
+      const { filterStore } = this
+      const { column, multiple, maxHeight } = filterStore
       const slots = column ? column.slots : null
+      const filterSlot = slots ? slots.filter : null
+      const params = Object.assign({}, tableInternalData._currFilterParams, { $panel, $table: $xeTable })
       const rtFilter = compConf ? (compConf.renderTableFilter || compConf.renderFilter) : null
-      if (slots && slots.filter) {
+      if (filterSlot) {
         return [
           h('div', {
             class: 'vxe-table--filter-template'
-          }, $xetable.callSlot(slots.filter, Object.assign({ $panel: this, context: this }, args), h))
+          }, $xeTable.callSlot(filterSlot, params, h))
         ]
       } else if (rtFilter) {
         return [
           h('div', {
             class: 'vxe-table--filter-template'
-          }, getSlotVNs(rtFilter.call($xetable, h, filterRender, Object.assign({ $panel: this, context: this }, args))))
+          }, getSlotVNs(rtFilter.call($xeTable, h, filterRender, params)))
         ]
       }
       const isAllChecked = multiple ? filterStore.isAllSelected : !filterStore.options.some((item: any) => item._checked)
@@ -75,7 +86,7 @@ export default {
               title: getI18n(multiple ? 'vxe.table.allTitle' : 'vxe.table.allFilter')
             },
             on: {
-              click: (evnt: any) => {
+              click: (evnt: MouseEvent) => {
                 this.changeAllOption(evnt, !filterStore.isAllSelected)
               }
             }
@@ -109,7 +120,7 @@ export default {
               title: item.label
             },
             on: {
-              click: (evnt: any) => {
+              click: (evnt: MouseEvent) => {
                 this.changeOption(evnt, !item._checked, item)
               }
             }
@@ -128,9 +139,11 @@ export default {
       ]
     },
     renderFooter (h: CreateElement) {
-      const { $parent: $xetable, hasCheckOption, filterStore } = this
-      const { filterOpts } = $xetable
+      const $xeTable = this.$parent as VxeTableConstructor & VxeTablePrivateMethods
+
+      const { hasCheckOption, filterStore } = this
       const { column, multiple } = filterStore
+      const filterOpts = $xeTable.computeFilterOpts
       const filterRender = column.filterRender
       const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
       const isDisabled = !hasCheckOption && !filterStore.isAllSelected && !filterStore.isIndeterminate

package/packages/table/src/methods.ts

@@ -211,7 +211,7 @@ function cacheColumnMap ($xeTable: VxeTableConstructor) {
   let hasFixed: VxeColumnPropTypes.Fixed | undefined
   const handleFunc = (column: VxeTableDefines.ColumnInfo, index: number, items: VxeTableDefines.ColumnInfo[], path?: string[], parentColumn?: VxeTableDefines.ColumnInfo) => {
     const { id: colid, field, fixed, type, treeNode } = column
-    const rest = { $index: -1, _index: -1, column, colid, index, items, parent: parentColumn || null, width: 0 }
+    const rest = { $index: -1, _index: -1, column, colid, index, items, parent: parentColumn || null, width: 0, oLeft: 0 }
     if (field) {
       if (fullColumnFieldData[field]) {
         errLog('vxe.error.colRepet', ['field', field])
@@ -1641,6 +1641,21 @@ function handleScrollToRowColumn ($xeTable: VxeTableConstructor & VxeTablePrivat
   return $xeTable.$nextTick()
 }
 
+const handleRowExpandReserve = ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, row: any, expanded: boolean) => {
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { rowExpandedReserveRowMap } = internalData
+  const expandOpts = $xeTable.computeExpandOpts
+  if (expandOpts.reserve) {
+    const rowid = getRowid($xeTable, row)
+    if (expanded) {
+      rowExpandedReserveRowMap[rowid] = row
+    } else if (rowExpandedReserveRowMap[rowid]) {
+      delete rowExpandedReserveRowMap[rowid]
+    }
+  }
+}
+
 // 计算可视渲染相关数据
 function computeScrollLoad ($xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const reactData = $xeTable as unknown as TableReactData
@@ -6067,7 +6082,7 @@ const Methods = {
     const rowid = getRowid(this, row)
     this.clearHoverRow()
     if ($el) {
-      XEUtils.arrayEach($el.querySelectorAll(`[rowid="${rowid}"]`), elem => addClass(elem, 'row--hover'))
+      XEUtils.arrayEach($el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`), elem => addClass(elem, 'row--hover'))
     }
     this.hoverRow = row
   },
@@ -7540,7 +7555,7 @@ const Methods = {
         })
       }
       if (reserve) {
-        validRows.forEach((row) => this.handleRowExpandReserve(row, expanded))
+        validRows.forEach((row) => handleRowExpandReserve($xeTable, row, expanded))
       }
     }
     this.rowExpandedMaps = rExpandedMaps
@@ -7574,36 +7589,30 @@ const Methods = {
    * 手动清空展开行状态，数据会恢复成未展开的状态
    */
   clearRowExpand () {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+    const reactData = $xeTable as unknown as TableReactData
+    const internalData = $xeTable as unknown as TableInternalData
 
-    const { expandOpts, tableFullData } = this
+    const { tableFullData } = internalData
+    const expandOpts = $xeTable.computeExpandOpts
     const { reserve } = expandOpts
-    const expList = this.getRowExpandRecords()
-    this.rowExpandedMaps = {}
+    const expList = $xeTable.getRowExpandRecords()
+    reactData.rowExpandedMaps = {}
     if (reserve) {
-      tableFullData.forEach((row: any) => this.handleRowExpandReserve(row, false))
+      tableFullData.forEach((row) => handleRowExpandReserve($xeTable, row, false))
     }
-    return this.$nextTick().then(() => {
+    return $xeTable.$nextTick().then(() => {
       if (expList.length) {
-        this.recalculate()
+        return $xeTable.recalculate()
       }
-    }).then(() => $xeTable.updateCellAreas())
+    }).then(() => {
+      return $xeTable.updateCellAreas()
+    })
   },
   clearRowExpandReserve () {
     this.rowExpandedReserveRowMap = {}
     return this.$nextTick()
   },
-  handleRowExpandReserve (row: any, expanded: any) {
-    const { rowExpandedReserveRowMap, expandOpts } = this
-    if (expandOpts.reserve) {
-      const rowid = getRowid(this, row)
-      if (expanded) {
-        rowExpandedReserveRowMap[rowid] = row
-      } else if (rowExpandedReserveRowMap[rowid]) {
-        delete rowExpandedReserveRowMap[rowid]
-      }
-    }
-  },
   getRowExpandRecords () {
     const rest: any[] = []
     XEUtils.each(this.rowExpandedMaps, item => {
@@ -7639,7 +7648,7 @@ const Methods = {
    * @param {Row} row 行对象
    */
   isTreeExpandLoaded (row: any) {
-    const $xeTable = this
+    const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
     const { fullAllDataRowIdData } = this
     const rowRest = fullAllDataRowIdData[getRowid($xeTable, row)]

package/packages/table/src/table.ts

@@ -657,6 +657,8 @@ export default {
       },
 
       scrollVMLoading: false,
+      scrollYHeight: 0,
+      scrollXWidth: 0,
 
       rowExpandHeightFlag: 1,
       calcCellHeightFlag: 1,

package/styles/components/table.scss

@@ -648,15 +648,6 @@
 .vxe-table {
   .vxe-table--header-wrapper {
     color: var(--vxe-ui-table-header-font-color);
-    &::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      height: 0;
-      width: 100%;
-      border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
-    }
   }
   /*排序*/
   .vxe-cell--sort {
@@ -993,11 +984,6 @@
       }
     }
   }
-  &.header-cell--area {
-    .vxe-table--header-wrapper {
-      user-select: none;
-    }
-  }
   &.body-cell--area {
     .vxe-table--body-wrapper {
       user-select: none;
@@ -1249,11 +1235,6 @@
     .vxe-table--border-line {
       display: none;
     }
-    .vxe-table--header-wrapper {
-      &::after {
-        display: none;
-      }
-    }
   }
   
   &.size--medium {