vxe-table 4.6.5 → 4.6.6

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

@@ -8,7 +8,7 @@ export default {
       text: '加载中...'
     },
     error: {
-      groupFixed: '如果使用分组表头，固定列必须按组设置',
+      groupFixed: '如果使用分组表头，冻结列必须按组设置',
       groupMouseRange: '分组表头与 "{0}" 不能同时使用，这可能会出现错误',
       groupTag: '分组列头应该使用 "{0}" 而不是 "{1}"，这可能会出现错误',
       scrollErrProp: '启用虚拟滚动后不支持该参数 "{0}"',
@@ -61,7 +61,7 @@ export default {
       customAll: '全部',
       customConfirm: '确认',
       customRestore: '重置',
-      maxFixedCol: '最大固定列的数量不能超过 {0} 个'
+      maxFixedCol: '最大冻结列的数量不能超过 {0} 个'
     },
     grid: {
       selectOneRecord: '请至少选择一条记录！',
@@ -96,7 +96,7 @@ export default {
       endPageTitle: '末页'
     },
     alert: {
-      title: '消息提示'
+      title: '系统提示'
     },
     button: {
       confirm: '确认',
@@ -109,7 +109,18 @@ export default {
       cstmTitle: '列设置',
       cstmRestore: '恢复默认',
       cstmCancel: '取消',
-      cstmConfirm: '确定'
+      cstmConfirm: '确定',
+      cstmConfirmRestore: '请确认是否恢复成默认列配置？',
+      cstmDragTarget: '移动目标：{0}',
+      setting: {
+        colSort: '排序',
+        colTitle: '标题',
+        colVisible: '是否显示',
+        colFixed: '冻结列',
+        fixedLeft: '左侧',
+        fixedUnset: '不设置',
+        fixedRight: '右侧'
+      }
     },
     import: {
       modes: {
@@ -188,9 +199,9 @@ export default {
       customAll: '全部',
       customConfirm: '确认',
       customRestore: '重置',
-      fixedLeft: '固定在左侧',
-      fixedRight: '固定在右侧',
-      cancelfixed: '取消固定'
+      fixedLeft: '冻结在左侧',
+      fixedRight: '冻结在右侧',
+      cancelfixed: '取消冻结列'
     },
     input: {
       date: {

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

@@ -8,7 +8,7 @@ export default {
       text: '加載中...'
     },
     error: {
-      groupFixed: '如果使用分組表頭，固定列必須按組設定',
+      groupFixed: '如果使用分組表頭，固冻结列必須按組設定',
       groupMouseRange: '分组表頭與 "{0}" 不能同時使用，這可能會出現錯誤',
       groupTag: '分組列頭應該使用 "{0}" 而不是 "{1}"，這可能會出現錯誤',
       scrollErrProp: '啟用虛擬滾動後不支持該參數 "{0}"',
@@ -61,7 +61,7 @@ export default {
       customAll: '全部',
       customConfirm: '確認',
       customRestore: '重置',
-      maxFixedCol: '最大固定列的數量不能超過 {0} 個'
+      maxFixedCol: '最大冻结列的數量不能超過 {0} 個'
     },
     grid: {
       selectOneRecord: '請至少選擇一條記錄！',
@@ -96,7 +96,7 @@ export default {
       endPageTitle: '末頁'
     },
     alert: {
-      title: '訊息提示'
+      title: '系統提示'
     },
     button: {
       confirm: '確認',
@@ -109,7 +109,18 @@ export default {
       cstmTitle: '列設定',
       cstmRestore: '恢復默認',
       cstmCancel: '取消',
-      cstmConfirm: '確認'
+      cstmConfirm: '確認',
+      cstmConfirmRestore: '請確認是否恢復成默認列配置？',
+      cstmDragTarget: '移動目標：{0}',
+      setting: {
+        colSort: '排序',
+        colTitle: '標題',
+        colVisible: '是否顯示',
+        colFixed: '冻结列',
+        fixedLeft: '左側',
+        fixedUnset: '不設定',
+        fixedRight: '右側'
+      }
     },
     import: {
       modes: {
@@ -188,9 +199,9 @@ export default {
       customAll: '全部',
       customConfirm: '確認',
       customRestore: '重置',
-      fixedLeft: '固定在左側',
-      fixedRight: '固定在右側',
-      cancelfixed: '取消固定'
+      fixedLeft: '冻结在左側',
+      fixedRight: '冻结在右側',
+      cancelfixed: '取消冻结列'
     },
     input: {
       date: {

package/packages/modal/src/modal.ts

@@ -698,7 +698,7 @@ export default defineComponent({
       if (cornerSlot) {
         rightVNs.push(
           h('span', {
-            class: 'vxe-modal--corner-warpper'
+            class: 'vxe-modal--corner-wrapper'
           }, getSlotVNs(cornerSlot({ $modal: $xemodal })))
         )
       }

package/packages/radio/src/group.ts

@@ -50,6 +50,11 @@ export default defineComponent({
       return propsOpts.value || 'value'
     })
 
+    const computeDisabledField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.disabled || 'disabled'
+    })
+
     let radioGroupMethods = {} as RadioGroupMethods
 
     useSize(props)
@@ -76,13 +81,15 @@ export default defineComponent({
       const defaultSlot = slots.default
       const valueField = computeValueField.value as 'value'
       const labelField = computeLabelField.value as 'label'
+      const disabledField = computeDisabledField.value as 'disabled'
       const btnComp = type === 'button' ? VxeRadioButtonComponent : VxeRadioComponent
       return h('div', {
         class: 'vxe-radio-group'
       }, defaultSlot ? defaultSlot({}) : (options ? options.map(item => {
         return h(btnComp, {
           label: item[valueField],
-          content: item[labelField]
+          content: item[labelField],
+          disabled: item[disabledField]
         })
       }) : []))
     }

package/packages/table/src/columnInfo.ts

@@ -116,15 +116,18 @@ export class ColumnInfo {
       rowSpan: 1,
       // 跨列
       colSpan: 1,
-      // 数据排序-自定义排序
-      order: null,
-      // 数据排序-用于多列的先后顺序
-      sortTime: 0,
+
+      // 数据排序
+      order: null, // 用于记录排序类型，升序和倒序
+      sortTime: 0, // 用于多列的先后顺序
+
       // 列排序
-      customOrder: 0,
+      sortNumber: 0, // 用于记录自定义列顺序
+      renderSortNumber: 0, // 用于记录自定义列顺序
+
       renderWidth: 0,
       renderHeight: 0,
-      resizeWidth: 0,
+      resizeWidth: 0, // 手动调整
       renderLeft: 0,
       renderArgs: [], // 渲染参数可用于扩展
       model: {},

package/packages/table/src/table.ts

@@ -18,14 +18,14 @@ import VxeLoading from '../../loading/index'
 import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener, XEBodyScrollElement, getRootColumn } from './util'
 import { getSlotVNs } from '../../tools/vn'
 
-import { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, VxeTooltipInstance, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, VxeTableMethods, TableMethods, VxeTableMenuPanelInstance, VxeTableDefines, VxeTableProps, VxeColumnPropTypes, VxeTableDataRow } from '../../../types/all'
+import { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, VxeTooltipInstance, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, VxeTableMethods, TableMethods, VxeTableMenuPanelInstance, VxeTableDefines, VxeTableProps, VxeColumnPropTypes, VxeTableDataRow, VxeTableCustomStorageObj } from '../../../types/all'
 
 const isWebkit = browse['-webkit'] && !browse.edge
 
 const resizableStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_WIDTH'
 const visibleStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_VISIBLE'
 const fixedStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_FIXED'
-const orderStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_ORDER'
+const sortStorageKey = 'VXE_TABLE_CUSTOM_COLUMN_SORT'
 
 export default defineComponent({
   name: 'VxeTable',
@@ -130,6 +130,7 @@ export default defineComponent({
         visible: false,
         maxHeight: 0
       },
+      customColumnList: [],
       // 当前选中的筛选列
       filterStore: {
         isAllSelected: false,
@@ -527,9 +528,10 @@ export default defineComponent({
     })
 
     const computeFixedColumnSize = computed(() => {
-      const { tableFullColumn } = internalData
+      const { collectColumn } = internalData
       let fixedSize = 0
-      tableFullColumn.forEach((column) => {
+      // 只判断第一层
+      collectColumn.forEach((column) => {
         if (column.fixed) {
           fixedSize++
         }
@@ -886,18 +888,20 @@ export default defineComponent({
       const { collectColumn } = internalData
       const customOpts = computeCustomOpts.value
       const { storage } = customOpts
-      const isCustomResizable = storage === true || (storage && storage.resizable)
-      const isCustomVisible = storage === true || (storage && storage.visible)
-      const isCustomFixed = storage === true || (storage && storage.fixed)
-      const isCustomOrder = storage === true || (storage && storage.order)
-      if (customConfig && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomOrder)) {
+      const isAllCustom = storage === true
+      const storageOpts: VxeTableCustomStorageObj = isAllCustom ? {} : Object.assign({}, storage || {})
+      const isCustomResizable = isAllCustom || storageOpts.resizable
+      const isCustomVisible = isAllCustom || storageOpts.visible
+      const isCustomFixed = isAllCustom || storageOpts.fixed
+      const isCustomSort = isAllCustom || storageOpts.sort
+      if (customConfig && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
         const customMap: {
           [key: string]: {
             field?: VxeColumnPropTypes.Field
             resizeWidth?: number
             visible?: boolean
             fixed?: string
-            order?: number
+            sortNumber?: number
           }
         } = {}
         if (!id) {
@@ -929,18 +933,18 @@ export default defineComponent({
           }
         }
         // 自定义顺序
-        if (isCustomOrder) {
-          const columnOrderStorage = getCustomStorageMap(orderStorageKey)[id]
-          if (columnOrderStorage) {
-            // const colOrderSeqs = columnOrderStorage.split(',')
-            // colOrderSeqs.forEach((orderConf: any) => {
-            //   const [colKey, order] = orderConf.split('|')
-            //   if (customMap[colKey]) {
-            //     customMap[colKey].order = order
-            //   } else {
-            //     customMap[colKey] = { order }
-            //   }
-            // })
+        if (isCustomSort) {
+          const columnSortStorage = getCustomStorageMap(sortStorageKey)[id]
+          if (columnSortStorage) {
+            const colOrderSeqs = columnSortStorage.split(',')
+            colOrderSeqs.forEach((orderConf: any) => {
+              const [colKey, sortNumber] = orderConf.split('|')
+              if (customMap[colKey]) {
+                customMap[colKey].sortNumber = sortNumber
+              } else {
+                customMap[colKey] = { sortNumber }
+              }
+            })
           }
         }
         // 自定义隐藏列
@@ -975,7 +979,7 @@ export default defineComponent({
             keyMap[colKey] = column
           }
         })
-        XEUtils.each(customMap, ({ visible, resizeWidth, fixed, order }, colKey) => {
+        XEUtils.each(customMap, ({ visible, resizeWidth, fixed, sortNumber }, colKey) => {
           const column = keyMap[colKey]
           if (column) {
             if (XEUtils.isNumber(resizeWidth)) {
@@ -987,8 +991,8 @@ export default defineComponent({
             if (fixed) {
               column.fixed = fixed
             }
-            if (order) {
-              column.customOrder = order
+            if (sortNumber) {
+              column.renderSortNumber = Number(sortNumber)
             }
           }
         })
@@ -999,7 +1003,7 @@ export default defineComponent({
      * 更新数据列的 Map
      * 牺牲数据组装的耗时，用来换取使用过程中的流畅
      */
-    const cacheColumnMap = () => {
+    const cacheColumnMap = (isInit?: boolean) => {
       const { tableFullColumn, collectColumn } = internalData
       const fullColumnIdData: any = internalData.fullColumnIdData = {}
       const fullColumnFieldData: any = internalData.fullColumnFieldData = {}
@@ -1073,6 +1077,9 @@ export default defineComponent({
         if (fullColumnIdData[colid]) {
           errLog('vxe.error.colRepet', ['colId', colid])
         }
+        if (isInit) {
+          column.sortNumber = index
+        }
         fullColumnIdData[colid] = rest
       }
       if (isGroup) {
@@ -1383,7 +1390,7 @@ export default defineComponent({
             }
           }
           if (!allRemoteSort && sortable && order) {
-            orderColumns.push({ column, field, property: field, order, sortTime: column.sortTime })
+            orderColumns.push({ column, field, property: field, order: order, sortTime: column.sortTime })
           }
         })
         if (sortMultiple && chronological && orderColumns.length > 1) {
@@ -2531,7 +2538,7 @@ export default defineComponent({
       internalData.collectColumn = collectColumn
       const tableFullColumn = getColumnList(collectColumn)
       internalData.tableFullColumn = tableFullColumn
-      cacheColumnMap()
+      cacheColumnMap(true)
       restoreCustomStorage()
       parseColumns().then(() => {
         if (reactData.scrollXLoad) {
@@ -3103,7 +3110,7 @@ export default defineComponent({
        */
       getColumnById (colid) {
         const fullColumnIdData = internalData.fullColumnIdData
-        return fullColumnIdData[colid] ? fullColumnIdData[colid].column : null
+        return colid && fullColumnIdData[colid] ? fullColumnIdData[colid].column : null
       },
       /**
        * 根据列的字段名获取列
@@ -3111,7 +3118,7 @@ export default defineComponent({
        */
       getColumnByField (field) {
         const fullColumnFieldData = internalData.fullColumnFieldData
-        return fullColumnFieldData[field] ? fullColumnFieldData[field].column : null
+        return field && fullColumnFieldData[field] ? fullColumnFieldData[field].column : null
       },
       /**
        * 获取当前表格的列
@@ -3187,7 +3194,7 @@ export default defineComponent({
        */
       getRowById (cellValue) {
         const { fullDataRowIdData } = internalData
-        const rowid = XEUtils.eqNull(cellValue) ? '' : encodeURIComponent(cellValue)
+        const rowid = XEUtils.eqNull(cellValue) ? '' : encodeURIComponent(cellValue || '')
         return fullDataRowIdData[rowid] ? fullDataRowIdData[rowid].row : null
       },
       /**
@@ -3308,10 +3315,11 @@ export default defineComponent({
         const { collectColumn } = internalData
         const customOpts = computeCustomOpts.value
         const { checkMethod } = customOpts
-        const opts = Object.assign({
+        const opts: VxeTableCustomStorageObj = Object.assign({
           visible: true,
           resizable: options === true,
-          fixed: options === true
+          fixed: options === true,
+          sort: options === true
         }, options)
         XEUtils.eachTree(collectColumn, (column) => {
           if (opts.resizable) {
@@ -3320,6 +3328,9 @@ export default defineComponent({
           if (opts.fixed) {
             column.fixed = column.defaultFixed
           }
+          if (opts.sort) {
+            column.renderSortNumber = column.sortNumber
+          }
           if (!checkMethod || checkMethod({ column })) {
             column.visible = column.defaultVisible
           }
@@ -3335,8 +3346,16 @@ export default defineComponent({
       /**
        * 刷新列信息
        * 将固定的列左边、右边分别靠边
+       * 如果传 true 则会检查列顺序并排序
        */
-      refreshColumn () {
+      refreshColumn (resiveOrder) {
+        if (resiveOrder) {
+          const columnList = XEUtils.orderBy(internalData.collectColumn, 'renderSortNumber')
+          internalData.collectColumn = columnList
+          const tableFullColumn = getColumnList(columnList)
+          internalData.tableFullColumn = tableFullColumn
+          cacheColumnMap()
+        }
         return parseColumns().then(() => {
           return tableMethods.refreshScroll()
         }).then(() => {
@@ -3855,7 +3874,7 @@ export default defineComponent({
         tableFullColumn.forEach((column) => {
           const { field, order } = column
           if (column.sortable && order) {
-            sortList.push({ column, field, property: field, order, sortTime: column.sortTime })
+            sortList.push({ column, field, property: field, order: order, sortTime: column.sortTime })
           }
         })
         if (multiple && chronological && sortList.length > 1) {
@@ -5257,7 +5276,9 @@ export default defineComponent({
         const { collectColumn } = internalData
         const customOpts = computeCustomOpts.value
         const { storage } = customOpts
-        const isCustomFixed = storage === true || (storage && storage.fixed)
+        const isAllStorage = storage === true
+        const storageOpts = isAllStorage ? {} : Object.assign({}, storage || {})
+        const isCustomFixed = isAllStorage || storageOpts.fixed
         if (customConfig && isCustomFixed) {
           const columnFixedStorageMap = getCustomStorageMap(fixedStorageKey)
           const colFixeds: any[] = []
@@ -5282,7 +5303,9 @@ export default defineComponent({
         const { collectColumn } = internalData
         const customOpts = computeCustomOpts.value
         const { checkMethod, storage } = customOpts
-        const isCustomVisible = storage === true || (storage && storage.visible)
+        const isAllStorage = storage === true
+        const storageOpts = isAllStorage ? {} : Object.assign({}, storage || {})
+        const isCustomVisible = isAllStorage || storageOpts.visible
         if (customConfig && isCustomVisible) {
           const columnVisibleStorageMap = getCustomStorageMap(visibleStorageKey)
           const colHides: any[] = []
@@ -5313,7 +5336,7 @@ export default defineComponent({
       handleCustom () {
         tablePrivateMethods.saveCustomVisible()
         tablePrivateMethods.analyColumnWidth()
-        return tableMethods.refreshColumn()
+        return tableMethods.refreshColumn(true)
       },
       handleUpdateDataQueue () {
         reactData.upDataFlag++
@@ -6684,7 +6707,7 @@ export default defineComponent({
         ref: refElem,
         class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
           [`size--${vSize}`]: vSize,
-          [`vaild-msg--${validOpts.msgMode}`]: !!editRules,
+          [`valid-msg--${validOpts.msgMode}`]: !!editRules,
           'vxe-editable': !!editConfig,
           'old-cell-valid': editRules && GlobalConfig.cellVaildMode === 'obsolete',
           'cell--highlight': highlightCell,

package/packages/table/src/util.ts

@@ -123,7 +123,7 @@ export interface XEColumnInstance {
   column: ColumnInfo;
 }
 
-export const handleFieldOrColumn = ($xetable: VxeTableConstructor, fieldOrColumn: string | VxeTableDefines.ColumnInfo) => {
+export const handleFieldOrColumn = ($xetable: VxeTableConstructor, fieldOrColumn: string | VxeTableDefines.ColumnInfo | null) => {
   if (fieldOrColumn) {
     return XEUtils.isString(fieldOrColumn) ? $xetable.getColumnByField(fieldOrColumn) : fieldOrColumn
   }

package/styles/base/common.scss

@@ -65,23 +65,23 @@
   .vxe-filter--btn {
     &:before,
     &:after {
-      @include animatTransition(border);
+      @include createAnimationTransition(border);
     }
   }
   .vxe-input--wrapper {
     .vxe-input {
-      @include animatTransition(border);
+      @include createAnimationTransition(border);
     }
   }
   .vxe-table--expand-btn,
   .vxe-tree--node-btn {
-    @include animatTransition(transform);
+    @include createAnimationTransition(transform);
   }
   .vxe-checkbox,
   .vxe-radio {
     > input {
       &:checked+span {
-        @include animatTransition(background-color);
+        @include createAnimationTransition(background-color);
       }
     }
   }

package/styles/button.scss

@@ -66,7 +66,7 @@ $btnThemeList: (
   white-space: nowrap;
   user-select: none;
   appearance: none;
-  @include animatTransition(border, .2s);
+  @include createAnimationTransition(border, .2s);
   &:not(.is--disabled) {
     color: var(--vxe-font-color);
     cursor: pointer;
@@ -236,8 +236,8 @@ $btnThemeList: (
 }
 .vxe-input,
 .vxe-button,
-.vxe-button-warpper {
-  &+.vxe-button-warpper,
+.vxe-button-wrapper {
+  &+.vxe-button-wrapper,
   &+.vxe-button.type--button,
   &+.vxe-button--dropdown {
     margin-left: 12px;
@@ -256,7 +256,7 @@ $btnThemeList: (
 }
 .vxe-button--dropdown {
   position: relative;
-  &+.vxe-button-warpper,
+  &+.vxe-button-wrapper,
   &+.vxe-button.type--button,
   &+.vxe-button--dropdown {
     margin-left: 12px;
@@ -306,7 +306,7 @@ $btnThemeList: (
   display: inline-block;
   font-size: 12px;
   margin-left: 4px;
-  @include animatTransition(transform, .2s);
+  @include createAnimationTransition(transform, .2s);
 }
 
 .vxe-button--dropdown-panel {