vxe-table 4.7.48 → 4.7.50

package/lib/index.umd.js

@@ -1951,9 +1951,9 @@ function eqEmptyValue(cellValue) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "4.7.48";
+const version = "4.7.50";
 core_.VxeUI.version = version;
-core_.VxeUI.tableVersion = "4.7.48";
+core_.VxeUI.tableVersion = "4.7.50";
 core_.VxeUI.setConfig({
   emptyCell: '　',
   table: {
@@ -2331,7 +2331,7 @@ var es_array_push = __webpack_require__(4114);
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"4.7.48"}`;
+const log_version = `table v${"4.7.50"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -2419,6 +2419,7 @@ class ColumnInfo {
       headerClassName: _vm.headerClassName,
       footerClassName: _vm.footerClassName,
       formatter: formatter,
+      footerFormatter: _vm.footerFormatter,
       sortable: _vm.sortable,
       sortBy: _vm.sortBy,
       sortType: _vm.sortType,
@@ -2469,6 +2470,7 @@ class ColumnInfo {
       renderWidth: 0,
       renderHeight: 0,
       renderResizeWidth: 0,
+      renderAutoWidth: 0,
       resizeWidth: 0,
       renderLeft: 0,
       renderArgs: [],
@@ -3180,7 +3182,8 @@ function getSlotVNs(vns) {
 const {
   getI18n: cell_getI18n,
   getIcon: cell_getIcon,
-  renderer: cell_renderer
+  renderer: cell_renderer,
+  formats: cell_formats
 } = core_.VxeUI;
 function renderTitlePrefixIcon(params) {
   const {
@@ -3270,6 +3273,18 @@ function renderTitleContent(params, content) {
     ...ons
   }, getSlotVNs(content))];
 }
+function formatFooterLabel(footerFormatter, params) {
+  if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerFormatter)) {
+    return footerFormatter(params);
+  }
+  const isArr = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(footerFormatter);
+  const gFormatOpts = isArr ? cell_formats.get(footerFormatter[0]) : cell_formats.get(footerFormatter);
+  const footerFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null;
+  if (footerFormatMethod) {
+    return isArr ? footerFormatMethod(params, ...footerFormatter.slice(1)) : footerFormatMethod(params);
+  }
+  return '';
+}
 function getFooterContent(params) {
   const {
     $table,
@@ -3281,7 +3296,8 @@ function getFooterContent(params) {
   const {
     slots,
     editRender,
-    cellRender
+    cellRender,
+    footerFormatter
   } = column;
   const renderOpts = editRender || cellRender;
   const footerSlot = slots ? slots.footer : null;
@@ -3297,11 +3313,26 @@ function getFooterContent(params) {
       }
     }
   }
+  let itemValue = '';
   // 兼容老模式
   if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(items)) {
-    return [formatText(items[_columnIndex], 1)];
+    itemValue = items[_columnIndex];
+    return [footerFormatter ? formatFooterLabel(footerFormatter, {
+      itemValue,
+      column,
+      row,
+      items,
+      _columnIndex
+    }) : formatText(itemValue, 1)];
   }
-  return [formatText(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, column.field), 1)];
+  itemValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, column.field);
+  return [footerFormatter ? formatFooterLabel(footerFormatter, {
+    itemValue,
+    column,
+    row,
+    items,
+    _columnIndex
+  }) : formatText(itemValue, 1)];
 }
 function getDefaultCellLabel(params) {
   const {
@@ -3466,7 +3497,8 @@ const Cell = {
       isHidden
     } = params;
     const {
-      reactData
+      reactData,
+      internalData
     } = $table;
     const {
       computeTreeOpts
@@ -3475,6 +3507,9 @@ const Cell = {
       treeExpandedMaps,
       treeExpandLazyLoadedMaps
     } = reactData;
+    const {
+      fullAllDataRowIdData
+    } = internalData;
     const treeOpts = computeTreeOpts.value;
     const {
       row,
@@ -3496,9 +3531,11 @@ 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 = {};
     if (iconSlot) {
@@ -3508,8 +3545,10 @@ 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') {
@@ -3524,11 +3563,11 @@ const Cell = {
       style: {
         paddingLeft: `${level * indent}px`
       }
-    }, [showIcon && (rowChilds && rowChilds.length || hasLazyChilds) ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+    }, [showIcon && (lazy ? isLazyLoaded ? hasChild : hasLazyChilds : hasChild) ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
       class: 'vxe-tree--btn-wrapper',
       ...ons
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-      class: ['vxe-tree--node-btn', isLazyLoaded ? iconLoaded || cell_getIcon().TABLE_TREE_LOADED : isAceived ? iconOpen || cell_getIcon().TABLE_TREE_OPEN : iconClose || cell_getIcon().TABLE_TREE_CLOSE]
+      class: ['vxe-tree--node-btn', isLazyLoading ? iconLoaded || cell_getIcon().TABLE_TREE_LOADED : isAceived ? iconOpen || cell_getIcon().TABLE_TREE_OPEN : iconClose || cell_getIcon().TABLE_TREE_CLOSE]
     })])] : null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
       class: 'vxe-tree-cell'
     }, cellVNodes)])];
