vxe-table 3.13.6 → 3.13.8

package/packages/locale/lang/it-IT.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: 'confermare',
-      cancel: 'Cancellare'
+      cancel: 'Cancellare',
+      clear: '清除'
     },
     filter: {
       search: 'ricerca'

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

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

package/packages/locale/lang/ko-KR.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: '확인',
-      cancel: '취소'
+      cancel: '취소',
+      clear: '清除'
     },
     filter: {
       search: '검색'

package/packages/locale/lang/nb-NO.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: '确认',
-      cancel: '取消'
+      cancel: '取消',
+      clear: '清除'
     },
     filter: {
       search: '搜索'

package/packages/locale/lang/pt-BR.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: 'Confirmar',
-      cancel: 'Cancelar'
+      cancel: 'Cancelar',
+      clear: '清除'
     },
     filter: {
       search: 'Buscar'

package/packages/locale/lang/ru-RU.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: 'подтверждать',
-      cancel: 'Отмена'
+      cancel: 'Отмена',
+      clear: '清除'
     },
     filter: {
       search: 'поиск'

package/packages/locale/lang/th-TH.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: 'ยืนยัน',
-      cancel: 'ยกเลิก'
+      cancel: 'ยกเลิก',
+      clear: '清除'
     },
     filter: {
       search: 'ค้นหา'

package/packages/locale/lang/ug-CN.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: 'جەزىملەش',
-      cancel: 'ئەمەلدىن قالدۇرۇش'
+      cancel: 'ئەمەلدىن قالدۇرۇش',
+      clear: '清除'
     },
     filter: {
       search: 'ئىزدەش'

package/packages/locale/lang/uk-UA.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: 'Підтвердити',
-      cancel: 'Скасувати'
+      cancel: 'Скасувати',
+      clear: '清除'
     },
     filter: {
       search: 'Пошук'

package/packages/locale/lang/vi-VN.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: '确认',
-      cancel: '取消'
+      cancel: '取消',
+      clear: '清除'
     },
     filter: {
       search: '搜索'

package/packages/locale/lang/zh-CHT.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: '確認',
-      cancel: '取消'
+      cancel: '取消',
+      clear: '清除'
     },
     filter: {
       search: '搜尋'

package/packages/locale/lang/zh-CN.ts

@@ -118,7 +118,8 @@ export default {
     },
     button: {
       confirm: '确认',
-      cancel: '取消'
+      cancel: '取消',
+      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/export/mixin.ts

@@ -1095,7 +1095,7 @@ function handleExportAndPrint ($xeTable: VxeTableConstructor, options: VxeTableP
     isMerge: hasMerge,
     useStyle: true,
     current: 'current',
-    modes: ['current', 'selected', 'empty'].concat(proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : [])
+    modes: (proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : []).concat(['current', 'selected', 'empty'])
   }, options)
   const types = defOpts.types || XEUtils.keys(exportOpts._typeMaps)
   const modes = defOpts.modes || []
@@ -1273,7 +1273,7 @@ export default {
         isMerge: hasMerge,
         useStyle: true,
         current: 'current',
-        modes: ['current', 'selected', 'empty'].concat(proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : []),
+        modes: (proxyOpts.ajax && proxyOpts.ajax.queryAll ? ['all'] : []).concat(['current', 'selected', 'empty']),
         download: true,
         type: 'csv'
         // filename: '',

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

@@ -1,10 +1,10 @@
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../../ui'
-import { toFilters, handleFieldOrColumn } from '../../src/util'
+import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util'
 import { getDomNode, triggerEvent } from '../../../ui/src/dom'
 import { isEnableConf } from '../../../ui/src/utils'
 
-import type { VxeTableDefines } from '../../../../types'
+import type { VxeTableConstructor, VxeTableDefines, TableReactData, TableInternalData } from '../../../../types'
 
 const { renderer } = VxeUI
 
@@ -61,89 +61,97 @@ export default {
      * @param {Object} params 参数
      */
     triggerFilterEvent (evnt: any, column: any, params: any) {
+      const $xeTable = this as VxeTableConstructor
+      const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+
       const { filterStore } = this
       if (filterStore.column === column && filterStore.visible) {
         filterStore.visible = false
       } else {
-        const { target: targetElem, pageX } = evnt
-        const { filters, filterMultiple, filterRender } = column
-        const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
-        const filterRecoverMethod = column.filterRecoverMethod || (compConf ? (compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod) : null)
-        const { visibleWidth } = getDomNode()
-        Object.assign(filterStore, {
-          args: params,
-          multiple: filterMultiple,
-          options: filters,
-          column,
-          style: null,
-          visible: true
-        })
-        // 复原状态
-        filterStore.options.forEach((option: any) => {
-          const { _checked, checked } = option
-          option._checked = checked
-          if (!checked && _checked !== checked) {
-            if (filterRecoverMethod) {
-              filterRecoverMethod({ option, column, $table: this })
+        const { initStore, filterStore } = reactData
+        const { elemStore } = internalData
+        if (filterStore.column === column && filterStore.visible) {
+          filterStore.visible = false
+        } else {
+          const { clientY, pageX } = evnt
+          const el = $xeTable.$refs.refElem as HTMLDivElement
+          const tableRect = el.getBoundingClientRect()
+          const targetElem = evnt.target as HTMLDivElement
+          const { visibleWidth } = getDomNode()
+          const { filters, filterMultiple, filterRender } = column
+          const compConf = isEnableConf(filterRender) ? renderer.get(filterRender.name) : null
+          const frMethod = column.filterRecoverMethod || (compConf ? (compConf.tableFilterRecoverMethod || compConf.filterRecoverMethod) : null)
+          internalData._currFilterParams = params
+          Object.assign(filterStore, {
+            multiple: filterMultiple,
+            options: filters,
+            column,
+            style: null
+          })
+          // 复原状态
+          filterStore.options.forEach((option: any) => {
+            const { _checked, checked } = option
+            option._checked = checked
+            if (!checked && _checked !== checked) {
+              if (frMethod) {
+                frMethod({ option, column, $table: $xeTable })
+              }
             }
-          }
-        })
-        this.checkFilterOptions()
-        this.initStore.filter = true
-        this.$nextTick(() => {
-          const { $refs } = this
-          const { refTableHeader, refTableBody, filterWrapper } = $refs
-          const bodyElem = refTableBody.$el
-          const headerElem = refTableHeader ? refTableHeader.$el : null
-          if (!bodyElem) {
-            return
-          }
-          const filterWrapperElem = filterWrapper.$el
-          if (!filterWrapperElem) {
-            return
-          }
-          const filterWidth = filterWrapperElem.offsetWidth
-          const filterHeight = filterWrapperElem.offsetHeight
-          const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header')
-          const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer')
-          const centerWidth = filterWidth / 2
-          const minMargin = 10
-          const maxLeft = bodyElem.clientWidth - filterWidth - minMargin
-          let left, right
-          const style: any = {
-            top: `${targetElem.offsetTop + targetElem.offsetParent.offsetTop + targetElem.offsetHeight}px`
-          }
-          // 判断面板不能大于表格高度
-          let maxHeight = null
-          const bodyHeight = bodyElem.clientHeight - (headerElem ? headerElem.clientHeight / 2 : 0)
-          if (filterHeight >= bodyHeight) {
-            maxHeight = Math.max(40, bodyHeight - (filterFootElem ? filterFootElem.offsetHeight : 0) - (filterHeadElem ? filterHeadElem.offsetHeight : 0))
-          }
-          if (column.fixed === 'left') {
-            left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth
-          } else if (column.fixed === 'right') {
-            right = (targetElem.offsetParent.offsetWidth - targetElem.offsetLeft) + (targetElem.offsetParent.offsetParent.offsetWidth - targetElem.offsetParent.offsetLeft) - column.renderWidth - centerWidth
-          } else {
-            left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth - bodyElem.scrollLeft
-          }
-          if (left) {
-            const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth
-            if (overflowWidth > 0) {
-              left -= overflowWidth
+          })
+          this.checkFilterOptions()
+          filterStore.visible = true
+          initStore.filter = true
+          $xeTable.$nextTick(() => {
+            const headerScrollElem = getRefElem(elemStore['main-header-scroll'])
+            if (!headerScrollElem) {
+              return
             }
-            style.left = `${Math.min(maxLeft, Math.max(minMargin, left))}px`
-          } else if (right) {
-            const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth
-            if (overflowWidth > 0) {
-              right += overflowWidth
+            const tableFilter = $xeTable.$refs.refTableFilter
+            const filterWrapperElem = tableFilter ? (tableFilter as any).$el as HTMLDivElement : null
+            if (!filterWrapperElem) {
+              return
             }
-            style.right = `${Math.max(minMargin, right)}px`
-          }
-          filterStore.style = style
-          filterStore.maxHeight = maxHeight
-        })
+            const filterWidth = filterWrapperElem.offsetWidth
+            const filterHeadElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-header')
+            const filterFootElem = filterWrapperElem.querySelector<HTMLDivElement>('.vxe-table--filter-footer')
+            const centerWidth = filterWidth / 2
+            const minMargin = 10
+            const maxLeft = el.clientWidth - filterWidth - minMargin
+            let left, right
+            const thEl = targetElem.offsetParent as HTMLTableCellElement
+            const trEl = thEl.offsetParent as HTMLTableCellElement
+            const style: any = {
+              top: `${targetElem.offsetTop + thEl.offsetTop + targetElem.offsetHeight}px`
+            }
+            // 判断面板不能大于表格高度
+            const maxHeight = Math.max(40, el.clientHeight - (clientY - tableRect.y) - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14)
+            if (column.fixed === 'left') {
+              left = targetElem.offsetLeft + thEl.offsetLeft - centerWidth
+            } else if (column.fixed === 'right') {
+              right = (thEl.offsetWidth - targetElem.offsetLeft) + (trEl.offsetWidth - trEl.offsetLeft) - column.renderWidth - centerWidth
+            } else {
+              left = targetElem.offsetLeft + thEl.offsetLeft - centerWidth - headerScrollElem.scrollLeft
+            }
+            if (left) {
+              const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth
+              if (overflowWidth > 0) {
+                left -= overflowWidth
+              }
+              style.left = `${Math.min(maxLeft, Math.max(minMargin, left))}px`
+            } else if (right) {
+              const overflowWidth = (pageX + filterWidth - centerWidth + minMargin) - visibleWidth
+              if (overflowWidth > 0) {
+                right += overflowWidth
+              }
+              style.right = `${Math.max(minMargin, right)}px`
+            }
+            filterStore.style = style
+            filterStore.maxHeight = maxHeight
+          })
+        }
+        $xeTable.dispatchEvent('filter-visible', { column, field: column.field, property: column.field, filterList: $xeTable.getCheckedFilters(), visible: filterStore.visible }, evnt)
       }
-      this.emitEvent('filter-visible', { column, field: column.field, property: column.field, filterList: this.getCheckedFilters(), visible: filterStore.visible }, evnt)
     },
     handleFilterConfirmFilter (evnt: Event | null) {
       const $xeTable = this

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

@@ -60,6 +60,7 @@ export default {
 
       const { $refs, tId, editStore, menuConfig, contextMenu, ctxMenuStore, ctxMenuOpts, mouseConfig, mouseOpts } = this
       const { selected } = editStore
+      const tableFilter = $xeTable.$refs.refTableFilter
       const layoutList = ['header', 'body', 'footer']
       if (isEnableConf(menuConfig) || contextMenu) {
         if (ctxMenuStore.visible && $refs.refTableMenu && getEventTargetNode(evnt, $refs.refTableMenu.$el).flag) {
@@ -128,7 +129,7 @@ export default {
           }
         }
       }
-      if ($refs.filterWrapper && !getEventTargetNode(evnt, $refs.filterWrapper.$el).flag) {
+      if (tableFilter && !getEventTargetNode(evnt, tableFilter.$el).flag) {
         this.closeFilter()
       }
       this.closeMenu()

package/packages/table/src/methods.ts

@@ -4643,12 +4643,14 @@ const Methods = {
   handleGlobalMousedownEvent (evnt: any) {
     const { $el, $refs, $xegrid, $toolbar, mouseConfig, editStore, ctxMenuStore, editRules, editOpts, validOpts, areaOpts, filterStore, customStore, getRowNode } = this
     const { actived } = editStore
-    const { refTableMenu, filterWrapper, customWrapper, refValidTooltip } = $refs
+    const { customWrapper, refValidTooltip } = $refs
+    const tableFilter = $refs.refTableFilter
+    const tableMenu = $refs.refTableMenu
     // 筛选
-    if (filterWrapper) {
+    if (tableFilter) {
       if (getEventTargetNode(evnt, $el, 'vxe-cell--filter').flag) {
         // 如果点击了筛选按钮
-      } else if (getEventTargetNode(evnt, filterWrapper.$el).flag) {
+      } else if (getEventTargetNode(evnt, tableFilter.$el).flag) {
         // 如果点击筛选容器
       } else {
         if (!getEventTargetNode(evnt, document.body, 'vxe-table--ignore-clear').flag) {
@@ -4725,7 +4727,7 @@ const Methods = {
         }
       }
     } else if (mouseConfig) {
-      if (!getEventTargetNode(evnt, $el).flag && !($xegrid && getEventTargetNode(evnt, $xegrid.$el).flag) && !(refTableMenu && getEventTargetNode(evnt, refTableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
+      if (!getEventTargetNode(evnt, $el).flag && !($xegrid && getEventTargetNode(evnt, $xegrid.$el).flag) && !(tableMenu && getEventTargetNode(evnt, tableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
         if (this.clearSelected) {
           this.clearSelected()
         }
@@ -4744,7 +4746,7 @@ const Methods = {
       }
     }
     // 如果配置了快捷菜单且，点击了其他地方则关闭
-    if (ctxMenuStore.visible && refTableMenu && !getEventTargetNode(evnt, refTableMenu.$el).flag) {
+    if (ctxMenuStore.visible && tableMenu && !getEventTargetNode(evnt, tableMenu.$el).flag) {
       this.closeMenu()
     }
     const isActivated = getEventTargetNode(evnt, ($xegrid || this).$el).flag
@@ -6065,7 +6067,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
   },

package/packages/table/src/table.ts

@@ -1840,7 +1840,7 @@ export default {
       initStore.filter
         ? h(TableFilterPanelComponent, {
           key: 'tf',
-          ref: 'filterWrapper',
+          ref: 'refTableFilter',
           props: {
             filterStore
           }

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 {