vxe-table 3.8.19 → 3.8.21

package/packages/table/src/methods.js

@@ -1250,6 +1250,11 @@ const Methods = {
     const fullColumnFieldData = this.fullColumnFieldData
     return fullColumnFieldData[field] ? fullColumnFieldData[field].column : null
   },
+  getParentColumn (fieldOrColumn) {
+    const fullColumnIdData = this.fullColumnIdData
+    const column = handleFieldOrColumn(this, fieldOrColumn)
+    return column && column.parentId && fullColumnIdData[column.parentId] ? fullColumnIdData[column.parentId].column : null
+  },
   /**
    * 获取当前表格的列
    * 收集到的全量列、全量表头列、处理条件之后的全量表头列、当前渲染中的表头列
@@ -2002,6 +2007,7 @@ const Methods = {
     const resizeList = []
     const pxList = []
     const pxMinList = []
+    const autoMinList = []
     const scaleList = []
     const scaleMinList = []
     const autoList = []
@@ -2024,6 +2030,8 @@ const Methods = {
           scaleList.push(column)
         } else if (DomTools.isPx(column.minWidth)) {
           pxMinList.push(column)
+        } else if (column.minWidth === 'auto') {
+          autoMinList.push(column)
         } else if (DomTools.isScale(column.minWidth)) {
           scaleMinList.push(column)
         } else {
@@ -2031,7 +2039,7 @@ const Methods = {
         }
       }
     })
-    Object.assign(this.columnStore, { resizeList, pxList, pxMinList, scaleList, scaleMinList, autoList, remainList })
+    Object.assign(this.columnStore, { resizeList, pxList, pxMinList, autoMinList, scaleList, scaleMinList, autoList, remainList })
   },
   /**
    * 刷新滚动操作，手动同步滚动相关位置（对于某些特殊的操作，比如滚动条错位、固定列不同步）
@@ -2102,11 +2110,11 @@ const Methods = {
             const cellStyle = getComputedStyle(firstCellEl)
             paddingSize = Math.floor(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight)) + 2
           }
-          let colWidth = column.renderAutoWidth - paddingSize + 2
+          let colWidth = column.renderAutoWidth - paddingSize
           XEUtils.arrayEach(cellElList, (cellEl) => {
             const labelEl = cellEl.firstChild
             if (labelEl) {
-              colWidth = Math.max(colWidth, labelEl.offsetWidth)
+              colWidth = Math.max(colWidth, Math.ceil(labelEl.offsetWidth) + 4)
             }
           })
           column.renderAutoWidth = colWidth + paddingSize
@@ -2133,13 +2141,19 @@ const Methods = {
     let remainWidth = bodyWidth
     let meanWidth = remainWidth / 100
     const { fit, columnStore } = this
-    const { resizeList, pxMinList, pxList, scaleList, scaleMinList, autoList, remainList } = columnStore
+    const { resizeList, pxMinList, pxList, autoMinList, scaleList, scaleMinList, autoList, remainList } = columnStore
     // 最小宽
     pxMinList.forEach(column => {
       const minWidth = parseInt(column.minWidth)
       tableWidth += minWidth
       column.renderWidth = minWidth
     })
+    // 最小自适应
+    autoMinList.forEach((column) => {
+      const scaleWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth))
+      tableWidth += scaleWidth
+      column.renderWidth = scaleWidth
+    })
     // 最小百分比
     scaleMinList.forEach(column => {
       const scaleWidth = Math.floor(parseInt(column.minWidth) * meanWidth)
@@ -2171,10 +2185,10 @@ const Methods = {
       column.renderWidth = width
     })
     remainWidth -= tableWidth
-    meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + remainList.length)) : 0
+    meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + autoMinList.length + remainList.length)) : 0
     if (fit) {
       if (remainWidth > 0) {
-        scaleMinList.concat(pxMinList).forEach(column => {
+        scaleMinList.concat(pxMinList).concat(autoMinList).forEach(column => {
           tableWidth += meanWidth
           column.renderWidth += meanWidth
         })
@@ -2193,7 +2207,7 @@ const Methods = {
        * 偏移量算法
        * 如果所有列足够放的情况下，从最后动态列开始分配
        */
