vxe-table 4.7.47 → 4.7.49

package/packages/table/render/index.ts

@@ -464,6 +464,18 @@ function defaultSelectEditRender (renderOpts: any, params: any) {
   ]
 }
 
+function defaultTreeSelectEditRender (renderOpts: any, params: any) {
+  const { row, column } = params
+  const { options, optionProps } = renderOpts
+  const cellValue = getCellValue(row, column)
+  return [
+    h(getDefaultComponent(renderOpts), {
+      ...getCellEditProps(renderOpts, params, cellValue, { options, optionProps }),
+      ...getEditOns(renderOpts, params)
+    })
+  ]
+}
+
 /**
  * 已废弃
  * @deprecated
@@ -481,13 +493,13 @@ function oldSelectEditRender (renderOpts: any, params: any) {
 }
 
 function getSelectCellValue (renderOpts: any, { row, column }: any) {
-  const { props = {}, options, optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts
+  const { options, optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts
   const cellValue = XEUtils.get(row, column.property)
   let selectItem: any
   const labelProp = optionProps.label || 'label'
   const valueProp = optionProps.value || 'value'
   if (!isEmptyValue(cellValue)) {
-    return XEUtils.map(props.multiple ? cellValue : [cellValue],
+    return XEUtils.map(XEUtils.isArray(cellValue) ? cellValue : [cellValue],
       optionGroups
         ? (value) => {
             const groupOptions = optionGroupProps.options || 'options'
@@ -515,6 +527,31 @@ function handleExportSelectMethod (params: any) {
   return options.original ? getCellValue(row, column) : getSelectCellValue(column.editRender || column.cellRender, params)
 }
 
+function getTreeSelectCellValue (renderOpts: any, { row, column }: any) {
+  const { options, optionProps = {} } = renderOpts
+  const cellValue = XEUtils.get(row, column.property)
+  const labelProp = optionProps.label || 'label'
+  const valueProp = optionProps.value || 'value'
+  const childrenProp = optionProps.children || 'children'
+  if (!isEmptyValue(cellValue)) {
+    const keyMaps: Record<string, any> = {}
+    XEUtils.eachTree(options, item => {
+      keyMaps[XEUtils.get(item, valueProp)] = item
+    }, { children: childrenProp })
+    return XEUtils.map(XEUtils.isArray(cellValue) ? cellValue : [cellValue], (value) => {
+      const item = keyMaps[value]
+      return item ? XEUtils.get(item, labelProp) : item
+    }
+    ).join(', ')
+  }
+  return ''
+}
+
+function handleExportTreeSelectMethod (params: any) {
+  const { row, column, options } = params
+  return options.original ? getCellValue(row, column) : getTreeSelectCellValue(column.editRender || column.cellRender, params)
+}
+
 /**
  * 表格 - 渲染器
  */
