vxe-table 4.7.48 → 4.7.50

package/lib/table/src/column.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.columnProps=void 0;var _vue=require("vue"),_util=require("../../table/src/util"),_cell=_interopRequireDefault(require("../../table/src/cell"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const columnProps=exports.columnProps={colId:[String,Number],type:String,field:String,title:String,width:[Number,String],minWidth:[Number,String],maxWidth:[Number,String],resizable:{type:Boolean,default:null},fixed:String,align:String,headerAlign:String,footerAlign:String,showOverflow:{type:[Boolean,String],default:null},showHeaderOverflow:{type:[Boolean,String],default:null},showFooterOverflow:{type:[Boolean,String],default:null},className:[String,Function],headerClassName:[String,Function],footerClassName:[String,Function],formatter:[Function,Array,String],sortable:Boolean,sortBy:[String,Function],sortType:String,filters:{type:Array,default:null},filterMultiple:{type:Boolean,default:!0},filterMethod:Function,filterResetMethod:Function,filterRecoverMethod:Function,filterRender:Object,treeNode:Boolean,visible:{type:Boolean,default:null},headerExportMethod:Function,exportMethod:Function,footerExportMethod:Function,titleHelp:Object,titlePrefix:Object,titleSuffix:Object,cellType:String,cellRender:Object,editRender:Object,contentRender:Object,params:Object};var _default=exports.default=(0,_vue.defineComponent)({name:"VxeColumn",props:columnProps,setup(e,{slots:t}){const r=(0,_vue.ref)(),l=(0,_vue.inject)("$xeTable",{}),n=(0,_vue.inject)("$xeColgroup",null),o=_cell.default.createColumn(l,e);o.slots=t;var t=()=>(0,_vue.h)("div",{ref:r}),u={column:o,renderVN:t};return(0,_util.watchColumn)(l,e,o),(0,_vue.onMounted)(()=>{(0,_util.assemColumn)(l,r.value,o,n)}),(0,_vue.onUnmounted)(()=>{(0,_util.destroyColumn)(l,o)}),(0,_vue.provide)("$xeColumn",u),(0,_vue.provide)("$xeGrid",null),t}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.columnProps=void 0;var _vue=require("vue"),_util=require("../../table/src/util"),_cell=_interopRequireDefault(require("../../table/src/cell"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const columnProps=exports.columnProps={colId:[String,Number],type:String,field:String,title:String,width:[Number,String],minWidth:[Number,String],maxWidth:[Number,String],resizable:{type:Boolean,default:null},fixed:String,align:String,headerAlign:String,footerAlign:String,showOverflow:{type:[Boolean,String],default:null},showHeaderOverflow:{type:[Boolean,String],default:null},showFooterOverflow:{type:[Boolean,String],default:null},className:[String,Function],headerClassName:[String,Function],footerClassName:[String,Function],formatter:[Function,Array,String],footerFormatter:[Function,Array,String],sortable:Boolean,sortBy:[String,Function],sortType:String,filters:{type:Array,default:null},filterMultiple:{type:Boolean,default:!0},filterMethod:Function,filterResetMethod:Function,filterRecoverMethod:Function,filterRender:Object,treeNode:Boolean,visible:{type:Boolean,default:null},headerExportMethod:Function,exportMethod:Function,footerExportMethod:Function,titleHelp:Object,titlePrefix:Object,titleSuffix:Object,cellType:String,cellRender:Object,editRender:Object,contentRender:Object,params:Object};var _default=exports.default=(0,_vue.defineComponent)({name:"VxeColumn",props:columnProps,setup(e,{slots:t}){const r=(0,_vue.ref)(),o=(0,_vue.inject)("$xeTable",{}),n=(0,_vue.inject)("$xeColgroup",null),l=_cell.default.createColumn(o,e);l.slots=t;var t=()=>(0,_vue.h)("div",{ref:r}),u={column:l,renderVN:t};return(0,_util.watchColumn)(o,e,l),(0,_vue.onMounted)(()=>{(0,_util.assemColumn)(o,r.value,l,n)}),(0,_vue.onUnmounted)(()=>{(0,_util.destroyColumn)(o,l)}),(0,_vue.provide)("$xeColumn",u),(0,_vue.provide)("$xeGrid",null),t}});

package/lib/table/src/columnInfo.js

@@ -89,6 +89,7 @@ class ColumnInfo {
       headerClassName: _vm.headerClassName,
       footerClassName: _vm.footerClassName,
       formatter: formatter,
+      footerFormatter: _vm.footerFormatter,
       sortable: _vm.sortable,
       sortBy: _vm.sortBy,
       sortType: _vm.sortType,
@@ -139,6 +140,7 @@ class ColumnInfo {
       renderWidth: 0,
       renderHeight: 0,
       renderResizeWidth: 0,
+      renderAutoWidth: 0,
       resizeWidth: 0,
       renderLeft: 0,
       renderArgs: [],

package/lib/table/src/columnInfo.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ColumnInfo=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_util=require("./util"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const{getI18n,formats}=_ui.VxeUI;class ColumnInfo{constructor(e,r,{renderHeader:t,renderCell:l,renderFooter:o,renderData:i}={}){var d,n=e.xegrid,s=r.formatter,a=!_xeUtils.default.isBoolean(r.visible)||r.visible;"development"===process.env.NODE_ENV&&(d=["seq","checkbox","radio","expand","html"],r.type&&-1===d.indexOf(r.type)&&(0,_log.warnLog)("vxe.error.errProp",["type="+r.type,d.join(", ")]),(_xeUtils.default.isBoolean(r.cellRender)||r.cellRender&&!_xeUtils.default.isObject(r.cellRender))&&(0,_log.warnLog)("vxe.error.errProp",["column.cell-render="+r.cellRender,"column.cell-render={}"]),(_xeUtils.default.isBoolean(r.editRender)||r.editRender&&!_xeUtils.default.isObject(r.editRender))&&(0,_log.warnLog)("vxe.error.errProp",["column.edit-render="+r.editRender,"column.edit-render={}"]),r.cellRender&&r.editRender&&(0,_log.warnLog)("vxe.error.errConflicts",["column.cell-render","column.edit-render"]),"expand"===r.type&&(d=e["props"],d=d["treeConfig"],e=e.getComputeMaps()["computeTreeOpts"],e=e.value,d)&&(e.showLine||e.line)&&(0,_log.errLog)("vxe.error.errConflicts",["tree-config.showLine","column.type=expand"]),s)&&(_xeUtils.default.isString(s)?(d=formats.get(s)||_xeUtils.default[s])&&_xeUtils.default.isFunction(d.tableCellFormatMethod||d.cellFormatMethod)||(0,_log.errLog)("vxe.error.notFormats",[s]):!_xeUtils.default.isArray(s)||(e=formats.get(s[0])||_xeUtils.default[s[0]])&&_xeUtils.default.isFunction(e.tableCellFormatMethod||e.cellFormatMethod)||(0,_log.errLog)("vxe.error.notFormats",[s[0]])),Object.assign(this,{type:r.type,property:r.field,field:r.field,title:r.title,width:r.width,minWidth:r.minWidth,maxWidth:r.maxWidth,resizable:r.resizable,fixed:r.fixed,align:r.align,headerAlign:r.headerAlign,footerAlign:r.footerAlign,showOverflow:r.showOverflow,showHeaderOverflow:r.showHeaderOverflow,showFooterOverflow:r.showFooterOverflow,className:r.className,headerClassName:r.headerClassName,footerClassName:r.footerClassName,formatter:s,sortable:r.sortable,sortBy:r.sortBy,sortType:r.sortType,filters:(0,_util.toFilters)(r.filters),filterMultiple:!_xeUtils.default.isBoolean(r.filterMultiple)||r.filterMultiple,filterMethod:r.filterMethod,filterResetMethod:r.filterResetMethod,filterRecoverMethod:r.filterRecoverMethod,filterRender:r.filterRender,treeNode:r.treeNode,cellType:r.cellType,cellRender:r.cellRender,editRender:r.editRender,contentRender:r.contentRender,headerExportMethod:r.headerExportMethod,exportMethod:r.exportMethod,footerExportMethod:r.footerExportMethod,titleHelp:r.titleHelp,titlePrefix:r.titlePrefix,titleSuffix:r.titleSuffix,params:r.params,id:r.colId||_xeUtils.default.uniqueId("col_"),parentId:null,visible:a,halfVisible:!1,defaultVisible:a,defaultFixed:r.fixed,checked:!1,halfChecked:!1,disabled:!1,level:1,rowSpan:1,colSpan:1,order:null,sortTime:0,sortNumber:0,renderSortNumber:0,renderFixed:"",renderVisible:!1,renderWidth:0,renderHeight:0,renderResizeWidth:0,resizeWidth:0,renderLeft:0,renderArgs:[],model:{},renderHeader:t||r.renderHeader,renderCell:l||r.renderCell,renderFooter:o||r.renderFooter,renderData:i,slots:r.slots}),n&&(d=n.getComputeMaps()["computeProxyOpts"],(e=d.value).beforeColumn)&&e.beforeColumn({$grid:n,column:this})}getTitle(){return(0,_utils.getFuncText)(this.title||("seq"===this.type?getI18n("vxe.table.seqTitle"):""))}getKey(){return this.field||(this.type?"type="+this.type:null)}update(e,r){"filters"!==e&&("field"===e&&(this.property=r),this[e]=r)}}exports.ColumnInfo=ColumnInfo;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ColumnInfo=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_util=require("./util"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const{getI18n,formats}=_ui.VxeUI;class ColumnInfo{constructor(e,r,{renderHeader:t,renderCell:l,renderFooter:o,renderData:i}={}){var d,n=e.xegrid,s=r.formatter,a=!_xeUtils.default.isBoolean(r.visible)||r.visible;"development"===process.env.NODE_ENV&&(d=["seq","checkbox","radio","expand","html"],r.type&&-1===d.indexOf(r.type)&&(0,_log.warnLog)("vxe.error.errProp",["type="+r.type,d.join(", ")]),(_xeUtils.default.isBoolean(r.cellRender)||r.cellRender&&!_xeUtils.default.isObject(r.cellRender))&&(0,_log.warnLog)("vxe.error.errProp",["column.cell-render="+r.cellRender,"column.cell-render={}"]),(_xeUtils.default.isBoolean(r.editRender)||r.editRender&&!_xeUtils.default.isObject(r.editRender))&&(0,_log.warnLog)("vxe.error.errProp",["column.edit-render="+r.editRender,"column.edit-render={}"]),r.cellRender&&r.editRender&&(0,_log.warnLog)("vxe.error.errConflicts",["column.cell-render","column.edit-render"]),"expand"===r.type&&(d=e["props"],d=d["treeConfig"],e=e.getComputeMaps()["computeTreeOpts"],e=e.value,d)&&(e.showLine||e.line)&&(0,_log.errLog)("vxe.error.errConflicts",["tree-config.showLine","column.type=expand"]),s)&&(_xeUtils.default.isString(s)?(d=formats.get(s)||_xeUtils.default[s])&&_xeUtils.default.isFunction(d.tableCellFormatMethod||d.cellFormatMethod)||(0,_log.errLog)("vxe.error.notFormats",[s]):!_xeUtils.default.isArray(s)||(e=formats.get(s[0])||_xeUtils.default[s[0]])&&_xeUtils.default.isFunction(e.tableCellFormatMethod||e.cellFormatMethod)||(0,_log.errLog)("vxe.error.notFormats",[s[0]])),Object.assign(this,{type:r.type,property:r.field,field:r.field,title:r.title,width:r.width,minWidth:r.minWidth,maxWidth:r.maxWidth,resizable:r.resizable,fixed:r.fixed,align:r.align,headerAlign:r.headerAlign,footerAlign:r.footerAlign,showOverflow:r.showOverflow,showHeaderOverflow:r.showHeaderOverflow,showFooterOverflow:r.showFooterOverflow,className:r.className,headerClassName:r.headerClassName,footerClassName:r.footerClassName,formatter:s,footerFormatter:r.footerFormatter,sortable:r.sortable,sortBy:r.sortBy,sortType:r.sortType,filters:(0,_util.toFilters)(r.filters),filterMultiple:!_xeUtils.default.isBoolean(r.filterMultiple)||r.filterMultiple,filterMethod:r.filterMethod,filterResetMethod:r.filterResetMethod,filterRecoverMethod:r.filterRecoverMethod,filterRender:r.filterRender,treeNode:r.treeNode,cellType:r.cellType,cellRender:r.cellRender,editRender:r.editRender,contentRender:r.contentRender,headerExportMethod:r.headerExportMethod,exportMethod:r.exportMethod,footerExportMethod:r.footerExportMethod,titleHelp:r.titleHelp,titlePrefix:r.titlePrefix,titleSuffix:r.titleSuffix,params:r.params,id:r.colId||_xeUtils.default.uniqueId("col_"),parentId:null,visible:a,halfVisible:!1,defaultVisible:a,defaultFixed:r.fixed,checked:!1,halfChecked:!1,disabled:!1,level:1,rowSpan:1,colSpan:1,order:null,sortTime:0,sortNumber:0,renderSortNumber:0,renderFixed:"",renderVisible:!1,renderWidth:0,renderHeight:0,renderResizeWidth:0,renderAutoWidth:0,resizeWidth:0,renderLeft:0,renderArgs:[],model:{},renderHeader:t||r.renderHeader,renderCell:l||r.renderCell,renderFooter:o||r.renderFooter,renderData:i,slots:r.slots}),n&&(d=n.getComputeMaps()["computeProxyOpts"],(e=d.value).beforeColumn)&&e.beforeColumn({$grid:n,column:this})}getTitle(){return(0,_utils.getFuncText)(this.title||("seq"===this.type?getI18n("vxe.table.seqTitle"):""))}getKey(){return this.field||(this.type?"type="+this.type:null)}update(e,r){"filters"!==e&&("field"===e&&(this.property=r),this[e]=r)}}exports.ColumnInfo=ColumnInfo;

package/lib/table/src/table.js

@@ -56,6 +56,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       computeSize
     } = useFns.useSize(props);
     const reactData = (0, _vue.reactive)({
+      isCalcColumn: false,
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -168,7 +169,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
         pxMinList: [],
         scaleList: [],
         scaleMinList: [],
-        autoList: []
+        autoList: [],
+        remainList: []
       },
       // 存放快捷菜单的信息
       ctxMenuStore: {
@@ -511,6 +513,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const computeCustomOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.customConfig, props.customConfig);
     });
+    const computeAutoWidthColumnList = (0, _vue.computed)(() => {
+      const {
+        visibleColumn
+      } = internalData;
+      return visibleColumn.filter(column => column.width === 'auto');
+    });
     const computeFixedColumnSize = (0, _vue.computed)(() => {
       const {
         collectColumn
@@ -902,7 +910,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const val = props[key];
       let num = 0;
       if (val) {
-        if (val === 'auto') {
+        if (val === '100%' || val === 'auto') {
           num = parentHeight;
         } else {
           const excludeHeight = $xeTable.getExcludeHeight();
@@ -1125,6 +1133,41 @@ var _default = exports.default = (0, _vue.defineComponent)({
       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, _vue.nextTick)();
+      }
+      reactData.isCalcColumn = true;
+      return (0, _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(_xeUtils.default.toNumber(cellStyle.paddingLeft) + _xeUtils.default.toNumber(cellStyle.paddingRight)) + 2;
+            }
+            let colWidth = column.renderAutoWidth - paddingSize + 2;
+            _xeUtils.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、%、固定 混合分配
@@ -1158,7 +1201,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
         pxList,
         scaleList,
         scaleMinList,
-        autoList
+        autoList,
+        remainList
       } = columnStore;
       // 最小宽
       pxMinList.forEach(column => {
@@ -1184,6 +1228,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
         tableWidth += width;
         column.renderWidth = width;
       });
+      // 自适应宽
+      autoList.forEach(column => {
+        const width = Math.max(60, _xeUtils.default.toInteger(column.renderAutoWidth));
+        tableWidth += width;
+        column.renderWidth = width;
+      });
       // 调整了列宽
       resizeList.forEach(column => {
         const width = _xeUtils.default.toInteger(column.resizeWidth);
@@ -1191,7 +1241,7 @@ var _default = exports.default = (0, _vue.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 => {
@@ -1202,8 +1252,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       } else {
         meanWidth = minCellWidth;
       }
-      // 自适应
-      autoList.forEach(column => {
+      // 剩余均分
+      remainList.forEach(column => {
         const width = Math.max(meanWidth, minCellWidth);
         column.renderWidth = width;
         tableWidth += width;
@@ -1213,7 +1263,7 @@ var _default = exports.default = (0, _vue.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;
@@ -2326,10 +2376,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
           const rowid = (0, _util.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];
@@ -3994,6 +4044,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
        * 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?%
        */
       recalculate(refull) {
+        calcCellWidth();
         autoCellWidth();
         if (refull === true) {
           // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
@@ -5977,7 +6028,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
     /**
      * 处理显示 tooltip
      * @param {Event} evnt 事件
-     * @param {ColumnInfo} column 列配置
      * @param {Row} row 行对象
      */
     const handleTooltip = (evnt, cell, overflowElem, tipElem, params) => {
@@ -6054,7 +6104,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const el = refElem.value;
         if (el) {
           const parentElem = el.parentNode;
-          const parentPaddingSize = height === 'auto' ? (0, _dom.getPaddingTopBottomSize)(parentElem) : 0;
+          const parentPaddingSize = height === 'fill' || height === 'auto' ? (0, _dom.getPaddingTopBottomSize)(parentElem) : 0;
           return Math.floor($xeGrid ? $xeGrid.getParentHeight() : _xeUtils.default.toNumber(getComputedStyle(parentElem).height) - parentPaddingSize);
         }
         return 0;
@@ -6256,6 +6306,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const scaleList = [];
         const scaleMinList = [];
         const autoList = [];
+        const remainList = [];
         tableFullColumn.forEach(column => {
           if (defaultWidth && !column.width) {
             column.width = defaultWidth;
@@ -6266,6 +6317,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
           if (column.visible) {
             if (column.resizeWidth) {
               resizeList.push(column);
+            } else if (column.width === 'auto') {
+              autoList.push(column);
             } else if ((0, _dom.isPx)(column.width)) {
               pxList.push(column);
             } else if ((0, _dom.isScale)(column.width)) {
@@ -6275,7 +6328,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             } else if ((0, _dom.isScale)(column.minWidth)) {
               scaleMinList.push(column);
             } else {
-              autoList.push(column);
+              remainList.push(column);
             }
           }
         });
@@ -6285,7 +6338,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
           pxMinList,
           scaleList,
           scaleMinList,
-          autoList
+          autoList,
+          remainList
         });
       },
       saveCustomStore(type) {
@@ -7929,6 +7983,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         editRules
       } = props;
       const {
+        isCalcColumn,
         isGroup,
         overflowX,
         overflowY,
@@ -7976,6 +8031,7 @@ var _default = exports.default = (0, _vue.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,