-      const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(remainList)
+      const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList)
       let dynamicSize = dynamicList.length - 1
       if (dynamicSize > 0) {
         let odiffer = bodyWidth - tableWidth
@@ -2747,7 +2761,7 @@ const Methods = {
         const isUpArrow = keyCode === 38
         const isRightArrow = keyCode === 39
         const isDwArrow = keyCode === 40
-        const isDel = keyCode === 46
+        const hasDeleteKey = keyCode === 46
         const isF2 = keyCode === 113
         const isContextMenu = keyCode === 93
         const hasMetaKey = evnt.metaKey
@@ -2758,6 +2772,7 @@ const Methods = {
         const operCtxMenu = isCtxMenu && ctxMenuStore.visible && (isEnter || isSpacebar || operArrow)
         const isEditStatus = isEnableConf(editConfig) && actived.column && actived.row
         const childrenField = treeOpts.children || treeOpts.childrenField
+        const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
         let params
         if (filterStore.visible) {
           if (isEsc) {
@@ -2858,9 +2873,32 @@ const Methods = {
           } else if (actived.row || actived.column) {
             this.moveTabSelected(actived.args, hasShiftKey, evnt)
           }
-        } else if (keyboardConfig && (treeConfig || isEnableConf(editConfig)) && (isDel || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow ? hasBackspaceKey && keyboardOpts.isArrow : hasBackspaceKey))) {
+        } else if (keyboardConfig && keyboardOpts.isDel && hasDeleteKey && isEnableConf(editConfig) && (selected.row || selected.column)) {
+          // 如果是删除键
           if (!isEditStatus) {
-            const { delMethod, backMethod } = keyboardOpts
+            const { delMethod } = keyboardOpts
+            const delPaqrams = {
+              row: selected.row,
+              rowIndex: this.getRowIndex(selected.row),
+              column: selected.column,
+              columnIndex: this.getColumnIndex(selected.column),
+              $table: this
+            }
+            // 是否被禁用
+            if (!beforeEditMethod || beforeEditMethod(params)) {
+              if (delMethod) {
+                delMethod(delPaqrams)
+              } else {
+                setCellValue(selected.row, selected.column, null)
+              }
+              // 如果按下 del 键，更新表尾数据
+              this.updateFooter()
+              this.emitEvent('cell-delete-value', delPaqrams, evnt)
+            }
+          }
+        } else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && isEnableConf(editConfig) && (selected.row || selected.column)) {
+          if (!isEditStatus) {
+            const { backMethod } = keyboardOpts
             // 如果是删除键
             if (keyboardOpts.isDel && isEnableConf(editConfig) && (selected.row || selected.column)) {
               const delPaqrams = {
@@ -2870,12 +2908,8 @@ const Methods = {
                 columnIndex: this.getColumnIndex(selected.column),
                 $table: this
               }
-              if (delMethod) {
-                delMethod(delPaqrams)
-              } else {
-                setCellValue(selected.row, selected.column, null)
-              }
-              if (hasBackspaceKey) {
+              // 是否被禁用
+              if (!beforeEditMethod || beforeEditMethod(params)) {
                 if (backMethod) {
                   backMethod({
                     row: selected.row,
@@ -2885,25 +2919,28 @@ const Methods = {
                     $table: this
                   })
                 } else {
+                  setCellValue(selected.row, selected.column, null)
                   this.handleActived(selected.args, evnt)
                 }
-              } else if (isDel) {
-                // 如果按下 del 键，更新表尾数据
-                this.updateFooter()
-              }
-              this.emitEvent('cell-delete-value', delPaqrams, evnt)
-            } else if (hasBackspaceKey && keyboardOpts.isArrow && treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
-              // 如果树形表格回退键关闭当前行返回父节点
-              const { parent: parentRow } = XEUtils.findTree(this.afterFullData, item => item === currentRow, { children: childrenField })
-              if (parentRow) {
-                evnt.preventDefault()
-                params = { $table: this, row: parentRow }
-                this.setTreeExpand(parentRow, false)
-                  .then(() => this.scrollToRow(parentRow))
-                  .then(() => this.triggerCurrentRowEvent(evnt, params))
+                this.emitEvent('cell-backspace-value', delPaqrams, evnt)
               }
             }
           }
+        } else if (hasBackspaceKey && keyboardConfig && treeConfig && keyboardOpts.isBack && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
+          // 如果树形表格回退键关闭当前行返回父节点
+          const { parent: parentRow } = XEUtils.findTree(this.afterTreeFullData, item => item === currentRow, { children: childrenField })
+          if (parentRow) {
+            evnt.preventDefault()
+            params = {
+              $table: this,
+              row: parentRow,
+              rowIndex: this.getRowIndex(parentRow),
+              $rowIndex: this.getVMRowIndex(parentRow)
+            }
+            this.setTreeExpand(parentRow, false)
+              .then(() => this.scrollToRow(parentRow))
+              .then(() => this.triggerCurrentRowEvent(evnt, params))
+          }
         } else if (keyboardConfig && keyboardOpts.isEdit && !hasCtrlKey && !hasMetaKey && (isSpacebar || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 111) || (keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222))) {
           const { editMethod } = keyboardOpts
           // 启用编辑后，空格键功能将失效

package/packages/table/src/table.js

@@ -382,6 +382,7 @@ export default {
         resizeList: [],
         pxList: [],
         pxMinList: [],
+        autoMinList: [],
         scaleList: [],
         scaleMinList: [],
         autoList: [],
@@ -628,8 +629,8 @@ export default {
       return Object.assign({}, GlobalConfig.table.customConfig, this.customConfig)
     },
     autoWidthColumnList () {
-      const { visibleColumn } = this
-      return visibleColumn.filter(column => column.width === 'auto')
+      const { tableColumn, visibleColumn } = this
+      return tableColumn.length || visibleColumn.length ? visibleColumn.filter(column => column.width === 'auto' || column.minWidth === 'auto') : []
     },
     fixedColumnSize () {
       const { collectColumn } = this
@@ -1109,6 +1110,9 @@ export default {
         'is--virtual-x': scrollXLoad,
         'is--virtual-y': scrollYLoad
       }],
+      attrs: {
+        spellcheck: false
+      },
       on: {
         keydown: this.keydownEvent
       }

package/packages/textarea/src/textarea.js

@@ -104,7 +104,10 @@ export default {
         'is--disabled': disabled,
         'def--rows': !XEUtils.eqNull(rows),
         'def--cols': !XEUtils.eqNull(cols)
-      }]
+      }],
+      attrs: {
+        spellcheck: false
+      }
     }, [
       h('textarea', {
         ref: 'textarea',

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

@@ -318,7 +318,8 @@ export default {
     tooltipConfig: {
       enterable: true
     },
-    titleAsterisk: true
+    titleAsterisk: true,
+    padding: true
   },
   input: {
     // size: null,

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

@@ -665,25 +665,25 @@ function oldFormItemRadioAndCheckboxRender (h, renderOpts, params) {
  */
 const renderMap = {
   input: {
-    autofocus: 'input',
-    renderEdit: nativeEditRender,
-    renderDefault: nativeEditRender,
-    renderFilter: nativeFilterRender,
-    defaultFilterMethod: handleInputFilterMethod,
-    renderItemContent: nativeItemRender
+    tableAutofocus: 'input',
+    renderTableEdit: nativeEditRender,
+    renderTableDefault: nativeEditRender,
+    renderTableFilter: nativeFilterRender,
+    defaultTableFilterMethod: handleInputFilterMethod,
+    renderFormItemContent: nativeItemRender
   },
   textarea: {
-    autofocus: 'textarea',
-    renderEdit: nativeEditRender,
-    renderItemContent: nativeItemRender
+    tableAutofocus: 'textarea',
+    renderTableEdit: nativeEditRender,
+    renderFormItemContent: nativeItemRender
   },
   select: {
-    renderEdit: nativeSelectEditRender,
-    renderDefault: nativeSelectEditRender,
-    renderCell (h, renderOpts, params) {
+    renderTableEdit: nativeSelectEditRender,
+    renderTableDefault: nativeSelectEditRender,
+    renderTableCell (h, renderOpts, params) {
       return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params))
     },
-    renderFilter (h, renderOpts, params) {
+    renderTableFilter (h, renderOpts, params) {
       const { column } = params
       return column.filters.map((option, oIndex) => {
         return h('select', {
@@ -695,8 +695,8 @@ const renderMap = {
         renderOpts.optionGroups ? renderNativeOptgroups(h, renderOpts, params, renderNativeOptions) : renderNativeOptions(h, renderOpts.options, renderOpts, params))
       })
     },
-    defaultFilterMethod: handleFilterMethod,
-    renderItemContent (h, renderOpts, params) {
+    defaultTableFilterMethod: handleFilterMethod,
+    renderFormItemContent (h, renderOpts, params) {
       return [
         h('select', {
           class: 'vxe-default-select',
@@ -706,12 +706,12 @@ const renderMap = {
         renderOpts.optionGroups ? renderNativeOptgroups(h, renderOpts, params, renderNativeFormOptions) : renderNativeFormOptions(h, renderOpts.options, renderOpts, params))
       ]
     },
-    cellExportMethod: handleExportSelectMethod
+    tableExportMethod: handleExportSelectMethod
   },
   VxeInput: {
-    autofocus: '.vxe-input--inner',
-    renderEdit: defaultEditRender,
-    renderCell (h, renderOpts, params) {
+    tableAutofocus: '.vxe-input--inner',
+    renderTableEdit: defaultEditRender,
+    renderTableCell (h, renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
       const digits = props.digits || GlobalConfig.input.digits
@@ -732,22 +732,22 @@ const renderMap = {
       }
       return getCellLabelVNs(h, renderOpts, params, cellValue)
     },
-    renderDefault: defaultEditRender,
-    renderFilter: defaultFilterRender,
-    defaultFilterMethod: handleInputFilterMethod,
-    renderItemContent: defaultItemRender
+    renderTableDefault: defaultEditRender,
+    renderTableFilter: defaultFilterRender,
+    defaultTableFilterMethod: handleInputFilterMethod,
+    renderFormItemContent: defaultItemRender
   },
   VxeTextarea: {
-    autofocus: '.vxe-textarea--inner',
-    renderItemContent: defaultItemRender
+    tableAutofocus: '.vxe-textarea--inner',
+    renderFormItemContent: defaultItemRender
   },
   VxeButton: {
-    renderDefault: defaultCellRender,
-    renderItemContent: defaultFormItemRender
+    renderTableDefault: defaultCellRender,
+    renderFormItemContent: defaultFormItemRender
   },
   VxeButtonGroup: {
-    renderDefault: defaultCellRender,
-    renderItemContent (h, renderOpts, params) {
+    renderTableDefault: defaultCellRender,
+    renderFormItemContent (h, renderOpts, params) {
       const { options } = renderOpts
       const { data, property } = params
       const itemValue = XEUtils.get(data, property)
@@ -761,13 +761,13 @@ const renderMap = {
     }
   },
   VxeSelect: {
-    autofocus: '.vxe-input--inner',
-    renderEdit: defaultSelectEditRender,
-    renderDefault: defaultSelectEditRender,
-    renderCell (h, renderOpts, params) {
+    tableAutofocus: '.vxe-input--inner',
+    renderTableEdit: defaultSelectEditRender,
+    renderTableDefault: defaultSelectEditRender,
+    renderTableCell (h, renderOpts, params) {
       return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params))
     },
-    renderFilter (h, renderOpts, params) {
+    renderTableFilter (h, renderOpts, params) {
       const { column } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
       const nativeOn = getNativeOns(renderOpts, params)
@@ -781,8 +781,8 @@ const renderMap = {
         })
       })
     },
-    defaultFilterMethod: handleFilterMethod,
-    renderItemContent (h, renderOpts, params) {
+    defaultTableFilterMethod: handleFilterMethod,
+    renderFormItemContent (h, renderOpts, params) {
       const { data, property } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
       const itemValue = XEUtils.get(data, property)
@@ -794,36 +794,36 @@ const renderMap = {
         })
       ]
     },
-    cellExportMethod: handleExportSelectMethod
+    tableExportMethod: handleExportSelectMethod
   },
   VxeRadio: {
-    autofocus: '.vxe-radio--input',
-    renderItemContent: defaultFormItemRender
+    tableAutofocus: '.vxe-radio--input',
+    renderFormItemContent: defaultFormItemRender
   },
   VxeRadioGroup: {
-    autofocus: '.vxe-radio--input',
-    renderItemContent: formItemRadioAndCheckboxRender
+    tableAutofocus: '.vxe-radio--input',
+    renderFormItemContent: formItemRadioAndCheckboxRender
   },
   VxeCheckbox: {
-    autofocus: '.vxe-checkbox--input',
-    renderItemContent: defaultFormItemRender
+    tableAutofocus: '.vxe-checkbox--input',
+    renderFormItemContent: defaultFormItemRender
   },
   VxeCheckboxGroup: {
-    autofocus: '.vxe-checkbox--input',
-    renderItemContent: formItemRadioAndCheckboxRender
+    tableAutofocus: '.vxe-checkbox--input',
+    renderFormItemContent: formItemRadioAndCheckboxRender
   },
   VxeSwitch: {
-    autofocus: '.vxe-switch--button',
-    renderEdit: defaultEditRender,
-    renderDefault: defaultEditRender,
-    renderItemContent: defaultItemRender
+    tableAutofocus: '.vxe-switch--button',
+    renderTableEdit: defaultEditRender,
+    renderTableDefault: defaultEditRender,
+    renderFormItemContent: defaultItemRender
   },
 
   // 以下已废弃
   $input: {
-    autofocus: '.vxe-input--inner',
-    renderEdit: oldEditRender,
-    renderCell (h, renderOpts, params) {
+    tableAutofocus: '.vxe-input--inner',
+    renderTableEdit: oldEditRender,
+    renderTableCell (h, renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
       const digits = props.digits || GlobalConfig.input.digits
@@ -843,31 +843,31 @@ const renderMap = {
       }
       return getCellLabelVNs(h, renderOpts, params, cellValue)
     },
-    renderDefault: oldEditRender,
-    renderFilter: oldFilterRender,
-    defaultFilterMethod: handleInputFilterMethod,
-    renderItemContent: oldItemRender
+    renderTableDefault: oldEditRender,
+    renderTableFilter: oldFilterRender,
+    defaultTableFilterMethod: handleInputFilterMethod,
+    renderFormItemContent: oldItemRender
   },
   $textarea: {
-    autofocus: '.vxe-textarea--inner',
-    renderItemContent: oldItemRender
+    tableAutofocus: '.vxe-textarea--inner',
+    renderFormItemContent: oldItemRender
   },
   $button: {
-    renderDefault: oldButtonEditRender,
-    renderItemContent: oldButtonItemRender
+    renderTableDefault: oldButtonEditRender,
+    renderFormItemContent: oldButtonItemRender
   },
   $buttons: {
-    renderDefault: oldButtonsEditRender,
-    renderItemContent: oldButtonsItemRender
+    renderTableDefault: oldButtonsEditRender,
+    renderFormItemContent: oldButtonsItemRender
   },
   $select: {
-    autofocus: '.vxe-input--inner',
-    renderEdit: oldSelectEditRender,
-    renderDefault: oldSelectEditRender,
-    renderCell (h, renderOpts, params) {
+    tableAutofocus: '.vxe-input--inner',
+    renderTableEdit: oldSelectEditRender,
+    renderTableDefault: oldSelectEditRender,
+    renderTableCell (h, renderOpts, params) {
       return getCellLabelVNs(h, renderOpts, params, getSelectCellValue(renderOpts, params))
     },
-    renderFilter (h, renderOpts, params) {
+    renderTableFilter (h, renderOpts, params) {
       const { column } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
       const nativeOn = getNativeOns(renderOpts, params)
@@ -881,8 +881,8 @@ const renderMap = {
         })
       })
     },
-    defaultFilterMethod: handleFilterMethod,
-    renderItemContent (h, renderOpts, params) {
+    defaultTableFilterMethod: handleFilterMethod,
+    renderFormItemContent (h, renderOpts, params) {
       const { data, property } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
       const itemValue = XEUtils.get(data, property)
@@ -894,21 +894,21 @@ const renderMap = {
         })
       ]
     },
-    cellExportMethod: handleExportSelectMethod
+    tableExportMethod: handleExportSelectMethod
   },
   $radio: {
-    autofocus: '.vxe-radio--input',
-    renderItemContent: oldFormItemRadioAndCheckboxRender
+    tableAutofocus: '.vxe-radio--input',
+    renderFormItemContent: oldFormItemRadioAndCheckboxRender
   },
   $checkbox: {
-    autofocus: '.vxe-checkbox--input',
-    renderItemContent: oldFormItemRadioAndCheckboxRender
+    tableAutofocus: '.vxe-checkbox--input',
+    renderFormItemContent: oldFormItemRadioAndCheckboxRender
   },
   $switch: {
-    autofocus: '.vxe-switch--button',
-    renderEdit: oldEditRender,
-    renderDefault: oldEditRender,
-    renderItemContent: oldItemRender
+    tableAutofocus: '.vxe-switch--button',
+    renderTableEdit: oldEditRender,
+    renderTableDefault: oldEditRender,
+    renderFormItemContent: oldItemRender
   }
   // 以上已废弃
 }

package/styles/form.scss

@@ -119,10 +119,6 @@
   }
   .vxe-form--item {
     display: none;
-    padding: 0.5em 0.8em 0.5em 0;
-    &.is--vertical {
-      padding: 0.25em 0 0.25em 0;
-    }
     &.is--active {
       &:not(.is--hidden) {
         display: inline-flex;
@@ -132,6 +128,12 @@
 }
 
 .vxe-form--item {
+  &.is--padding {
+    padding: 0.6em;
+    &.is--vertical {
+      padding: 0.4em 0.6em;
+    }
+  }
   &.is--colon {
     .vxe-form--item-title-postfix {
       &:after {