vxe-table 4.12.0-beta.8 → 4.12.0

package/packages/table/src/cell.ts

@@ -228,15 +228,27 @@ function getFooterContent (params: VxeTableDefines.CellRenderFooterParams & { $t
   })
   if (footerFormatter) {
     if (XEUtils.isFunction(footerFormatter)) {
-      return `${footerFormatter(footParams)}`
+      return [
+        h('span', {
+          class: 'vxe-cell--label'
+        }, `${footerFormatter(footParams)}`)
+      ]
     }
     const isArr = XEUtils.isArray(footerFormatter)
     const gFormatOpts = isArr ? formats.get(footerFormatter[0]) : formats.get(footerFormatter)
     const footerFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null
     if (footerFormatMethod) {
-      return `${isArr ? footerFormatMethod(footParams, ...footerFormatter.slice(1)) : footerFormatMethod(footParams)}`
+      return [
+        h('span', {
+          class: 'vxe-cell--label'
+        }, `${isArr ? footerFormatMethod(footParams, ...footerFormatter.slice(1)) : footerFormatMethod(footParams)}`)
+      ]
     }
-    return ''
+    return [
+      h('span', {
+        class: 'vxe-cell--label'
+      }, '')
+    ]
   }
   if (renderOpts) {
     const compConf = renderer.get(renderOpts.name)
@@ -248,7 +260,9 @@ function getFooterContent (params: VxeTableDefines.CellRenderFooterParams & { $t
     }
   }
   return [
-    formatText(itemValue, 1)
+    h('span', {
+      class: 'vxe-cell--label'
+    }, formatText(itemValue, 1))
   ]
 }
 
@@ -415,8 +429,8 @@ export const Cell = {
     const tableReactData = $table.reactData
     const tableInternalData = $table.internalData
     const { computeTreeOpts } = $table.getComputeMaps()
-    const { treeExpandedMaps, treeExpandLazyLoadedMaps } = tableReactData
-    const { fullAllDataRowIdData } = tableInternalData
+    const { treeExpandedFlag } = tableReactData
+    const { fullAllDataRowIdData, treeExpandedMaps, treeExpandLazyLoadedMaps } = tableInternalData
     const treeOpts = computeTreeOpts.value
     const { row, column, level } = params
     const { slots } = column
@@ -436,7 +450,7 @@ export const Cell = {
     }
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isActive = !!treeExpandedMaps[rowid]
+      isActive = !!treeExpandedFlag && !!treeExpandedMaps[rowid]
       if (lazy) {
         const rest = fullAllDataRowIdData[rowid]
         isLazyLoading = !!treeExpandLazyLoadedMaps[rowid]
@@ -598,7 +612,8 @@ export const Cell = {
     const headerSlot = slots ? slots.header : null
     const titleSlot = slots ? slots.title : null
     const checkboxOpts = computeCheckboxOpts.value
-    const headerTitle = column.getTitle()
+    const { checkStrictly, showHeader, headerTitle } = checkboxOpts
+    const colTitle = column.getTitle()
     const ons: Record<string, any> = {}
     if (!isHidden) {
       ons.onClick = (evnt: MouseEvent) => {
@@ -611,11 +626,11 @@ export const Cell = {
     if (headerSlot) {
       return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams)))
     }
-    if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
+    if (checkStrictly ? !showHeader : showHeader === false) {
       return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [
         h('span', {
           class: 'vxe-checkbox--label'
-        }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
+        }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : colTitle)
       ]))
     }
     return renderHeaderCellBaseVNs(params,
@@ -626,17 +641,17 @@ export const Cell = {
             'is--disabled': isAllCheckboxDisabled,
             'is--indeterminate': isAllCheckboxIndeterminate
           }],
-          title: getI18n('vxe.table.allTitle'),
+          title: XEUtils.eqNull(headerTitle) ? getI18n('vxe.table.allTitle') : `${headerTitle || ''}`,
           ...ons
         }, [
           h('span', {
             class: ['vxe-checkbox--icon', isAllCheckboxIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllCheckboxSelected ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
           })
-        ].concat(titleSlot || headerTitle
+        ].concat(titleSlot || colTitle
           ? [
               h('span', {
                 class: 'vxe-checkbox--label'
-              }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
+              }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : colTitle)
             ]
           : []))
       ])