@@ -3962,7 +4001,7 @@ 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);
     }
@@ -3970,7 +4009,7 @@ const Cell = {
       const rowid = getRowid($table, row);
       isAceived = !!rowExpandedMaps[rowid];
       if (lazy) {
-        isLazyLoaded = !!rowExpandLazyLoadedMaps[rowid];
+        isLazyLoading = !!rowExpandLazyLoadedMaps[rowid];
       }
     }
     return [showIcon && (!visibleMethod || visibleMethod(params)) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
@@ -3981,7 +4020,7 @@ const Cell = {
         $table.triggerRowExpandEvent(evnt, params);
       }
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-      class: ['vxe-table--expand-btn', isLazyLoaded ? iconLoaded || cell_getIcon().TABLE_EXPAND_LOADED : isAceived ? iconOpen || cell_getIcon().TABLE_EXPAND_OPEN : iconClose || cell_getIcon().TABLE_EXPAND_CLOSE]
+      class: ['vxe-table--expand-btn', isLazyLoading ? iconLoaded || cell_getIcon().TABLE_EXPAND_LOADED : isAceived ? iconOpen || cell_getIcon().TABLE_EXPAND_OPEN : iconClose || cell_getIcon().TABLE_EXPAND_CLOSE]
     })]) : null, defaultSlot || labelField ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: 'vxe-table--expand-label'
     }, defaultSlot ? $table.callSlot(defaultSlot, params) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)) : null];
@@ -4304,6 +4343,8 @@ const columnProps = {
   footerClassName: [String, Function],
   // 格式化显示内容
   formatter: [Function, Array, String],
+  // 格式化表尾显示内容
+  footerFormatter: [Function, Array, String],
   // 是否允许排序
   sortable: Boolean,
   // 自定义排序的属性
@@ -8215,6 +8256,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       computeSize
     } = useFns.useSize(props);
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
+      isCalcColumn: false,
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -8327,7 +8369,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         pxMinList: [],
         scaleList: [],
         scaleMinList: [],
-        autoList: []
+        autoList: [],
+        remainList: []
       },
       // 存放快捷菜单的信息
       ctxMenuStore: {
@@ -8672,6 +8715,12 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     const computeCustomOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, table_getConfig().table.customConfig, props.customConfig);
     });
+    const computeAutoWidthColumnList = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        visibleColumn
+      } = internalData;
+      return visibleColumn.filter(column => column.width === 'auto');
+    });
     const computeFixedColumnSize = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         collectColumn
@@ -9063,7 +9112,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       const val = props[key];
       let num = 0;
       if (val) {
-        if (val === 'auto') {
+        if (val === '100%' || val === 'auto') {
           num = parentHeight;
         } else {
           const excludeHeight = $xeTable.getExcludeHeight();
@@ -9286,6 +9335,41 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       internalData.customMinHeight = calcHeight('minHeight');
       internalData.customMaxHeight = calcHeight('maxHeight');
     };
+    const calcCellWidth = () => {
+      const {
+        tableData
+      } = reactData;
+      const autoWidthColumnList = computeAutoWidthColumnList.value;
+      if (!tableData.length || !autoWidthColumnList.length) {
+        reactData.isCalcColumn = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      }
+      reactData.isCalcColumn = true;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(cellStyle.paddingLeft) + external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(cellStyle.paddingRight)) + 2;
+            }
+            let colWidth = column.renderAutoWidth - paddingSize + 2;
+            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(cellElList, cellEl => {
+              const labelEl = cellEl.firstChild;
+              if (labelEl) {
+                colWidth = Math.max(colWidth, labelEl.offsetWidth);
+              }
+            });
+            column.renderAutoWidth = colWidth + paddingSize;
+          });
+          tablePrivateMethods.analyColumnWidth();
+        }
+        reactData.isCalcColumn = false;
+      });
+    };
     /**
      * 列宽算法
      * 支持 px、%、固定 混合分配
@@ -9319,7 +9403,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         pxList,
         scaleList,
         scaleMinList,
-        autoList
+        autoList,
+        remainList
       } = columnStore;
       // 最小宽
       pxMinList.forEach(column => {
@@ -9345,6 +9430,12 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         tableWidth += width;
         column.renderWidth = width;
       });
+      // 自适应宽
+      autoList.forEach(column => {
+        const width = Math.max(60, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toInteger(column.renderAutoWidth));
+        tableWidth += width;
+        column.renderWidth = width;
+      });
       // 调整了列宽
       resizeList.forEach(column => {
         const width = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toInteger(column.resizeWidth);
@@ -9352,7 +9443,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         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 => {
@@ -9363,8 +9454,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       } else {
         meanWidth = minCellWidth;
       }
-      // 自适应
-      autoList.forEach(column => {
+      // 剩余均分
+      remainList.forEach(column => {
         const width = Math.max(meanWidth, minCellWidth);
         column.renderWidth = width;
         tableWidth += width;
@@ -9374,7 +9465,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
          * 偏移量算法
          * 如果所有列足够放的情况下，从最后动态列开始分配
          */
