vxe-table 4.4.6 → 4.5.0-beta.2

package/packages/table/src/body.ts

@@ -124,7 +124,7 @@ export default defineComponent({
      */
     const renderColumn = (seq: number | string, rowid: string, fixedType: any, rowLevel: number, row: any, rowIndex: number, $rowIndex: number, _rowIndex: number, column: any, $columnIndex: number, columns: any, items: any[]) => {
       const { columnKey, showOverflow: allColumnOverflow, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig } = tableProps
-      const { tableData, overflowX, scrollYLoad, currentColumn, mergeList, editStore, validStore, isAllOverflow } = tableReactData
+      const { tableData, overflowX, scrollYLoad, currentColumn, mergeList, editStore, isAllOverflow, validErrorMaps } = tableReactData
       const { afterFullData } = tableInternalData
       const validOpts = computeValidOpts.value
       const checkboxOpts = computeCheckboxOpts.value
@@ -154,7 +154,7 @@ export default defineComponent({
       let isDirty
       const tdOns: any = {}
       const cellAlign = align || allAlign
-      const hasValidError = validStore.row === row && validStore.column === column
+      const errorValidItem = validErrorMaps[`${rowid}:${column.id}`]
       const showValidTip = editRules && validOpts.showMessage
       const attrs: any = { colid: column.id }
       const params: VxeTableDefines.CellRenderBodyParams = { $table: $xetable, $grid: $xetable.xegrid, seq, rowid, row, rowIndex, $rowIndex, _rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, level: rowLevel, visibleData: afterFullData, data: tableData, items }
@@ -271,17 +271,17 @@ export default defineComponent({
             title: showTitle ? $xetable.getCellLabel(row, column) : null
           }, column.renderCell(params))
         )
-        if (showValidTip && hasValidError) {
+        if (showValidTip && errorValidItem) {
           tdVNs.push(
             h('div', {
               class: 'vxe-cell--valid',
-              style: validStore.rule && validStore.rule.maxWidth ? {
-                width: `${validStore.rule.maxWidth}px`
+              style: errorValidItem.rule && errorValidItem.rule.maxWidth ? {
+                width: `${errorValidItem.rule.maxWidth}px`
               } : null
             }, [
               h('span', {
                 class: 'vxe-cell--valid-msg'
-              }, validStore.content)
+              }, errorValidItem.content)
             ])
           )
         }
@@ -301,7 +301,7 @@ export default defineComponent({
             'fixed--hidden': fixedHiddenColumn,
             'col--dirty': isDirty,
             'col--actived': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
-            'col--valid-error': hasValidError,
+            'col--valid-error': !!errorValidItem,
             'col--current': currentColumn === column
           },
           getPropClass(compCellClassName, params),

package/packages/table/src/columnInfo.ts

@@ -10,7 +10,7 @@ import { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/all'
 export class ColumnInfo {
   title?: string
   type?: string
-  property?: string
+  field?: string
 
   /* eslint-disable @typescript-eslint/no-use-before-define */
   constructor ($xetable: VxeTableConstructor & VxeTablePrivateMethods, _vm: any, { renderHeader, renderCell, renderFooter, renderData }: any = {}) {
@@ -109,11 +109,18 @@ export class ColumnInfo {
       checked: false,
       halfChecked: false,
       disabled: false,
+      // 分组层级
       level: 1,
+      // 跨行
       rowSpan: 1,
+      // 跨列
       colSpan: 1,
+      // 数据排序-自定义排序
       order: null,
+      // 数据排序-用于多列的先后顺序
       sortTime: 0,
+      // 列排序
+      customOrder: 0,
       renderWidth: 0,
       renderHeight: 0,
       resizeWidth: 0,

package/packages/table/src/table.ts

@@ -15,7 +15,7 @@ import TableFooterComponent from '../../footer'
 import tableProps from './props'
 import tableEmits from './emits'
 import VxeLoading from '../../loading/index'
-import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, restoreScrollListener, XEBodyScrollElement } from './util'
+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, VxeMenuPanelInstance, VxeTableDefines, VxeTableProps, VxeColumnPropTypes, VxeTableDataRow } from '../../../types/all'
@@ -184,13 +184,9 @@ export default defineComponent({
       },
       // 存放数据校验相关信息
       validStore: {
-        visible: false,
-        row: null,
-        column: null,
-        content: '',
-        rule: null,
-        isArrow: false
+        visible: false
       },
+      validErrorMaps: {},
       // 导入相关信息
       importStore: {
         inited: false,
@@ -295,6 +291,7 @@ export default defineComponent({
       // 总的缓存数据集
       fullAllDataRowIdData: {},
       // 渲染中缓存数据
+      sourceDataRowIdData: {},
       fullDataRowIdData: {},
       fullColumnIdData: {},
       fullColumnFieldData: {},
@@ -504,6 +501,27 @@ export default defineComponent({
       return Object.assign({}, GlobalConfig.table.customConfig, props.customConfig)
     })
 
+    const computeFixedColumnSize = computed(() => {
+      const { tableFullColumn } = internalData
+      let fixedSize = 0
+      tableFullColumn.forEach((column) => {
+        if (column.fixed) {
+          fixedSize++
+        }
+      })
+      return fixedSize
+    })
+
+    const computeIsMaxFixedColumn = computed(() => {
+      const fixedColumnSize = computeFixedColumnSize.value
+      const columnOpts = computeColumnOpts.value
+      const { maxFixedSize } = columnOpts
+      if (maxFixedSize) {
+        return fixedColumnSize >= maxFixedSize
+      }
+      return false
+    })
+
     const computeTableBorder = computed(() => {
       const { border } = props
       if (border === true) {
@@ -590,6 +608,8 @@ export default defineComponent({
       computeEmptyOpts,
       computeLoadingOpts,
       computeCustomOpts,
+      computeFixedColumnSize,
+      computeIsMaxFixedColumn,
       computeIsAllCheckboxDisabled
     }
 
@@ -847,6 +867,7 @@ export default defineComponent({
             resizeWidth?: number
             visible?: boolean
             fixed?: string
+            order?: number
           }
         } = {}
         if (!id) {
@@ -857,8 +878,8 @@ export default defineComponent({
         if (isCustomResizable) {
           const columnWidthStorage = getCustomStorageMap(resizableStorageKey)[id]
           if (columnWidthStorage) {
-            XEUtils.each(columnWidthStorage, (resizeWidth: number, field) => {
-              customMap[field] = { field, resizeWidth }
+            XEUtils.each(columnWidthStorage, (resizeWidth: number, colKey) => {
+              customMap[colKey] = { resizeWidth }
             })
           }
         }
@@ -868,11 +889,11 @@ export default defineComponent({
           if (columnFixedStorage) {
             const colFixeds = columnFixedStorage.split(',')
             colFixeds.forEach((fixConf: any) => {
-              const [field, fixed] = fixConf.split('|')
-              if (customMap[field]) {
-                customMap[field].fixed = fixed
+              const [colKey, fixed] = fixConf.split('|')
+              if (customMap[colKey]) {
+                customMap[colKey].fixed = fixed
               } else {
-                customMap[field] = { field, fixed }
+                customMap[colKey] = { fixed }
               }
             })
           }
@@ -881,7 +902,15 @@ 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 }
+            //   }
+            // })
           }
         }
         // 自定义隐藏列
@@ -891,18 +920,18 @@ export default defineComponent({
             const colVisibles = columnVisibleStorage.split('|')
             const colHides: string[] = colVisibles[0] ? colVisibles[0].split(',') : []
             const colShows: string[] = colVisibles[1] ? colVisibles[1].split(',') : []
-            colHides.forEach((field) => {
-              if (customMap[field]) {
-                customMap[field].visible = false
+            colHides.forEach((colKey) => {
+              if (customMap[colKey]) {
+                customMap[colKey].visible = false
               } else {
-                customMap[field] = { field, visible: false }
+                customMap[colKey] = { visible: false }
               }
             })
-            colShows.forEach((field) => {
-              if (customMap[field]) {
-                customMap[field].visible = true
+            colShows.forEach((colKey) => {
+              if (customMap[colKey]) {
+                customMap[colKey].visible = true
               } else {
-                customMap[field] = { field, visible: true }
+                customMap[colKey] = { visible: true }
               }
             })
           }
@@ -916,8 +945,8 @@ export default defineComponent({
             keyMap[colKey] = column
           }
         })
-        XEUtils.each(customMap, ({ visible, resizeWidth, fixed }, field) => {
-          const column = keyMap[field]
+        XEUtils.each(customMap, ({ visible, resizeWidth, fixed, order }, colKey) => {
+          const column = keyMap[colKey]
           if (column) {
             if (XEUtils.isNumber(resizeWidth)) {
               column.resizeWidth = resizeWidth
@@ -928,6 +957,9 @@ export default defineComponent({
             if (fixed) {
               column.fixed = fixed
             }
+            if (order) {
+              column.customOrder = order
+            }
           }
         })
       }
@@ -2161,7 +2193,7 @@ export default defineComponent({
       internalData.tableSynchData = datas
       // 克隆原数据，用于显示编辑状态，与编辑值做对比
       if (keepSource) {
-        internalData.tableSourceData = XEUtils.clone(fullData, true)
+        tablePrivateMethods.cacheSourceMap(fullData)
       }
       if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
         if (sYLoad) {
@@ -2912,33 +2944,22 @@ export default defineComponent({
        * @param {String} field 字段名
        */
       isUpdateByRow (row, field) {
-        const { keepSource, treeConfig } = props
-        const { visibleColumn, tableSourceData, fullDataRowIdData } = internalData
-        const treeOpts = computeTreeOpts.value
+        const { keepSource } = props
+        const { tableFullColumn, fullDataRowIdData, sourceDataRowIdData } = internalData
         if (keepSource) {
-          let oRow, property
           const rowid = getRowid($xetable, row)
           // 新增的数据不需要检测
           if (!fullDataRowIdData[rowid]) {
             return false
           }
-          if (treeConfig) {
-            const children = treeOpts.children
-            const matchObj = XEUtils.findTree(tableSourceData, item => rowid === getRowid($xetable, item), treeOpts)
-            row = Object.assign({}, row, { [children]: null })
-            if (matchObj) {
-              oRow = Object.assign({}, matchObj.item, { [children]: null })
-            }
-          } else {
-            const oRowIndex = fullDataRowIdData[rowid].index
-            oRow = tableSourceData[oRowIndex]
-          }
-          if (oRow) {
+          const oldRest = sourceDataRowIdData[rowid]
+          if (oldRest) {
+            const oRow = oldRest.row
             if (arguments.length > 1) {
               return !eqCellValue(oRow, row, field as string)
             }
-            for (let index = 0, len = visibleColumn.length; index < len; index++) {
-              property = visibleColumn[index].field
+            for (let index = 0, len = tableFullColumn.length; index < len; index++) {
+              const property = tableFullColumn[index].field
               if (property && !eqCellValue(oRow, row, property)) {
                 return true
               }
@@ -3073,8 +3094,20 @@ export default defineComponent({
        */
       setColumnFixed (fieldOrColumn, fixed) {
         const column = handleFieldOrColumn($xetable, fieldOrColumn)
-        if (column && column.fixed !== fixed) {
-          XEUtils.eachTree([column], (column) => {
+        const targetColumn = getRootColumn($xetable, column as any)
+        const isMaxFixedColumn = computeIsMaxFixedColumn.value
+        if (targetColumn && targetColumn.fixed !== fixed) {
+          // 是否超过最大固定列数量
+          if (!targetColumn.fixed && isMaxFixedColumn) {
+            if (VXETable.modal) {
+              VXETable.modal.message({
+                status: 'error',
+                content: GlobalConfig.i18n('vxe.table.maxFixedCol')
+              })
+            }
+            return nextTick()
+          }
+          XEUtils.eachTree([targetColumn], (column) => {
             column.fixed = fixed
           })
           tablePrivateMethods.saveCustomFixed()
@@ -3087,8 +3120,9 @@ export default defineComponent({
        */
       clearColumnFixed (fieldOrColumn) {
         const column = handleFieldOrColumn($xetable, fieldOrColumn)
-        if (column && column.fixed) {
-          XEUtils.eachTree([column], (column) => {
+        const targetColumn = getRootColumn($xetable, column as any)
+        if (targetColumn && targetColumn.fixed) {
+          XEUtils.eachTree([targetColumn], (column) => {
             column.fixed = null
           })
           tablePrivateMethods.saveCustomFixed()
@@ -3146,7 +3180,7 @@ export default defineComponent({
        * 如果已关联工具栏，则会同步更新
        */
       resetColumn (options) {
-        const { tableFullColumn } = internalData
+        const { collectColumn } = internalData
         const customOpts = computeCustomOpts.value
         const { checkMethod } = customOpts
         const opts = Object.assign({
@@ -3154,7 +3188,7 @@ export default defineComponent({
           resizable: options === true,
           fixed: options === true
         }, options)
-        tableFullColumn.forEach((column) => {
+        XEUtils.eachTree(collectColumn, (column) => {
           if (opts.resizable) {
             column.resizeWidth = 0
           }
@@ -4071,7 +4105,7 @@ export default defineComponent({
                       if (customVal && validStore.visible) {
                         setCellValue(row, column, cellValue)
                       }
-                      $xetable.clearValidate()
+                      $xetable.clearValidate(row, column)
                     })
                     .catch(({ rule }) => {
                       if (customVal) {
@@ -4803,7 +4837,7 @@ export default defineComponent({
         let { fullDataRowIdData, fullAllDataRowIdData, tableFullData, tableFullTreeData } = internalData
         const rowkey = getRowkey($xetable)
         const isLazy = treeConfig && treeOpts.lazy
-        const handleCache = (row: any, index: any, items: any, path?: any[], parent?: any, nodes?: any[]) => {
+        const handleRow = (row: any, index: any, items: any, path?: any[], parent?: any, nodes?: any[]) => {
           let rowid = getRowid($xetable, row)
           const seq = treeConfig && path ? toTreePathSeq(path) : index + 1
           const level = nodes ? nodes.length - 1 : 0
@@ -4825,10 +4859,36 @@ export default defineComponent({
         }
         fullAllDataRowIdData = internalData.fullAllDataRowIdData = {}
         if (treeConfig) {
-          XEUtils.eachTree(tableFullTreeData, handleCache, treeOpts)
+          XEUtils.eachTree(tableFullTreeData, handleRow, treeOpts)
+        } else {
+          tableFullData.forEach(handleRow)
+        }
+      },
+      cacheSourceMap (fullData) {
+        const { treeConfig } = props
+        const treeOpts = computeTreeOpts.value
+        let { sourceDataRowIdData } = internalData
+        const sourceData = XEUtils.clone(fullData, true)
+        const rowkey = getRowkey($xetable)
+        sourceDataRowIdData = internalData.sourceDataRowIdData = {}
+        const handleSourceRow = (row: any) => {
+          let rowid = getRowid($xetable, row)
+          if (eqEmptyValue(rowid)) {
+            rowid = getRowUniqueId()
+            XEUtils.set(row, rowkey, rowid)
+          }
+          sourceDataRowIdData[rowid] = {
+            row,
+            rowid
+          }
+        }
+        // 源数据缓存
+        if (treeConfig && !treeOpts.transform) {
+          XEUtils.eachTree(sourceData, handleSourceRow, treeOpts)
         } else {
-          tableFullData.forEach(handleCache)
+          sourceData.forEach(handleSourceRow)
         }
+        internalData.tableSourceData = sourceData
       },
       /**
        * 指定列宽的列进行拆分

package/packages/table/src/util.ts

@@ -248,6 +248,23 @@ export function destroyColumn ($xetable: VxeTableConstructor & VxeTablePrivateMe
   reactData.staticColumns = staticColumns.slice(0)
 }
 
+export function getRootColumn ($xetable: VxeTableConstructor & VxeTablePrivateMethods, column: ColumnInfo) {
+  const { internalData } = $xetable
+  const { fullColumnIdData } = internalData
+  if (!column) {
+    return null
+  }
+  let parentColId = column.parentId
+  while (fullColumnIdData[parentColId]) {
+    const column = fullColumnIdData[parentColId].column
+    parentColId = column.parentId
+    if (!parentColId) {
+      return column
+    }
+  }
+  return column
+}
+
 export function mergeBodyMethod (mergeList: VxeTableDefines.MergeItem[], _rowIndex: number, _columnIndex: number) {
   for (let mIndex = 0; mIndex < mergeList.length; mIndex++) {
     const { row: mergeRowIndex, col: mergeColIndex, rowspan: mergeRowspan, colspan: mergeColspan } = mergeList[mIndex]

package/packages/toolbar/src/toolbar.ts

@@ -9,7 +9,7 @@ import { warnLog, errLog } from '../../tools/log'
 import { GlobalEvent } from '../../tools/event'
 import { getSlotVNs } from '../../tools/vn'
 
-import { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, VxeTableConstructor, ToolbarPrivateRef, VxeTableMethods, VxeTablePrivateMethods, ToolbarReactData, VxeTableDefines } from '../../../types/all'
+import { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, VxeTableConstructor, ToolbarPrivateRef, VxeTableMethods, VxeTablePrivateMethods, ToolbarReactData, VxeTableDefines, VxeColumnPropTypes } from '../../../types/all'
 
 export default defineComponent({
   name: 'VxeToolbar',
@@ -176,7 +176,7 @@ export default defineComponent({
       }
     }
 
-    const changeCustomOption = (column: VxeTableDefines.ColumnInfo) => {
+    const changeCheckboxOption = (column: VxeTableDefines.ColumnInfo) => {
       const isChecked = !column.visible
       const customOpts = computeCustomOpts.value
       XEUtils.eachTree([column], (item) => {
@@ -190,6 +190,18 @@ export default defineComponent({
       checkCustomStatus()
     }
 
+    const changeFixedOption = (column: VxeTableDefines.ColumnInfo, colFixed: VxeColumnPropTypes.Fixed) => {
+      const { computeIsMaxFixedColumn } = $xetable.getComputeMaps()
+      const isMaxFixedColumn = computeIsMaxFixedColumn.value
+      if (column.fixed === colFixed) {
+        $xetable.clearColumnFixed(column)
+      } else {
+        if (!isMaxFixedColumn || column.fixed) {
+          $xetable.setColumnFixed(column, colFixed)
+        }
+      }
+    }
+
     const allCustomEvent = () => {
       const { columns } = reactData
       const { computeCustomOpts: computeTableCustomOpts } = $xetable.getComputeMaps()
@@ -458,6 +470,7 @@ export default defineComponent({
     const renderCustoms = () => {
       const { columns } = reactData
       const customOpts = computeCustomOpts.value
+      let isMaxFixedColumn = true
       const colVNs: VNode[] = []
       const customBtnOns: {
         onClick?: typeof handleClickSettingEvent;
@@ -470,9 +483,10 @@ export default defineComponent({
       } = {}
       let checkMethod: ((params: { column: VxeTableDefines.ColumnInfo }) => boolean) | undefined
       if ($xetable) {
-        const { computeCustomOpts: computeTableCustomOpts } = $xetable.getComputeMaps()
+        const { computeCustomOpts: computeTableCustomOpts, computeIsMaxFixedColumn } = $xetable.getComputeMaps()
         const tableCustomOpts = computeTableCustomOpts.value
         checkMethod = tableCustomOpts.checkMethod
+        isMaxFixedColumn = computeIsMaxFixedColumn.value
       }
       if (customOpts.trigger === 'manual') {
         // 手动触发
@@ -486,7 +500,7 @@ export default defineComponent({
         // 点击触发
         customBtnOns.onClick = handleClickSettingEvent
       }
-      XEUtils.eachTree(columns, (column) => {
+      XEUtils.eachTree(columns, (column, index, items, path, parent) => {
         const colTitle = formatText(column.getTitle(), 1)
         const colKey = column.getKey()
         const isColGroup = column.children && column.children.length
@@ -497,24 +511,53 @@ export default defineComponent({
           colVNs.push(
             h('li', {
               class: ['vxe-custom--option', `level--${column.level}`, {
-                'is--group': isColGroup,
-                'is--checked': isChecked,
-                'is--indeterminate': isIndeterminate,
-                'is--disabled': isDisabled
-              }],
-              title: colTitle,
-              onClick: () => {
-                if (!isDisabled) {
-                  changeCustomOption(column)
-                }
-              }
+                'is--group': isColGroup
+              }]
             }, [
-              h('span', {
-                class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
-              }),
-              h('span', {
-                class: 'vxe-checkbox--label'
-              }, colTitle)
+              h('div', {
+                title: colTitle,
+                class: ['vxe-custom--checkbox-option', {
+                  'is--checked': isChecked,
+                  'is--indeterminate': isIndeterminate,
+                  'is--disabled': isDisabled
+                }],
+                onClick: () => {
+                  if (!isDisabled) {
+                    changeCheckboxOption(column)
+                  }
+                }
+              }, [
+                h('span', {
+                  class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
+                }),
+                h('span', {
+                  class: 'vxe-checkbox--label'
+                }, colTitle)
+              ]),
+              !parent && customOpts.allowFixed ? h('div', {
+                class: 'vxe-custom--fixed-option'
+              }, [
+                h('span', {
+                  class: ['vxe-custom--fixed-left-option', column.fixed === 'left' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT_ACTIVED : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_LEFT, {
+                    'is--checked': column.fixed === 'left',
+                    'is--disabled': isMaxFixedColumn && !column.fixed
+                  }],
+                  title: GlobalConfig.i18n(column.fixed === 'left' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedLeft'),
+                  onClick: () => {
+                    changeFixedOption(column, 'left')
+                  }
+                }),
+                h('span', {
+                  class: ['vxe-custom--fixed-right-option', column.fixed === 'right' ? GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVED : GlobalConfig.icon.TOOLBAR_TOOLS_FIXED_RIGHT, {
+                    'is--checked': column.fixed === 'right',
+                    'is--disabled': isMaxFixedColumn && !column.fixed
+                  }],
+                  title: GlobalConfig.i18n(column.fixed === 'right' ? 'vxe.toolbar.cancelfixed' : 'vxe.toolbar.fixedRight'),
+                  onClick: () => {
+                    changeFixedOption(column, 'right')
+                  }
+                })
+              ]) : null
             ])
           )
         }
@@ -540,37 +583,41 @@ export default defineComponent({
             class: 'vxe-custom--header'
           }, [
             h('li', {
-              class: ['vxe-custom--option', {
-                'is--checked': isAllChecked,
-                'is--indeterminate': isAllIndeterminate
-              }],
-              title: GlobalConfig.i18n('vxe.table.allTitle'),
-              onClick: allCustomEvent
+              class: 'vxe-custom--option'
             }, [
-              h('span', {
-                class: ['vxe-checkbox--icon', isAllIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
-              }),
-              h('span', {
-                class: 'vxe-checkbox--label'
-              }, GlobalConfig.i18n('vxe.toolbar.customAll'))
+              h('div', {
+                class: ['vxe-custom--checkbox-option', {
+                  'is--checked': isAllChecked,
+                  'is--indeterminate': isAllIndeterminate
+                }],
+                title: GlobalConfig.i18n('vxe.table.allTitle'),
+                onClick: allCustomEvent
+              }, [
+                h('span', {
+                  class: ['vxe-checkbox--icon', isAllIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
+                }),
+                h('span', {
+                  class: 'vxe-checkbox--label'
+                }, GlobalConfig.i18n('vxe.toolbar.customAll'))
+              ])
             ])
           ]),
           h('ul', {
             class: 'vxe-custom--body',
             ...customWrapperOns
           }, colVNs),
-          customOpts.isFooter === false ? null : h('div', {
+          customOpts.showFooter || customOpts.isFooter ? h('div', {
             class: 'vxe-custom--footer'
           }, [
-            h('button', {
-              class: 'btn--confirm',
-              onClick: confirmCustomEvent
-            }, GlobalConfig.i18n('vxe.toolbar.customConfirm')),
             h('button', {
               class: 'btn--reset',
               onClick: resetCustomEvent
-            }, GlobalConfig.i18n('vxe.toolbar.customRestore'))
-          ])
+            }, customOpts.resetButtonText || GlobalConfig.i18n('vxe.toolbar.customRestore')),
+            h('button', {
+              class: 'btn--confirm',
+              onClick: confirmCustomEvent
+            }, customOpts.confirmButtonText || GlobalConfig.i18n('vxe.toolbar.customConfirm'))
+          ]) : null
         ])
       ])
     }

package/packages/v-x-e-table/src/conf.ts

@@ -50,6 +50,9 @@ const GlobalConfig: VXETableGlobalConfig = {
       showMessage: true,
       message: 'default'
     },
+    columnConfig: {
+      maxFixedSize: 4
+    },
     // menuConfig: {
     //   visibleMethod () {}
     // },
@@ -196,6 +199,10 @@ const GlobalConfig: VXETableGlobalConfig = {
     TOOLBAR_TOOLS_FULLSCREEN: iconPrefix + 'fullscreen',
     TOOLBAR_TOOLS_MINIMIZE: iconPrefix + 'minimize',
     TOOLBAR_TOOLS_CUSTOM: iconPrefix + 'custom-column',
+    TOOLBAR_TOOLS_FIXED_LEFT: iconPrefix + 'fixed-left',
+    TOOLBAR_TOOLS_FIXED_LEFT_ACTIVED: iconPrefix + 'fixed-left-fill',
+    TOOLBAR_TOOLS_FIXED_RIGHT: iconPrefix + 'fixed-right',
+    TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVED: iconPrefix + 'fixed-right-fill',
 
     // form
     FORM_PREFIX: iconPrefix + 'question-circle-fill',
@@ -304,9 +311,10 @@ const GlobalConfig: VXETableGlobalConfig = {
     // export: {
     //   types: ['csv', 'html', 'xml', 'txt']
     // },
-    // custom: {
-    //   isFooter: true
-    // },
+    custom: {
+      allowFixed: true,
+      showFooter: true
+    }
     // buttons: []
   },
   button: {