vxe-table 3.8.10 → 3.8.12

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-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
+            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
@@ -2978,7 +3020,7 @@ const Methods = {
       tooltipStore.row = null
       tooltipStore.column = column
       tooltipStore.visible = true
-      // tooltipStore.currOpts = { content: null }
+      tooltipStore.currOpts = iconParams
       this.$nextTick(() => {
         const $tooltip = $refs.tooltip
         if ($tooltip) {
@@ -3064,7 +3106,8 @@ const Methods = {
       Object.assign(tooltipStore, {
         row,
         column,
-        visible: true
+        visible: true,
+        currOpts: {}
       })
       this.$nextTick(() => {
         const $tooltip = $refs.tooltip
@@ -3095,7 +3138,8 @@ const Methods = {
         row: null,
         column: null,
         content: null,
-        visible: false
+        visible: false,
+        currOpts: {}
       })
       if (tooltip) {
         tooltip.close()

package/packages/table/src/table.js

@@ -273,6 +273,7 @@ export default {
   data () {
     return {
       tId: `${XEUtils.uniqueId()}`,
+      isCalcColumn: false,
       // 低性能的静态列
       staticColumns: [],
       // 渲染的列分组
@@ -432,7 +433,8 @@ export default {
       tooltipStore: {
         row: null,
         column: null,
-        visible: false
+        visible: false,
+        currOpts: {}
       },
       // 存放数据校验相关信息
       validStore: {
@@ -614,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
@@ -1021,6 +1027,7 @@ export default {
       _e,
       $scopedSlots,
       tId,
+      isCalcColumn,
       tableData,
       tableColumn,
       tableGroupColumn,
@@ -1074,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,
@@ -1254,7 +1262,7 @@ export default {
        */
       hasTip ? h('vxe-tooltip', {
         ref: 'tooltip',
-        props: this.tipConfig
+        props: Object.assign({}, this.tipConfig, this.tooltipStore.currOpts)
       }) : _e(),
       /**
        * 校验提示

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,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 {
@@ -611,12 +624,6 @@
       }
     }
   }
-  &.checkbox--range,
-  &.cell--selected {
-    .vxe-body--column {
-      user-select: none;
-    }
-  }
   &.cell--area {
     .vxe-table--body-wrapper,
     .vxe-body--column {
@@ -624,10 +631,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 {