-        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;
@@ -10490,10 +10581,10 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           const rowid = getRowid($xeTable, row);
           const rest = fullAllDataRowIdData[rowid];
           treeExpandLazyLoadedMaps[rowid] = row;
-          loadMethod({
+          Promise.resolve(loadMethod({
             $table: $xeTable,
             row
-          }).then(childRecords => {
+          })).then(childRecords => {
             rest.treeLoaded = true;
             if (treeExpandLazyLoadedMaps[rowid]) {
               delete treeExpandLazyLoadedMaps[rowid];
@@ -12162,6 +12253,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
        * 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?%
        */
       recalculate(refull) {
+        calcCellWidth();
         autoCellWidth();
         if (refull === true) {
           // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
@@ -14152,7 +14244,6 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     /**
      * 处理显示 tooltip
      * @param {Event} evnt 事件
-     * @param {ColumnInfo} column 列配置
      * @param {Row} row 行对象
      */
     const handleTooltip = (evnt, cell, overflowElem, tipElem, params) => {
@@ -14229,7 +14320,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         const el = refElem.value;
         if (el) {
           const parentElem = el.parentNode;
-          const parentPaddingSize = height === 'auto' ? getPaddingTopBottomSize(parentElem) : 0;
+          const parentPaddingSize = height === 'fill' || height === 'auto' ? getPaddingTopBottomSize(parentElem) : 0;
           return Math.floor($xeGrid ? $xeGrid.getParentHeight() : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(getComputedStyle(parentElem).height) - parentPaddingSize);
         }
         return 0;
@@ -14431,6 +14522,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         const scaleList = [];
         const scaleMinList = [];
         const autoList = [];
+        const remainList = [];
         tableFullColumn.forEach(column => {
           if (defaultWidth && !column.width) {
             column.width = defaultWidth;
@@ -14441,6 +14533,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           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)) {
@@ -14450,7 +14544,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             } else if (isScale(column.minWidth)) {
               scaleMinList.push(column);
             } else {
-              autoList.push(column);
+              remainList.push(column);
             }
           }
         });
@@ -14460,7 +14554,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           pxMinList,
           scaleList,
           scaleMinList,
-          autoList
+          autoList,
+          remainList
         });
       },
       saveCustomStore(type) {
@@ -16108,6 +16203,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         editRules
       } = props;
       const {
+        isCalcColumn,
         isGroup,
         overflowX,
         overflowY,
@@ -16155,6 +16251,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           '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,
@@ -22684,9 +22781,9 @@ const gridComponentEmits = [...emits, 'page-change', 'form-submit', 'form-submit
       const tableProps = Object.assign({}, tableExtendProps);
       if (isZMax) {
         if (tableExtendProps.maxHeight) {
-          tableProps.maxHeight = 'auto';
+          tableProps.maxHeight = '100%';
         } else {
-          tableProps.height = 'auto';
+          tableProps.height = '100%';
         }
       }
       if (proxyConfig && isEnableConf(proxyOpts)) {
@@ -23793,7 +23890,7 @@ const gridComponentEmits = [...emits, 'page-change', 'form-submit', 'form-submit
         const topWrapper = refTopWrapper.value;
         const bottomWrapper = refBottomWrapper.value;
         const pagerWrapper = refPagerWrapper.value;
-        const parentPaddingSize = isZMax || height !== 'auto' ? 0 : getPaddingTopBottomSize(el.parentNode);
+        const parentPaddingSize = isZMax || !(height === 'auto' || height === '100%') ? 0 : getPaddingTopBottomSize(el.parentNode);
         return parentPaddingSize + getPaddingTopBottomSize(el) + getOffsetHeight(formWrapper) + getOffsetHeight(toolbarWrapper) + getOffsetHeight(topWrapper) + getOffsetHeight(bottomWrapper) + getOffsetHeight(pagerWrapper);
       },
       getParentHeight() {