vxe-table 4.9.28 → 4.9.30

package/packages/locale/lang/vi-VN.ts

@@ -289,6 +289,9 @@ export default {
         }
       }
     },
+    numberInput: {
+      currencySymbol: '$'
+    },
     imagePreview: {
       popupTitle: '预览',
       operBtn: {

package/packages/locale/lang/zh-CHT.ts

@@ -289,6 +289,9 @@ export default {
         }
       }
     },
+    numberInput: {
+      currencySymbol: '￥'
+    },
     imagePreview: {
       popupTitle: '預覽',
       operBtn: {

package/packages/locale/lang/zh-CN.ts

@@ -289,6 +289,9 @@ export default {
         }
       }
     },
+    numberInput: {
+      currencySymbol: '￥'
+    },
     imagePreview: {
       popupTitle: '预览',
       operBtn: {

package/packages/table/module/export/hook.ts

@@ -16,7 +16,7 @@ const csvBOM = '\ufeff'
 const enterSymbol = '\r\n'
 
 function defaultFilterExportColumn (column: any) {
-  return column.property || ['seq', 'checkbox', 'radio'].indexOf(column.type) > -1
+  return column.field || ['seq', 'checkbox', 'radio'].indexOf(column.type) > -1
 }
 
 const getConvertColumns = (columns: any) => {
@@ -271,7 +271,7 @@ function clearColumnConvert (columns: any) {
 function checkImportData (columns: any[], fields: string[]) {
   const tableFields: string[] = []
   columns.forEach((column) => {
-    const field = column.property
+    const field = column.field
     if (field) {
       tableFields.push(field)
     }
@@ -313,7 +313,7 @@ hooks.add('tableExportModule', {
     function getHeaderTitle (opts: any, column: any) {
       const columnOpts = computeColumnOpts.value
       const headExportMethod = column.headerExportMethod || columnOpts.headerExportMethod
-      return headExportMethod ? headExportMethod({ column, options: opts, $table: $xeTable }) : ((opts.original ? column.property : column.getTitle()) || '')
+      return headExportMethod ? headExportMethod({ column, options: opts, $table: $xeTable }) : ((opts.original ? column.field : column.getTitle()) || '')
     }
 
     const toBooleanValue = (cellValue: any) => {
@@ -414,7 +414,7 @@ hooks.add('tableExportModule', {
           if (!bodyExportMethod && renderOpts && renderOpts.name) {
             const compConf = renderer.get(renderOpts.name)
             if (compConf) {
-              bodyExportMethod = compConf.exportMethod
+              bodyExportMethod = compConf.tableExportMethod || compConf.exportMethod
             }
           }
           if (bodyExportMethod) {
@@ -995,13 +995,13 @@ hooks.add('tableExportModule', {
               } else {
                 const colid = item.id || item.colId
                 const type = item.type
-                const field = item.property || item.field
+                const field = item.field
                 if (colid) {
                   return column.id === colid
                 } else if (field && type) {
-                  return column.property === field && column.type === type
+                  return column.field === field && column.type === type
                 } else if (field) {
-                  return column.property === field
+                  return column.field === field
                 } else if (type) {
                   return column.type === type
                 }
@@ -1059,7 +1059,7 @@ hooks.add('tableExportModule', {
         const { tableFullColumn, afterFullData } = internalData
         const exportOpts = computeExportOpts.value
         const treeOpts = computeTreeOpts.value
-        const opts: any = Object.assign({
+        const opts = Object.assign({
           // filename: '',
           // sheetName: '',
           // original: false,
@@ -1083,16 +1083,29 @@ hooks.add('tableExportModule', {
         }, exportOpts, {
           print: false
         }, options)
-        const { type, mode, columns, original, beforeExportMethod } = opts
+        const { type, mode, columns, original, beforeExportMethod, includeFields, excludeFields } = opts
         let groups: any[] = []
         const customCols = columns && columns.length ? columns : null
         let columnFilterMethod = opts.columnFilterMethod
         // 如果设置源数据，则默认导出设置了字段的列
         if (!customCols && !columnFilterMethod) {
-          columnFilterMethod = original ? ({ column }: any) => column.property : ({ column }: any) => defaultFilterExportColumn(column)
+          columnFilterMethod = ({ column }) => {
+            if (excludeFields) {
+              if (XEUtils.includes(excludeFields, column.field)) {
+                return false
+              }
+            }
+            if (includeFields) {
+              if (XEUtils.includes(includeFields, column.field)) {
+                return true
+              }
+              return false
+            }
+            return original ? column.field : defaultFilterExportColumn(column)
+          }
         }
         if (customCols) {
-          opts._isCustomColumn = true
+          (opts as any)._isCustomColumn = true
           groups = XEUtils.searchTree(
             XEUtils.mapTree(customCols, (item: any) => {
               let targetColumn
@@ -1104,11 +1117,11 @@ hooks.add('tableExportModule', {
                 } else {
                   const colid = item.id || item.colId
                   const type = item.type
-                  const field = item.property || item.field
+                  const field = item.field
                   if (colid) {
                     targetColumn = $xeTable.getColumnById(colid)
                   } else if (field && type) {
-                    targetColumn = tableFullColumn.find((column: any) => column.property === field && column.type === type)
+                    targetColumn = tableFullColumn.find((column: any) => column.field === field && column.type === type)
                   } else if (field) {
                     targetColumn = $xeTable.getColumnByField(field)
                   } else if (type) {
@@ -1141,7 +1154,7 @@ hooks.add('tableExportModule', {
         }, { children: 'childNodes' })
         // 构建分组层级
         opts.columns = cols
-        opts.colgroups = convertToRows(groups)
+        ;(opts as any).colgroups = convertToRows(groups)
         if (!opts.filename) {
           opts.filename = getI18n(opts.original ? 'vxe.table.expOriginFilename' : 'vxe.table.expFilename', [XEUtils.toDateString(Date.now(), 'yyyyMMddHHmmss')])
         }
@@ -1163,7 +1176,7 @@ hooks.add('tableExportModule', {
 
         if (!opts.print) {
           if (beforeExportMethod) {
-            beforeExportMethod({ options: opts, $table: $xeTable, $grid: $xeGrid })
+            beforeExportMethod({ options: opts, $table: $xeTable, $grid: $xeGrid } as any)
           }
         }
         if (!opts.data) {

package/packages/table/render/index.ts

@@ -578,7 +578,8 @@ renderer.mixin({
     renderTableCell (renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
-      const digits = props.digits || getConfig().input?.digits || 2
+      const inputConfig = getConfig().input || {}
+      const digits = props.digits || inputConfig.digits || 2
       let cellValue = XEUtils.get(row, column.field)
       if (cellValue) {
         switch (props.type) {
@@ -609,12 +610,17 @@ renderer.mixin({
       const { type } = props
       let cellValue = XEUtils.get(row, column.field)
       if (cellValue) {
+        const numberInputConfig = getConfig().numberInput || {}
         if (type === 'float') {
-          const digits = props.digits || getConfig().numberInput.digits || 1
+          const digits = props.digits || numberInputConfig.digits || 1
           cellValue = XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits)
         } else if (type === 'amount') {
-          const digits = props.digits || getConfig().numberInput.digits || 2
+          const digits = props.digits || numberInputConfig.digits || 2
           cellValue = XEUtils.commafy(XEUtils.toNumber(cellValue), { digits })
+          const showCurrency = props.showCurrency
+          if (XEUtils.isBoolean(showCurrency) ? showCurrency : numberInputConfig.showCurrency) {
+            cellValue = `${props.currencySymbol || numberInputConfig.currencySymbol || getI18n('vxe.numberInput.currencySymbol') || ''}${cellValue}`
+          }
         }
       }
       return getCellLabelVNs(renderOpts, params, cellValue)
@@ -626,11 +632,12 @@ renderer.mixin({
       // 兼容老模式
       const cellValue = XEUtils.isArray(row) ? row[_columnIndex] : XEUtils.get(row, column.field)
       if (XEUtils.isNumber(cellValue)) {
+        const numberInputConfig = getConfig().numberInput || {}
         if (type === 'float') {
-          const digits = props.digits || getConfig().numberInput.digits || 1
+          const digits = props.digits || numberInputConfig.digits || 1
           return XEUtils.toFixed(XEUtils.floor(cellValue, digits), digits)
         } else if (type === 'amount') {
-          const digits = props.digits || getConfig().numberInput.digits || 2
+          const digits = props.digits || numberInputConfig.digits || 2
           return XEUtils.commafy(XEUtils.toNumber(cellValue), { digits })
         }
       }
@@ -638,7 +645,12 @@ renderer.mixin({
     },
     renderTableDefault: defaultEditRender,
     renderTableFilter: defaultFilterRender,
-    tableFilterDefaultMethod: handleInputFilterMethod
+    tableFilterDefaultMethod: handleInputFilterMethod,
+    tableExportMethod (params) {
+      const { row, column } = params
+      const cellValue = XEUtils.get(row, column.field)
+      return cellValue
+    }
   },
   VxeDatePicker: {
     tableAutoFocus: 'input',

package/packages/table/src/body.ts

@@ -36,7 +36,7 @@ export default defineComponent({
 
     const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable
     const { refTableBody, refTableHeader, refTableFooter, refTableLeftBody, refTableRightBody, refScrollXHandleElem, refScrollYHandleElem } = $xeTable.getRefMaps()
-    const { computeEditOpts, computeMouseOpts, computeAreaOpts, computeSYOpts, computeEmptyOpts, computeKeyboardOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeMouseOpts, computeAreaOpts, computeSYOpts, computeEmptyOpts, computeKeyboardOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refBodyTable = ref() as Ref<HTMLTableElement>
@@ -363,6 +363,7 @@ export default defineComponent({
           )
         }
       }
+      const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
 
       return h('td', {
         class: [
@@ -376,6 +377,7 @@ export default defineComponent({
             'col--tree-node': treeNode,
             'col--edit': isEdit,
             'col--ellipsis': hasEllipsis,
+            'fixed--width': !isAutoCellWidth,
             'fixed--hidden': fixedHiddenColumn,
             'is--drag-cell': isColDragCell,
             'is--drag-disabled': isDisabledDrag,
@@ -407,6 +409,7 @@ export default defineComponent({
       const editOpts = computeEditOpts.value
       const rowOpts = computeRowOpts.value
       const columnOpts = computeColumnOpts.value
+      const columnDragOpts = computeColumnDragOpts.value
       const { transform, seqMode } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       const rows: any[] = []
@@ -483,7 +486,7 @@ export default defineComponent({
           return renderColumn(seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
         })
         rows.push(
-          columnOpts.drag
+          columnOpts.drag && columnDragOpts.animation
             ? h(TransitionGroup, {
               name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
               tag: 'tr',
@@ -769,7 +772,7 @@ export default defineComponent({
       const emptyOpts = computeEmptyOpts.value
       const keyboardOpts = computeKeyboardOpts.value
       const mouseOpts = computeMouseOpts.value
-      const columnOpts = computeColumnOpts.value
+      const rowDragOpts = computeRowDragOpts.value
       // const isMergeLeftFixedExceeded = computeIsMergeLeftFixedExceeded.value
       // const isMergeRightFixedExceeded = computeIsMergeRightFixedExceeded.value
       // 如果是使用优化模式
@@ -852,7 +855,7 @@ export default defineComponent({
           /**
            * 内容
            */
-          rowOpts.drag || columnOpts.drag
+          rowOpts.drag && rowDragOpts.animation
             ? h(TransitionGroup, {
               ref: refBodyTBody,
               name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`,

package/packages/table/src/footer.ts

@@ -48,7 +48,7 @@ export default defineComponent({
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
     const { refTableHeader, refTableBody, refScrollXHandleElem } = $xeTable.getRefMaps()
-    const { computeTooltipOpts, computeColumnOpts } = $xeTable.getComputeMaps()
+    const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refFooterTable = ref() as Ref<HTMLTableElement>
@@ -193,11 +193,14 @@ export default defineComponent({
             attrs.colspan = colspan
           }
         }
+        const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
+
         return h('td', {
           class: ['vxe-footer--column', column.id, {
             [`col--${footAlign}`]: footAlign,
             [`col--${type}`]: type,
             'col--last': $columnIndex === tableColumn.length - 1,
+            'fixed--width': !isAutoCellWidth,
             'fixed--hidden': fixedHiddenColumn,
             'col--ellipsis': hasEllipsis,
             'col--current': currentColumn === column
@@ -230,12 +233,13 @@ export default defineComponent({
       const { footerRowClassName, footerRowStyle } = tableProps
       const { isDragColMove } = tableReactData
       const columnOpts = computeColumnOpts.value
+      const columnDragOpts = computeColumnDragOpts.value
 
       return footerTableData.map((row, $rowIndex) => {
         const _rowIndex = $rowIndex
         const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType }
 
-        if (columnOpts.drag) {
+        if (columnOpts.drag && columnDragOpts.animation) {
           return h(TransitionGroup, {
             name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
             tag: 'tr',

package/packages/table/src/header.ts

@@ -219,6 +219,8 @@ export default defineComponent({
             thOns.onMouseup = $xeTable.handleHeaderCellDragMouseupEvent
           }
         }
+        const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto')
+
         return h('th', {
           class: ['vxe-header--column', colid, {
             [`col--${headAlign}`]: headAlign,
@@ -227,6 +229,7 @@ export default defineComponent({
             'col--fixed': column.fixed,
             'col--group': isColGroup,
             'col--ellipsis': hasEllipsis,
+            'fixed--width': !isAutoCellWidth,
             'fixed--hidden': fixedHiddenColumn,
             'is--sortable': column.sortable,
             'col--filter': !!column.filters,
@@ -276,11 +279,12 @@ export default defineComponent({
       const { headerRowClassName, headerRowStyle } = tableProps
       const { isDragColMove } = tableReactData
       const columnOpts = computeColumnOpts.value
+      const columnDragOpts = computeColumnDragOpts.value
 
       return headerGroups.map((cols, $rowIndex) => {
         const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: renderType }
 
-        if (columnOpts.drag) {
+        if (columnOpts.drag && columnDragOpts.animation) {
           return h(TransitionGroup, {
             name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
             tag: 'tr',

package/packages/ui/index.ts

@@ -48,10 +48,12 @@ VxeUI.setConfig({
       strict: true
     },
     rowDragConfig: {
-      showIcon: true
+      showIcon: true,
+      animation: true
     },
     columnDragConfig: {
-      showIcon: true
+      showIcon: true,
+      animation: true
     },
     checkboxConfig: {
       // trigger: 'default',

package/styles/components/table.scss

@@ -60,6 +60,96 @@
 }
 
 /*默认的渲染*/
+.vxe-header--column,
+.vxe-footer--column {
+  &.fixed--width {
+    & > .vxe-cell {
+      .vxe-default-input,
+      .vxe-default-textarea,
+      .vxe-default-select {
+        width: 100%;
+      }
+      .vxe-input,
+      .vxe-textarea,
+      .vxe-select,
+      .vxe-tree-select,
+      .vxe-date-picker,
+      .vxe-number-input,
+      .vxe-ico-picker {
+        width: 100%;
+      }
+      .vxe-cell--tree-node {
+        .vxe-input,
+        .vxe-textarea,
+        .vxe-select,
+        .vxe-tree-select,
+        .vxe-date-picker,
+        .vxe-number-input,
+        .vxe-ico-picker {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+.vxe-body--column {
+  &.fixed--width {
+    & > .vxe-cell {
+      & > .vxe-default-input,
+      & > .vxe-default-textarea,
+      & > .vxe-default-select {
+        width: 100%;
+      }
+      & > .vxe-input,
+      & > .vxe-textarea,
+      & > .vxe-select,
+      & > .vxe-tree-select,
+      & > .vxe-date-picker,
+      & > .vxe-number-input,
+      & > .vxe-ico-picker {
+        width: 100%;
+      }
+      & > .vxe-cell--tree-node {
+        .vxe-input,
+        .vxe-textarea,
+        .vxe-select,
+        .vxe-tree-select,
+        .vxe-date-picker,
+        .vxe-number-input,
+        .vxe-ico-picker {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+.vxe-table--filter-template {
+  & > .vxe-default-input,
+  & > .vxe-default-textarea,
+  & > .vxe-default-select {
+    width: 100%;
+  }
+  & > .vxe-input,
+  & > .vxe-textarea,
+  & > .vxe-select,
+  & > .vxe-tree-select,
+  & > .vxe-date-picker,
+  & > .vxe-number-input,
+  & > .vxe-ico-picker {
+    width: 100%;
+  }
+  & > .vxe-cell--tree-node {
+    .vxe-input,
+    .vxe-textarea,
+    .vxe-select,
+    .vxe-tree-select,
+    .vxe-date-picker,
+    .vxe-number-input,
+    .vxe-ico-picker {
+      width: 100%;
+    }
+  }
+}
 .vxe-cell,
 .vxe-table--filter-template {
   .vxe-default-input,
@@ -71,7 +161,6 @@
   .vxe-default-select {
     outline: 0;
     padding: 0 2px;
-    width: 100%;
     color: var(--vxe-ui-font-color);
     border-radius: var(--vxe-ui-border-radius);
     border: 1px solid var(--vxe-ui-input-border-color);
@@ -107,15 +196,6 @@
       height: var(--vxe-ui-input-height-default);
     }
   }
-  & > .vxe-input,
-  & > .vxe-textarea,
-  & > .vxe-select,
-  & > .vxe-tree-select,
-  & > .vxe-date-picker,
-  & > .vxe-number-input,
-  & > .vxe-ico-picker {
-    width: 100%;
-  }
   & > .vxe-input > .vxe-input--inner,
   & > .vxe-textarea > .vxe-textarea--inner {
     padding: 0 2px;
@@ -125,15 +205,6 @@
     resize: none;
   }
   & > .vxe-cell--tree-node {
-    .vxe-input,
-    .vxe-textarea,
-    .vxe-select,
-    .vxe-tree-select,
-    .vxe-date-picker,
-    .vxe-number-input,
-    .vxe-ico-picker {
-      width: 100%;
-    }
     .vxe-input > .vxe-input--inner,
     .vxe-textarea > .vxe-textarea--inner {
       padding: 0 2px;