@@ -664,6 +701,14 @@ renderer.mixin({
     defaultFilterMethod: handleFilterMethod,
     exportMethod: handleExportSelectMethod
   },
+  VxeTreeSelect: {
+    autofocus: '.vxe-input--inner',
+    renderEdit: defaultTreeSelectEditRender,
+    renderCell (renderOpts, params) {
+      return getCellLabelVNs(renderOpts, params, getTreeSelectCellValue(renderOpts, params))
+    },
+    exportMethod: handleExportTreeSelectMethod
+  },
   VxeRadioGroup: {
     renderDefault: radioAndCheckboxEditRender
   },

package/packages/table/src/cell.ts

@@ -252,9 +252,10 @@ export const Cell = {
    */
   renderTreeIcon (params: VxeTableDefines.CellRenderBodyParams, cellVNodes: VxeComponentSlotType[]) {
     const { $table, isHidden } = params
-    const { reactData } = $table
+    const { reactData, internalData } = $table
     const { computeTreeOpts } = $table.getComputeMaps()
     const { treeExpandedMaps, treeExpandLazyLoadedMaps } = reactData
+    const { fullAllDataRowIdData } = internalData
     const treeOpts = computeTreeOpts.value
     const { row, column, level } = params
     const { slots } = column
@@ -262,9 +263,11 @@ export const Cell = {
     const childrenField = treeOpts.children || treeOpts.childrenField
     const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
     const rowChilds = row[childrenField]
+    const hasChild = rowChilds && rowChilds.length
     const iconSlot = slots ? slots.icon : null
     let hasLazyChilds = false
     let isAceived = false
+    let isLazyLoading = false
     let isLazyLoaded = false
     const ons: any = {}
     if (iconSlot) {
@@ -274,8 +277,10 @@ export const Cell = {
       const rowid = getRowid($table, row)
       isAceived = !!treeExpandedMaps[rowid]
       if (lazy) {
-        isLazyLoaded = !!treeExpandLazyLoadedMaps[rowid]
+        const rest = fullAllDataRowIdData[rowid]
+        isLazyLoading = !!treeExpandLazyLoadedMaps[rowid]
         hasLazyChilds = row[hasChildField]
+        isLazyLoaded = !!rest.treeLoaded
       }
     }
     if (!trigger || trigger === 'default') {
@@ -292,14 +297,14 @@ export const Cell = {
           paddingLeft: `${level * indent}px`
         }
       }, [
-        showIcon && ((rowChilds && rowChilds.length) || hasLazyChilds)
+        showIcon && (lazy ? (isLazyLoaded ? hasChild : hasLazyChilds) : hasChild)
           ? [
               h('div', {
                 class: 'vxe-tree--btn-wrapper',
                 ...ons
               }, [
                 h('i', {
-                  class: ['vxe-tree--node-btn', isLazyLoaded ? (iconLoaded || getIcon().TABLE_TREE_LOADED) : (isAceived ? (iconOpen || getIcon().TABLE_TREE_OPEN) : (iconClose || getIcon().TABLE_TREE_CLOSE))]
+                  class: ['vxe-tree--node-btn', isLazyLoading ? (iconLoaded || getIcon().TABLE_TREE_LOADED) : (isAceived ? (iconOpen || getIcon().TABLE_TREE_OPEN) : (iconClose || getIcon().TABLE_TREE_CLOSE))]
                 })
               ])
             ]
@@ -622,7 +627,7 @@ export const Cell = {
     const defaultSlot = slots ? slots.default : null
     const iconSlot = slots ? slots.icon : null
     let isAceived = false
-    let isLazyLoaded = false
+    let isLazyLoading = false
     if (iconSlot) {
       return $table.callSlot(iconSlot, params)
     }
@@ -630,7 +635,7 @@ export const Cell = {
       const rowid = getRowid($table, row)
       isAceived = !!rowExpandedMaps[rowid]
       if (lazy) {
-        isLazyLoaded = !!rowExpandLazyLoadedMaps[rowid]
+        isLazyLoading = !!rowExpandLazyLoadedMaps[rowid]
       }
     }
     return [
@@ -644,7 +649,7 @@ export const Cell = {
           }
         }, [
           h('i', {
-            class: ['vxe-table--expand-btn', isLazyLoaded ? (iconLoaded || getIcon().TABLE_EXPAND_LOADED) : (isAceived ? (iconOpen || getIcon().TABLE_EXPAND_OPEN) : (iconClose || getIcon().TABLE_EXPAND_CLOSE))]
+            class: ['vxe-table--expand-btn', isLazyLoading ? (iconLoaded || getIcon().TABLE_EXPAND_LOADED) : (isAceived ? (iconOpen || getIcon().TABLE_EXPAND_OPEN) : (iconClose || getIcon().TABLE_EXPAND_CLOSE))]
           })
         ])
         : null,

package/packages/table/src/columnInfo.ts

@@ -128,6 +128,7 @@ export class ColumnInfo {
       renderWidth: 0,
       renderHeight: 0,
       renderResizeWidth: 0,
+      renderAutoWidth: 0,
       resizeWidth: 0, // 手动调整
 
       renderLeft: 0,

package/packages/table/src/table.ts

@@ -43,6 +43,7 @@ export default defineComponent({
     const { computeSize } = useFns.useSize(props)
 
     const reactData = reactive<TableReactData>({
+      isCalcColumn: false,
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -155,7 +156,8 @@ export default defineComponent({
         pxMinList: [],
         scaleList: [],
         scaleMinList: [],
-        autoList: []
+        autoList: [],
+        remainList: []
       },
       // 存放快捷菜单的信息
       ctxMenuStore: {
@@ -537,6 +539,11 @@ export default defineComponent({
       return Object.assign({}, getConfig().table.customConfig, props.customConfig)
     })
 
+    const computeAutoWidthColumnList = computed(() => {
+      const { visibleColumn } = internalData
+      return visibleColumn.filter(column => column.width === 'auto')
+    })
+
     const computeFixedColumnSize = computed(() => {
       const { collectColumn } = internalData
       let fixedSize = 0
@@ -883,7 +890,7 @@ export default defineComponent({
       const val = props[key]
       let num = 0
       if (val) {
-        if (val === 'auto') {
+        if (val === 'fill' || val === 'auto') {
           num = parentHeight
         } else {
           const excludeHeight = $xeTable.getExcludeHeight()
@@ -1084,6 +1091,40 @@ export default defineComponent({
       internalData.customMaxHeight = calcHeight('maxHeight')
     }
 
+    const calcCellWidth = () => {
+      const { tableData } = reactData
+      const autoWidthColumnList = computeAutoWidthColumnList.value
+      if (!tableData.length || !autoWidthColumnList.length) {
+        reactData.isCalcColumn = false
+        return nextTick()
+      }
+      reactData.isCalcColumn = true
+      return nextTick().then(() => {
+        const el = refElem.value
+        if (el) {
+          autoWidthColumnList.forEach(column => {
+            const cellElList = el.querySelectorAll(`.vxe-body--column.${column.id}>.vxe-cell`)
+            const firstCellEl = cellElList[0]
+            let paddingSize = 0
+            if (firstCellEl) {
+              const cellStyle = getComputedStyle(firstCellEl)
+              paddingSize = Math.floor(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight)) + 2
+            }
+            let colWidth = column.renderAutoWidth - paddingSize + 2
+            XEUtils.arrayEach(cellElList, (cellEl) => {
+              const labelEl = cellEl.firstChild as HTMLElement
+              if (labelEl) {
+                colWidth = Math.max(colWidth, labelEl.offsetWidth)
+              }
+            })
+            column.renderAutoWidth = colWidth + paddingSize
+          })
+          tablePrivateMethods.analyColumnWidth()
+        }
+        reactData.isCalcColumn = false
+      })
+    }
+
     /**
      * 列宽算法
      * 支持 px、%、固定 混合分配
@@ -1107,7 +1148,7 @@ export default defineComponent({
       let meanWidth = remainWidth / 100
       const { fit } = props
       const { columnStore } = reactData
-      const { resizeList, pxMinList, pxList, scaleList, scaleMinList, autoList } = columnStore
+      const { resizeList, pxMinList, pxList, scaleList, scaleMinList, autoList, remainList } = columnStore
       // 最小宽
       pxMinList.forEach((column) => {
         const minWidth = XEUtils.toInteger(column.minWidth)
@@ -1132,6 +1173,12 @@ export default defineComponent({
         tableWidth += width
         column.renderWidth = width
       })
+      // 自适应宽
+      autoList.forEach((column) => {
+        const width = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
+        tableWidth += width
+        column.renderWidth = width
+      })
       // 调整了列宽
       resizeList.forEach((column) => {
         const width = XEUtils.toInteger(column.resizeWidth)
@@ -1139,7 +1186,7 @@ export default defineComponent({
         column.renderWidth = width
       })
       remainWidth -= tableWidth
-      meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + autoList.length)) : 0
+      meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + remainList.length)) : 0
       if (fit) {
         if (remainWidth > 0) {
           scaleMinList.concat(pxMinList).forEach((column) => {
@@ -1150,8 +1197,8 @@ export default defineComponent({
       } else {
         meanWidth = minCellWidth
       }
-      // 自适应
-      autoList.forEach((column) => {
+      // 剩余均分
+      remainList.forEach((column) => {
         const width = Math.max(meanWidth, minCellWidth)
         column.renderWidth = width
         tableWidth += width
@@ -1161,7 +1208,7 @@ export default defineComponent({
          * 偏移量算法
          * 如果所有列足够放的情况下，从最后动态列开始分配
          */
-        const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoList)
+        const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(remainList)
         let dynamicSize = dynamicList.length - 1
         if (dynamicSize > 0) {
           let odiffer = bodyWidth - tableWidth
@@ -2053,7 +2100,9 @@ export default defineComponent({
           const rowid = getRowid($xeTable, row)
           const rest = fullAllDataRowIdData[rowid]
           treeExpandLazyLoadedMaps[rowid] = row
-          loadMethod({ $table: $xeTable, row }).then((childRecords: any) => {
+          Promise.resolve(
+            loadMethod({ $table: $xeTable, row })
+          ).then((childRecords: any) => {
             rest.treeLoaded = true
             if (treeExpandLazyLoadedMaps[rowid]) {
               delete treeExpandLazyLoadedMaps[rowid]
@@ -3486,6 +3535,7 @@ export default defineComponent({
        * 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?%
        */
       recalculate (refull?: boolean) {
+        calcCellWidth()
         autoCellWidth()
         if (refull === true) {
           // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
@@ -5203,7 +5253,6 @@ export default defineComponent({
     /**
      * 处理显示 tooltip
      * @param {Event} evnt 事件
-     * @param {ColumnInfo} column 列配置
      * @param {Row} row 行对象
      */
     const handleTooltip = (evnt: MouseEvent, cell: HTMLTableCellElement, overflowElem: HTMLElement, tipElem: HTMLElement | null, params: any) => {
@@ -5271,7 +5320,7 @@ export default defineComponent({
         const el = refElem.value
         if (el) {
           const parentElem = el.parentNode as HTMLElement
-          const parentPaddingSize = height === 'auto' ? getPaddingTopBottomSize(parentElem) : 0
+          const parentPaddingSize = height === 'fill' || height === 'auto' ? getPaddingTopBottomSize(parentElem) : 0
           return Math.floor($xeGrid ? $xeGrid.getParentHeight() : XEUtils.toNumber(getComputedStyle(parentElem).height) - parentPaddingSize)
         }
         return 0
@@ -5423,12 +5472,13 @@ export default defineComponent({
         const { tableFullColumn } = internalData
         const columnOpts = computeColumnOpts.value
         const { width: defaultWidth, minWidth: defaultMinWidth } = columnOpts
-        const resizeList: any[] = []
-        const pxList: any[] = []
-        const pxMinList: any[] = []
-        const scaleList: any[] = []
-        const scaleMinList: any[] = []
-        const autoList: any[] = []
+        const resizeList: VxeTableDefines.ColumnInfo[] = []
+        const pxList: VxeTableDefines.ColumnInfo[] = []
+        const pxMinList: VxeTableDefines.ColumnInfo[] = []
+        const scaleList: VxeTableDefines.ColumnInfo[] = []
+        const scaleMinList: VxeTableDefines.ColumnInfo[] = []
+        const autoList: VxeTableDefines.ColumnInfo[] = []
+        const remainList: VxeTableDefines.ColumnInfo[] = []
         tableFullColumn.forEach((column) => {
           if (defaultWidth && !column.width) {
             column.width = defaultWidth
@@ -5439,6 +5489,8 @@ export default defineComponent({
           if (column.visible) {
             if (column.resizeWidth) {
               resizeList.push(column)
+            } else if (column.width === 'auto') {
+              autoList.push(column)
             } else if (isPx(column.width)) {
               pxList.push(column)
             } else if (isScale(column.width)) {
@@ -5448,11 +5500,11 @@ export default defineComponent({
             } else if (isScale(column.minWidth)) {
               scaleMinList.push(column)
             } else {
-              autoList.push(column)
+              remainList.push(column)
             }
           }
         })
-        Object.assign(reactData.columnStore, { resizeList, pxList, pxMinList, scaleList, scaleMinList, autoList })
+        Object.assign(reactData.columnStore, { resizeList, pxList, pxMinList, scaleList, scaleMinList, autoList, remainList })
       },
       saveCustomStore (type) {
         const { id } = props
@@ -6853,7 +6905,7 @@ export default defineComponent({
 
     const renderVN = () => {
       const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props
-      const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData
+      const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData
       const { leftList, rightList } = columnStore
       const loadingSlot = slots.loading
       const tipConfig = computeTipConfig.value
@@ -6882,6 +6934,7 @@ export default defineComponent({
           'row--highlight': rowOpts.isHover || highlightHoverRow,
           'column--highlight': columnOpts.isHover || highlightHoverColumn,
           'checkbox--range': checkboxOpts.range,
+          'column--calc': isCalcColumn,
           'is--header': showHeader,
           'is--footer': showFooter,
           'is--group': isGroup,

package/styles/components/table-module/export.scss

@@ -90,10 +90,10 @@
       cursor: pointer;
     }
     &:hover {
+      color: var(--vxe-ui-font-primary-color);
       & > i {
         display: block;
       }
-      color: var(--vxe-ui-font-primary-color);
     }
   }
   .vxe-import-select--file {

package/styles/components/table.scss

@@ -92,6 +92,7 @@
   & > .vxe-input,
   & > .vxe-textarea,
   & > .vxe-select,
+  & > .vxe-tree-select,
   & > .vxe-date-picker,
   & > .vxe-number-input {
     width: 100%;
@@ -314,6 +315,19 @@
   }
 }
 
+/*列宽*/
+.vxe-table {
+  &.column--calc {
+    .vxe-header--column,
+    .vxe-body--column {
+      .vxe-cell {
+        word-break: break-all;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
 /*header*/
 .vxe-table {
   .vxe-table--header-wrapper {
@@ -619,11 +633,6 @@
       }
     }
   }
-  &.checkbox--range {
-    .vxe-body--column {
-      user-select: none;
-    }
-  }
   &.cell--area {
     .vxe-table--body-wrapper,
     .vxe-body--column {
@@ -631,7 +640,7 @@
     }
   }
   &.drag--range {
-    .vxe-cell--checkbox {
+    .vxe-body--column {
       user-select: none;
     }
   }