@@ -646,8 +661,10 @@ export const Cell = {
     const { $table, row, column, isHidden } = params
     const tableProps = $table.props
     const tableReactData = $table.reactData
+    const tableInternalData = $table.internalData
     const { treeConfig } = tableProps
-    const { selectCheckboxMaps, treeIndeterminateMaps } = tableReactData
+    const { updateCheckboxFlag } = tableReactData
+    const { selectCheckboxMaps, treeIndeterminateRowMaps } = tableInternalData
     const { computeCheckboxOpts } = $table.getComputeMaps()
     const checkboxOpts = computeCheckboxOpts.value
     const { labelField, checkMethod, visibleMethod } = checkboxOpts
@@ -661,7 +678,7 @@ export const Cell = {
     const ons: Record<string, any> = {}
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isChecked = !!selectCheckboxMaps[rowid]
+      isChecked = !!updateCheckboxFlag && !!selectCheckboxMaps[rowid]
       ons.onClick = (evnt: MouseEvent) => {
         if (!isDisabled && isVisible) {
           $table.triggerCheckRowEvent(evnt, params, !isChecked)
@@ -671,7 +688,7 @@ export const Cell = {
         isDisabled = !checkMethod({ row })
       }
       if (treeConfig) {
-        indeterminate = !!treeIndeterminateMaps[rowid]
+        indeterminate = !!treeIndeterminateRowMaps[rowid]
       }
     }
     const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate }
@@ -712,8 +729,10 @@ export const Cell = {
     const { $table, row, column, isHidden } = params
     const tableProps = $table.props
     const tableReactData = $table.reactData
+    const tableInternalData = $table.internalData
     const { treeConfig } = tableProps
-    const { treeIndeterminateMaps } = tableReactData
+    const { updateCheckboxFlag } = tableReactData
+    const { treeIndeterminateRowMaps } = tableInternalData
     const { computeCheckboxOpts } = $table.getComputeMaps()
     const checkboxOpts = computeCheckboxOpts.value
     const { labelField, checkField, checkMethod, visibleMethod } = checkboxOpts
@@ -728,7 +747,7 @@ export const Cell = {
     const ons: Record<string, any> = {}
     if (!isHidden) {
       const rowid = getRowid($table, row)
-      isChecked = XEUtils.get(row, checkField as string)
+      isChecked = !!updateCheckboxFlag && XEUtils.get(row, checkField)
       ons.onClick = (evnt: MouseEvent) => {
         if (!isDisabled && isVisible) {
           $table.triggerCheckRowEvent(evnt, params, !isChecked)
@@ -738,7 +757,7 @@ export const Cell = {
         isDisabled = !checkMethod({ row })
       }
       if (treeConfig) {
-        isIndeterminate = !!treeIndeterminateMaps[rowid]
+        isIndeterminate = !!treeIndeterminateRowMaps[rowid]
       }
     }
     const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: isIndeterminate }
@@ -781,8 +800,8 @@ export const Cell = {
    */
   renderExpandCell (params: VxeTableDefines.CellRenderBodyParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     const { $table, isHidden, row, column } = params
-    const tableReactData = $table.reactData
-    const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableReactData
+    const tableInternalData = $table.internalData
+    const { rowExpandedMaps, rowExpandLazyLoadedMaps } = tableInternalData
     const { computeExpandOpts } = $table.getComputeMaps()
     const expandOpts = computeExpandOpts.value
     const { lazy, labelField, iconLoaded, showIcon, iconOpen, iconClose, visibleMethod } = expandOpts
@@ -889,7 +908,7 @@ export const Cell = {
     const { $table, column } = params
     const { computeSortOpts } = $table.getComputeMaps()
     const sortOpts = computeSortOpts.value
-    const { showIcon, allowBtn, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts
+    const { showIcon, allowBtn, ascTitle, descTitle, iconLayout, iconAsc, iconDesc, iconVisibleMethod } = sortOpts
     const { order } = column
     if (showIcon && (!iconVisibleMethod || iconVisibleMethod(params))) {
       return [
@@ -900,7 +919,7 @@ export const Cell = {
             class: ['vxe-sort--asc-btn', iconAsc || getIcon().TABLE_SORT_ASC, {
               'sort--active': order === 'asc'
             }],
-            title: getI18n('vxe.table.sortAsc'),
+            title: XEUtils.eqNull(ascTitle) ? getI18n('vxe.table.sortAsc') : `${ascTitle || ''}`,
             onClick: allowBtn
               ? (evnt: Event) => {
                   evnt.stopPropagation()
@@ -912,7 +931,7 @@ export const Cell = {
             class: ['vxe-sort--desc-btn', iconDesc || getIcon().TABLE_SORT_DESC, {
               'sort--active': order === 'desc'
             }],
-            title: getI18n('vxe.table.sortDesc'),
+            title: XEUtils.eqNull(descTitle) ? getI18n('vxe.table.sortDesc') : `${descTitle || ''}`,
             onClick: allowBtn
               ? (evnt: Event) => {
                   evnt.stopPropagation()

package/packages/table/src/columnInfo.ts

@@ -10,10 +10,11 @@ const { getI18n, formats } = VxeUI
 export class ColumnInfo {
   /* eslint-disable @typescript-eslint/no-use-before-define */
   constructor ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, _vm: any, { renderHeader, renderCell, renderFooter, renderData }: any = {}) {
-    const $xeGrid = $xeTable.xegrid
+    const tableProps = $xeTable.props
+    const $xeGrid = $xeTable.xeGrid
+
     const formatter: string | any[] = _vm.formatter
     const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true
-    const { props: tableProps } = $xeTable
 
     const types = ['seq', 'checkbox', 'radio', 'expand', 'html']
     if (_vm.type && types.indexOf(_vm.type) === -1) {

package/packages/table/src/footer.ts

@@ -58,10 +58,12 @@ export default defineComponent({
     const refFooterXSpace = ref() as Ref<HTMLDivElement>
 
     const renderRows = (tableColumn: VxeTableDefines.ColumnInfo[], footerTableData: any[], row: any, $rowIndex: number, _rowIndex: number) => {
+      const $xeGrid = $xeTable.xeGrid
+
       const { fixedType } = props
       const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
       const { scrollXLoad, scrollYLoad, overflowX, currentColumn, mergeFooterList } = tableReactData
-      const { scrollXStore } = tableInternalData
+      const { fullColumnIdData, scrollXStore } = tableInternalData
       const tooltipOpts = computeTooltipOpts.value
       const resizableOpts = computeResizableOpts.value
       const { isAllColumnDrag } = resizableOpts
@@ -74,6 +76,7 @@ export default defineComponent({
       return tableColumn.map((column, $columnIndex) => {
         const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column
         const colid = column.id
+        const colRest = fullColumnIdData[colid] || {}
         const renderOpts = editRender || cellRender
         const compConf = renderOpts ? renderer.get(renderOpts.name) : null
         const showAllTip = tooltipOpts.showAll
@@ -89,14 +92,14 @@ export default defineComponent({
         const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
         const attrs: any = { colid }
         const tfOns: any = {}
-        const columnIndex = $xeTable.getColumnIndex(column)
-        const _columnIndex = $xeTable.getVTColumnIndex(column)
+        const columnIndex = colRest.index
+        const _columnIndex = colRest._index
         const itemIndex = _columnIndex
         const cellParams: VxeTableDefines.CellRenderFooterParams & {
           $table: VxeTableConstructor<any> & VxeTablePrivateMethods
         } = {
           $table: $xeTable,
-          $grid: $xeTable.xegrid,
+          $grid: $xeGrid,
           row,
           rowIndex: _rowIndex,
           _rowIndex,
@@ -272,7 +275,7 @@ export default defineComponent({
       const { fixedType, fixedColumn, tableColumn } = props
       const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps
       const { visibleColumn, fullColumnIdData } = tableInternalData
-      const { isGroup, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
+      const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
 
       let renderColumnList = tableColumn
       let isOptimizeMode = false
@@ -285,7 +288,7 @@ export default defineComponent({
         }
       }
 
-      if (fixedType || !overflowX) {
+      if (!isColLoading && (fixedType || !overflowX)) {
         renderColumnList = visibleColumn
       }
 
@@ -354,7 +357,10 @@ export default defineComponent({
             }, renderColumnList.map((column, $columnIndex) => {
               return h('col', {
                 name: column.id,
-                key: $columnIndex
+                key: $columnIndex,
+                style: {
+                  width: `${column.renderWidth}px`
+                }
               })
             })),
             /**

package/packages/table/src/header.ts

@@ -43,10 +43,12 @@ export default defineComponent({
     }
 
     const renderRows = (isGroup: boolean, isOptimizeMode: boolean, cols: VxeTableDefines.ColumnInfo[], $rowIndex: number) => {
+      const $xeGrid = $xeTable.xeGrid
+
       const { fixedType } = props
       const { resizable: allResizable, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, mouseConfig } = tableProps
       const { currentColumn, dragCol, scrollXLoad, scrollYLoad, overflowX } = tableReactData
-      const { scrollXStore } = tableInternalData
+      const { fullColumnIdData, scrollXStore } = tableInternalData
       const columnOpts = computeColumnOpts.value
       const columnDragOpts = computeColumnDragOpts.value
       const cellOpts = computeCellOpts.value
@@ -57,6 +59,7 @@ export default defineComponent({
       return cols.map((column, $columnIndex) => {
         const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column
         const colid = column.id
+        const colRest = fullColumnIdData[colid] || {}
         const renderOpts = editRender || cellRender
         const compConf = renderOpts ? renderer.get(renderOpts.name) : null
         const isColGroup = column.children && column.children.length
@@ -74,11 +77,11 @@ export default defineComponent({
           firstFilterOption = filters[0]
           hasFilter = filters.some((item) => item.checked)
         }
-        const columnIndex = $xeTable.getColumnIndex(column)
-        const _columnIndex = $xeTable.getVTColumnIndex(column)
+        const columnIndex = colRest.index
+        const _columnIndex = colRest._index
         const cellParams: VxeTableDefines.CellRenderHeaderParams & {
           $table: VxeTableConstructor & VxeTablePrivateMethods
-        } = { $table: $xeTable, $grid: $xeTable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter }
+        } = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, firstFilterOption, fixed: fixedType, type: renderType, isHidden: fixedHiddenColumn, hasFilter }
         const thAttrs: Record<string, string | number | null> = {
           colid,
           colspan: column.colSpan > 1 ? column.colSpan : null,
@@ -223,7 +226,7 @@ export default defineComponent({
     const renderVN = () => {
       const { fixedType, fixedColumn, tableColumn } = props
       const { mouseConfig, showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
-      const { isGroup, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
+      const { isGroup, isColLoading, overflowX, scrollXLoad, scrollYLoad, dragCol } = tableReactData
       const { visibleColumn, fullColumnIdData } = tableInternalData
 
       const mouseOpts = computeMouseOpts.value
@@ -243,7 +246,7 @@ export default defineComponent({
           }
         }
 
-        if (fixedType || !overflowX) {
+        if (!isColLoading && (fixedType || !overflowX)) {
           renderColumnList = visibleColumn
         }
 
@@ -317,7 +320,10 @@ export default defineComponent({
             }, renderColumnList.map((column, $columnIndex) => {
               return h('col', {
                 name: column.id,
-                key: $columnIndex
+                key: $columnIndex,
+                style: {
+                  width: `${column.renderWidth}px`
+                }
               })
             })),
             /**

package/packages/table/src/props.ts

@@ -188,6 +188,8 @@ export default {
   resizeConfig: Object as PropType<VxeTablePropTypes.ResizeConfig>,
   // 列配置信息
   columnConfig: Object as PropType<VxeTablePropTypes.ColumnConfig>,
+  // 当前列配置信息
+  currentColumnConfig: Object as PropType<VxeTablePropTypes.CurrentColumnConfig>,
   // 单元格配置信息
   cellConfig: Object as PropType<VxeTablePropTypes.CellConfig>,
   // 表头单元格配置信息
@@ -196,6 +198,8 @@ export default {
   footerCellConfig: Object as PropType<VxeTablePropTypes.FooterCellConfig>,
   // 行配置信息
   rowConfig: Object as PropType<VxeTablePropTypes.RowConfig>,
+  // 当前行配置信息
+  currentRowConfig: Object as PropType<VxeTablePropTypes.CurrentRowConfig>,
   // 已废弃，被 rowDragConfig 替换
   dragConfig: Object as PropType<VxeTablePropTypes.DragConfig>,
   // 行拖拽排序配置项