vxe-table 3.8.11 → 3.8.13

package/packages/table/src/column.js

@@ -40,6 +40,8 @@ const props = {
   footerClassName: [String, Function],
   // 格式化显示内容
   formatter: [Function, Array, String],
+  // 格式化表尾显示内容
+  footerFormatter: [Function, Array, String],
   // 是否允许排序
   sortable: Boolean,
   // 在 v3 中废弃

package/packages/table/src/columnInfo.js

@@ -74,6 +74,7 @@ export class ColumnInfo {
       headerClassName: _vm.headerClassName,
       footerClassName: _vm.footerClassName,
       formatter,
+      footerFormatter: _vm.footerFormatter,
       sortable: _vm.sortable,
       sortBy: _vm.sortBy,
       sortType: _vm.sortType,
@@ -127,6 +128,7 @@ export class ColumnInfo {
       renderWidth: 0,
       renderHeight: 0,
       renderResizeWidth: 0,
+      renderAutoWidth: 0,
       resizeWidth: 0, // 手动调整
 
       renderLeft: 0,

package/packages/table/src/methods.js

@@ -2005,6 +2005,7 @@ const Methods = {
     const scaleList = []
     const scaleMinList = []
     const autoList = []
+    const remainList = []
     this.tableFullColumn.forEach(column => {
       if (defaultWidth && !column.width) {
         column.width = defaultWidth
@@ -2015,6 +2016,8 @@ const Methods = {
       if (column.visible) {
         if (column.resizeWidth) {
           resizeList.push(column)
+        } else if (column.width === 'auto') {
+          autoList.push(column)
         } else if (DomTools.isPx(column.width)) {
           pxList.push(column)
         } else if (DomTools.isScale(column.width)) {
@@ -2024,11 +2027,11 @@ const Methods = {
         } else if (DomTools.isScale(column.minWidth)) {
           scaleMinList.push(column)
         } else {
-          autoList.push(column)
+          remainList.push(column)
         }
       }
     })
-    Object.assign(this.columnStore, { resizeList, pxList, pxMinList, scaleList, scaleMinList, autoList })
+    Object.assign(this.columnStore, { resizeList, pxList, pxMinList, scaleList, scaleMinList, autoList, remainList })
   },
   /**
    * 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步）
@@ -2069,6 +2072,7 @@ const Methods = {
     const headerElem = tableHeader ? tableHeader.$el : null
     const footerElem = tableFooter ? tableFooter.$el : null
     if (bodyElem) {
+      this.calcCellWidth()
       this.autoCellWidth(headerElem, bodyElem, footerElem)
       if (refull === true) {
         // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
@@ -2080,6 +2084,38 @@ const Methods = {
     }
     return this.computeScrollLoad()
   },
+  calcCellWidth () {
+    const { autoWidthColumnList, tableData } = this
+    if (!tableData.length || !autoWidthColumnList.length) {
+      this.isCalcColumn = false
+      return this.$nextTick()
+    }
+    this.isCalcColumn = true
+    return this.$nextTick().then(() => {
+      const el = this.$el
+      if (el) {
+        autoWidthColumnList.forEach(column => {
+          const cellElList = el.querySelectorAll(`.vxe-header--column.${column.id}>.vxe-cell,.vxe-body--column.${column.id}>.vxe-cell,.vxe-footer--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
+            if (labelEl) {
+              colWidth = Math.max(colWidth, labelEl.offsetWidth)
+            }
+          })
+          column.renderAutoWidth = colWidth + paddingSize
+        })
+        this.analyColumnWidth()
+      }
+      this.isCalcColumn = false
+    })
+  },
   /**
    * 列宽算法
    * 支持 px、%、固定 混合分配
@@ -2097,7 +2133,7 @@ const Methods = {
     let remainWidth = bodyWidth
     let meanWidth = remainWidth / 100
     const { fit, columnStore } = this
-    const { resizeList, pxMinList, pxList, scaleList, scaleMinList, autoList } = columnStore
+    const { resizeList, pxMinList, pxList, scaleList, scaleMinList, autoList, remainList } = columnStore
     // 最小宽
     pxMinList.forEach(column => {
       const minWidth = parseInt(column.minWidth)
@@ -2122,6 +2158,12 @@ const Methods = {
       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 = parseInt(column.resizeWidth)
@@ -2129,7 +2171,7 @@ const Methods = {
       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 => {
@@ -2140,8 +2182,8 @@ const Methods = {
     } else {
       meanWidth = minCellWidth
     }
-    // 自适应
-    autoList.forEach(column => {
+    // 剩余均分
+    remainList.forEach(column => {
       const width = Math.max(meanWidth, minCellWidth)
       column.renderWidth = width
       tableWidth += width
@@ -2151,7 +2193,7 @@ const Methods = {
        * 偏移量算法
        * 如果所有列足够放的情况下，从最后动态列开始分配
        */
-      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
@@ -2181,19 +2223,23 @@ const Methods = {
     } else {
       this.headerHeight = 0
     }
+    let overflowX = false
+    let footerHeight = 0
+    let scrollbarHeight = 0
     if (footerElem) {
-      const footerHeight = footerElem.offsetHeight
-      this.scrollbarHeight = Math.max(footerHeight - footerElem.clientHeight, 0)
-      this.overflowX = tableWidth > footerElem.clientWidth
-      this.footerHeight = footerHeight
+      footerHeight = footerElem.offsetHeight
+      overflowX = tableWidth > footerElem.clientWidth
+      scrollbarHeight = Math.max(footerHeight - footerElem.clientHeight, 0)
     } else {
-      this.footerHeight = 0
-      this.scrollbarHeight = Math.max(tableHeight - bodyElem.clientHeight, 0)
-      this.overflowX = tableWidth > bodyWidth
+      overflowX = tableWidth > bodyWidth
+      scrollbarHeight = Math.max(tableHeight - bodyElem.clientHeight, 0)
     }
+    this.footerHeight = footerHeight
+    this.overflowX = tableWidth > bodyWidth
+    this.scrollbarHeight = scrollbarHeight
     this.updateHeight()
     this.parentHeight = Math.max(this.headerHeight + this.footerHeight + 20, this.getParentHeight())
-    if (this.overflowX) {
+    if (overflowX) {
       this.checkScrolling()
     }
   },

package/packages/table/src/table.js

@@ -273,6 +273,7 @@ export default {
   data () {
     return {
       tId: `${XEUtils.uniqueId()}`,
+      isCalcColumn: false,
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -615,6 +616,10 @@ export default {
     customOpts () {
       return Object.assign({}, GlobalConfig.table.customConfig, this.customConfig)
     },
+    autoWidthColumnList () {
+      const { visibleColumn } = this
+      return visibleColumn.filter(column => column.width === 'auto')
+    },
     fixedColumnSize () {
       const { collectColumn } = this
       let fixedSize = 0
@@ -1022,6 +1027,7 @@ export default {
       _e,
       $scopedSlots,
       tId,
+      isCalcColumn,
       tableData,
       tableColumn,
       tableGroupColumn,
@@ -1075,6 +1081,7 @@ export default {
         '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/packages/tools/dom.js

@@ -159,7 +159,7 @@ export const DomTools = {
     const val = $xetable[key]
     let num = 0
     if (val) {
-      if (val === 'auto') {
+      if (val === '100%' || val === 'auto') {
         num = $xetable.parentHeight
       } else {
         const excludeHeight = $xetable.getExcludeHeight()

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

@@ -219,7 +219,7 @@ export default {
     MODAL_CLOSE: iconPrefix + 'close',
     MODAL_INFO: iconPrefix + 'info-circle-fill',
     MODAL_SUCCESS: iconPrefix + 'success-circle-fill',
-    MODAL_WARNING: iconPrefix + 'warnion-circle-fill',
+    MODAL_WARNING: iconPrefix + 'warning-circle-fill',
     MODAL_ERROR: iconPrefix + 'error-circle-fill',
     MODAL_QUESTION: iconPrefix + 'question-circle-fill',
     MODAL_LOADING: iconPrefix + 'spinner roll',

package/styles/table.scss

@@ -315,6 +315,20 @@
   }
 }
 
+/*列宽*/
+.vxe-table {
+  &.column--calc {
+    .vxe-header--column,
+    .vxe-body--column,
+    .vxe-footer--column {
+      .vxe-cell {
+        word-break: break-all;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
 /*header*/
 .vxe-table {
   .vxe-table--header-wrapper {
@@ -611,11 +625,6 @@
       }
     }
   }
-  &.checkbox--range {
-    .vxe-body--column {
-      user-select: none;
-    }
-  }
   &.cell--area {
     .vxe-table--body-wrapper,
     .vxe-body--column {
@@ -623,10 +632,17 @@
     }
   }
   &.drag--range {
-    .vxe-cell--checkbox {
+    .vxe-body--column {
       user-select: none;
     }
   }
+  &.checkbox--range {
+    .vxe-body--column {
+      &.col--checkbox {
+        user-select: none;
+      }
+    }
+  }
   .vxe-header--column,
   .vxe-body--column,
   .vxe-footer--column {