vxe-table 3.9.0-rc.2 → 3.9.0-rc.21

package/packages/table/index.ts

@@ -1,18 +1,41 @@
-import { VueConstructor } from 'vue'
+import Vue, { VueConstructor } from 'vue'
 import { VxeUI } from '../ui'
 import VxeTableComponent from './src/table'
 import './render'
 
+let isReg = false
+
 export const VxeTable = Object.assign({}, VxeTableComponent, {
   install (app: VueConstructor) {
+    if (typeof window !== 'undefined' && (window as any).VXETableMixin) {
+      VxeTableComponent.mixins.push((window as any).VXETableMixin)
+      delete (window as any).VXETableMixin
+    }
+    // 兼容老版本
+    if (typeof window !== 'undefined' && (window as any).VxeTableExtendCellArea && (window as any).VxeTableExtendCellArea.init) {
+      (window as any).VxeTableExtendCellArea.init(VxeUI)
+      delete (window as any).VxeTableExtendCellArea
+      delete (window as any).VXETablePro
+    } else if (typeof window !== 'undefined' && (window as any).VXETablePro && (window as any).VXETablePro.init) {
+      (window as any).VXETablePro.init(VxeUI)
+      delete (window as any).VXETablePro
+    }
+    if (!Vue.prototype.$vxe) {
+      Vue.prototype.$vxe = { t: VxeUI.t, _t: VxeUI._t }
+    } else {
+      Vue.prototype.$vxe.t = VxeUI.t
+      Vue.prototype.$vxe._t = VxeUI._t
+    }
+    if (!isReg) {
+      isReg = true
+      if (VxeUI.dynamicApp) {
+        VxeUI.dynamicApp.component(VxeTableComponent.name as string, VxeTableComponent)
+      }
+    }
     app.component(VxeTableComponent.name as string, VxeTableComponent)
   }
 })
 
-if (VxeUI.dynamicApp) {
-  VxeUI.dynamicApp.component(VxeTableComponent.name as string, VxeTableComponent)
-}
-
 VxeUI.component(VxeTableComponent)
 
 export const Table = VxeTable

package/packages/table/module/custom/panel.ts

@@ -7,7 +7,7 @@ import XEUtils from 'xe-utils'
 
 import type { VxeModalComponent, VxeDrawerComponent, VxeButtonComponent, VxeRadioGroupComponent, VxeTooltipComponent, VxeInputComponent } from 'vxe-pc-ui'
 
-const { getI18n, getIcon } = VxeUI
+const { getI18n, getIcon, renderEmptyElement } = VxeUI
 
 function updateDropHint (_vm: any, evnt: any) {
   const { $refs } = _vm
@@ -277,7 +277,11 @@ const renderSimplePanel = (h: CreateElement, _vm: any) => {
 }
 
 const renderPopupPanel = (h: CreateElement, _vm: any) => {
+  const VxeUIModalComponent = VxeUI.getComponent<VxeModalComponent>('VxeModal')
   const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+  const VxeUIInputComponent = VxeUI.getComponent<VxeInputComponent>('VxeInput')
+  const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
+  const $xeTableCustomPanel = _vm
 
   const { _e, $xetable, customStore } = _vm
   const { customOpts, customColumnList, columnOpts, isMaxFixedColumn } = $xetable
@@ -387,18 +391,21 @@ const renderPopupPanel = (h: CreateElement, _vm: any) => {
             }, [
               column.children && column.children.length
                 ? h('span', '-')
-                : h('vxe-input', {
-                  props: {
-                    type: 'integer',
-                    disabled: isHidden,
-                    value: column.renderResizeWidth
-                  },
-                  on: {
-                    modelValue (value: any) {
-                      column.renderResizeWidth = Math.max(0, Number(value))
-                    }
-                  }
-                })
+                : (VxeUIInputComponent
+                    ? h(VxeUIInputComponent, {
+                      props: {
+                        type: 'integer',
+                        disabled: isHidden,
+                        value: column.renderResizeWidth
+                      },
+                      on: {
+                        modelValue (value: any) {
+                          column.renderResizeWidth = Math.max(0, Number(value))
+                        }
+                      }
+                    })
+                    : renderEmptyElement($xeTableCustomPanel)
+                  )
             ])
             : _e(),
           allowFixed
@@ -433,178 +440,182 @@ const renderPopupPanel = (h: CreateElement, _vm: any) => {
   })
   const isAllChecked = customStore.isAll
   const isAllIndeterminate = customStore.isIndeterminate
-  return h('vxe-modal', {
-    key: 'modal',
-    props: {
-      className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
-      value: customStore.visible,
-      title: modalOpts.title || getI18n('vxe.custom.cstmTitle'),
-      width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
-      minWidth: modalOpts.minWidth || 700,
-      height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
-      minHeight: modalOpts.minHeight || 400,
-      showZoom: !!modalOpts.showZoom,
-      mask: !!modalOpts.mask,
-      lockView: !!modalOpts.lockView,
-      resize: !!modalOpts.resize,
-      escClosable: !!modalOpts.escClosable,
-      destroyOnClose: true,
-      showFooter: true
-    },
-    on: {
-      input (value: any) {
-        customStore.visible = value
-      }
-    },
-    scopedSlots: {
-      default: () => {
-        return h('div', {
-          ref: 'bodyElemRef',
-          class: 'vxe-table-custom-popup--body'
-        }, [
-          h('div', {
-            class: 'vxe-table-custom-popup--table-wrapper'
+  return VxeUIModalComponent
+    ? h(VxeUIModalComponent, {
+      key: 'modal',
+      props: {
+        className: ['vxe-table-custom-popup-wrapper', 'vxe-table--ignore-clear', modalOpts.className || ''].join(' '),
+        value: customStore.visible,
+        title: modalOpts.title || getI18n('vxe.custom.cstmTitle'),
+        width: modalOpts.width || Math.min(880, document.documentElement.clientWidth),
+        minWidth: modalOpts.minWidth || 700,
+        height: modalOpts.height || Math.min(680, document.documentElement.clientHeight),
+        minHeight: modalOpts.minHeight || 400,
+        showZoom: !!modalOpts.showZoom,
+        mask: !!modalOpts.mask,
+        lockView: !!modalOpts.lockView,
+        resize: !!modalOpts.resize,
+        escClosable: !!modalOpts.escClosable,
+        destroyOnClose: true,
+        showFooter: true
+      },
+      on: {
+        input (value: any) {
+          customStore.visible = value
+        }
+      },
+      scopedSlots: {
+        default: () => {
+          return h('div', {
+            ref: 'bodyElemRef',
+            class: 'vxe-table-custom-popup--body'
           }, [
-            h('table', {}, [
-              h('colgroup', {}, [
-                allowVisible
-                  ? h('col', {
-                    style: {
-                      width: '80px'
-                    }
-                  })
-                  : _e(),
-                allowSort
-                  ? h('col', {
-                    style: {
-                      width: '80px'
-                    }
-                  })
-                  : _e(),
-                h('col', {
-                  style: {
-                    minWidth: '120px'
-                  }
-                }),
-                allowResizable
-                  ? h('col', {
-                    style: {
-                      width: '140px'
-                    }
-                  })
-                  : _e(),
-                allowFixed
-                  ? h('col', {
-                    style: {
-                      width: '200px'
-                    }
-                  })
-                  : _e()
-              ]),
-              h('thead', {}, [
-                h('tr', {}, [
+            h('div', {
+              class: 'vxe-table-custom-popup--table-wrapper'
+            }, [
+              h('table', {}, [
+                h('colgroup', {}, [
                   allowVisible
-                    ? h('th', {}, [
-                      h('div', {
-                        class: ['vxe-table-custom--checkbox-option', {
-                          'is--checked': isAllChecked,
-                          'is--indeterminate': isAllIndeterminate
-                        }],
-                        attrs: {
-                          title: getI18n('vxe.table.allTitle')
-                        },
-                        on: {
-                          click: _vm.allOptionEvent
-                        }
-
-                      }, [
-                        h('span', {
-                          class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-                        }),
-                        h('span', {
-                          class: 'vxe-checkbox--label'
-                        }, getI18n('vxe.toolbar.customAll'))
-                      ])
-                    ])
+                    ? h('col', {
+                      style: {
+                        width: '80px'
+                      }
+                    })
                     : _e(),
                   allowSort
-                    ? h('th', {}, [
-                      h('span', {
-                        class: 'vxe-table-custom-popup--table-sort-help-title'
-                      }, getI18n('vxe.custom.setting.colSort')),
-                      h('vxe-tooltip', {
-                        props: {
-                          enterable: true,
-                          content: getI18n('vxe.custom.setting.sortHelpTip'),
-                          popupClassName: 'vxe-table--ignore-clear'
-                        },
-                        scopedSlots: {
-                          default: () => {
-                            return h('i', {
-                              class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
-                            })
-                          }
-                        }
-                      })
-                    ])
+                    ? h('col', {
+                      style: {
+                        width: '80px'
+                      }
+                    })
                     : _e(),
-                  h('th', {}, getI18n('vxe.custom.setting.colTitle')),
+                  h('col', {
+                    style: {
+                      minWidth: '120px'
+                    }
+                  }),
                   allowResizable
-                    ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
+                    ? h('col', {
+                      style: {
+                        width: '140px'
+                      }
+                    })
                     : _e(),
                   allowFixed
-                    ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
+                    ? h('col', {
+                      style: {
+                        width: '200px'
+                      }
+                    })
                     : _e()
-                ])
-              ]),
-              h('transition-group', {
-                class: 'vxe-table-custom--body',
-                props: {
-                  tag: 'tbody',
-                  name: 'vxe-table-custom--list'
-                }
-              }, trVNs)
-            ])
-          ]),
-          h('div', {
-            ref: 'dragHintElemRef',
-            class: 'vxe-table-custom-popup--drag-hint'
-          }, getI18n('vxe.custom.cstmDragTarget', [_vm.dragColumn ? _vm.dragColumn.getTitle() : '']))
-        ])
-      },
-      footer: () => {
-        return h('div', {
-          class: 'vxe-table-custom-popup--footer'
-        }, [
-          h(VxeUIButtonComponent, {
-            props: {
-              content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore')
-            },
-            on: {
-              click: _vm.resetCustomEvent
-            }
-          }),
-          h(VxeUIButtonComponent, {
-            props: {
-              content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
-            },
-            on: {
-              click: _vm.cancelCustomEvent
-            }
-          }),
-          h(VxeUIButtonComponent, {
-            props: {
-              status: 'primary',
-              content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
-            },
-            on: {
-              click: _vm.confirmCustomEvent
-            }
-          })
-        ])
+                ]),
+                h('thead', {}, [
+                  h('tr', {}, [
+                    allowVisible
+                      ? h('th', {}, [
+                        h('div', {
+                          class: ['vxe-table-custom--checkbox-option', {
+                            'is--checked': isAllChecked,
+                            'is--indeterminate': isAllIndeterminate
+                          }],
+                          attrs: {
+                            title: getI18n('vxe.table.allTitle')
+                          },
+                          on: {
+                            click: _vm.allOptionEvent
+                          }
+
+                        }, [
+                          h('span', {
+                            class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+                          }),
+                          h('span', {
+                            class: 'vxe-checkbox--label'
+                          }, getI18n('vxe.toolbar.customAll'))
+                        ])
+                      ])
+                      : _e(),
+                    allowSort
+                      ? h('th', {}, [
+                        h('span', {
+                          class: 'vxe-table-custom-popup--table-sort-help-title'
+                        }, getI18n('vxe.custom.setting.colSort')),
+                        VxeUITooltipComponent
+                          ? h(VxeUITooltipComponent, {
+                            props: {
+                              enterable: true,
+                              content: getI18n('vxe.custom.setting.sortHelpTip'),
+                              popupClassName: 'vxe-table--ignore-clear'
+                            },
+                            scopedSlots: {
+                              default: () => {
+                                return h('i', {
+                                  class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
+                                })
+                              }
+                            }
+                          })
+                          : renderEmptyElement($xeTableCustomPanel)
+                      ])
+                      : _e(),
+                    h('th', {}, getI18n('vxe.custom.setting.colTitle')),
+                    allowResizable
+                      ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
+                      : _e(),
+                    allowFixed
+                      ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize]))
+                      : _e()
+                  ])
+                ]),
+                h('transition-group', {
+                  class: 'vxe-table-custom--body',
+                  props: {
+                    tag: 'tbody',
+                    name: 'vxe-table-custom--list'
+                  }
+                }, trVNs)
+              ])
+            ]),
+            h('div', {
+              ref: 'dragHintElemRef',
+              class: 'vxe-table-custom-popup--drag-hint'
+            }, getI18n('vxe.custom.cstmDragTarget', [_vm.dragColumn ? _vm.dragColumn.getTitle() : '']))
+          ])
+        },
+        footer: () => {
+          return h('div', {
+            class: 'vxe-table-custom-popup--footer'
+          }, [
+            h(VxeUIButtonComponent, {
+              props: {
+                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore')
+              },
+              on: {
+                click: _vm.resetCustomEvent
+              }
+            }),
+            h(VxeUIButtonComponent, {
+              props: {
+                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
+              },
+              on: {
+                click: _vm.cancelCustomEvent
+              }
+            }),
+            h(VxeUIButtonComponent, {
+              props: {
+                status: 'primary',
+                content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
+              },
+              on: {
+                click: _vm.confirmCustomEvent
+              }
+            })
+          ])
+        }
       }
-    }
-  })
+    })
+    : renderEmptyElement($xeTableCustomPanel)
 }
 
 export default {

package/packages/table/module/edit/mixin.ts

@@ -34,7 +34,7 @@ function insertTreeRow (_vm: any, newRecords: any[], isAppend: any) {
       fullDataRowIdData[rowid] = rest
       fullAllDataRowIdData[rowid] = rest
     } else {
-      if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
         if (parentRowId) {
           warnLog('vxe.error.unableInsert')
         }
@@ -98,7 +98,7 @@ function handleInsertRowAt (_vm: any, records: any[], row: any, isInsertNextRow?
           const parentLevel = parentRest ? parentRest.level : 0
           newRecords.forEach((item: any, i: any) => {
             const rowid = getRowid(_vm, item)
-            if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+            if (process.env.VUE_APP_VXE_ENV === 'development') {
               if (item[treeOpts.parentField]) {
                 if (parentRow && item[treeOpts.parentField] !== parentRow[rowField]) {
                   errLog('vxe.error.errProp', [`${treeOpts.parentField}=${item[treeOpts.parentField]}`, `${treeOpts.parentField}=${parentRow[rowField]}`])
@@ -131,7 +131,7 @@ function handleInsertRowAt (_vm: any, records: any[], row: any, isInsertNextRow?
             }
           }
         } else {
-          if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+          if (process.env.VUE_APP_VXE_ENV === 'development') {
             warnLog('vxe.error.unableInsert')
           }
           insertTreeRow(_vm, newRecords, true)
@@ -551,7 +551,7 @@ export default {
       }
     },
     _clearActived (evnt: any) {
-      if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
         warnLog('vxe.error.delFunc', ['clearActived', 'clearEdit'])
       }
       // 即将废弃
@@ -589,7 +589,7 @@ export default {
       return this.$nextTick()
     },
     _getActiveRecord () {
-      if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
         warnLog('vxe.error.delFunc', ['getActiveRecord', 'getEditRecord'])
       }
       // 即将废弃
@@ -605,7 +605,7 @@ export default {
       return null
     },
     _isActiveByRow (row: any) {
-      if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
         warnLog('vxe.error.delFunc', ['isActiveByRow', 'isEditByRow'])
       }
       // 即将废弃
@@ -622,6 +622,7 @@ export default {
      * 处理聚焦
      */
     handleFocus (params: any) {
+      const { editOpts } = this
       const { row, column, cell } = params
       const { editRender } = column
       if (isEnableConf(editRender)) {
@@ -629,19 +630,22 @@ export default {
         let autoFocus = editRender.autofocus || editRender.autoFocus
         let autoSelect = editRender.autoSelect || editRender.autoselect
         let inputElem
-        if (!autoFocus && compRender) {
-          autoFocus = compRender.tableAutoFocus || compRender.tableAutofocus || (compRender as any).autoFocus || compRender.autofocus
-        }
-        if (!autoSelect && compRender) {
-          autoSelect = compRender.tableAutoSelect || (compRender as any).autoSelect || compRender.autoselect
-        }
-        // 如果指定了聚焦 class
-        if (XEUtils.isFunction(autoFocus)) {
-          inputElem = autoFocus.call(this, params)
-        } else if (autoFocus) {
-          inputElem = cell.querySelector(autoFocus)
-          if (inputElem) {
-            inputElem.focus()
+        // 是否启用聚焦
+        if (editOpts.autoFocus) {
+          if (!autoFocus && compRender) {
+            autoFocus = compRender.tableAutoFocus || compRender.tableAutofocus || (compRender as any).autoFocus || compRender.autofocus
+          }
+          if (!autoSelect && compRender) {
+            autoSelect = compRender.tableAutoSelect || (compRender as any).autoSelect || compRender.autoselect
+          }
+          // 如果指定了聚焦 class
+          if (XEUtils.isFunction(autoFocus)) {
+            inputElem = autoFocus.call(this, params)
+          } else if (autoFocus) {
+            inputElem = cell.querySelector(autoFocus)
+            if (inputElem) {
+              inputElem.focus()
+            }
           }
         }
         if (inputElem) {
@@ -656,13 +660,18 @@ export default {
             }
           }
         } else {
-          // 显示到可视区中
-          this.scrollToRow(row, column)
+          // 是否自动定位
+          if (editOpts.autoPos) {
+            if (!column.fixed) {
+              // 显示到可视区中
+              this.scrollToRow(row, column)
+            }
+          }
         }
       }
     },
     _setActiveRow (row: any) {
-      if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
         warnLog('vxe.error.delFunc', ['setActiveRow', 'setEditRow'])
       }
       // 即将废弃
@@ -679,7 +688,7 @@ export default {
       return this.setEditCell(row, column)
     },
     _setActiveCell (row: any, fieldOrColumn: any) {
-      if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
         warnLog('vxe.error.delFunc', ['setActiveCell', 'setEditCell'])
       }
       // 即将废弃

package/packages/table/module/export/export-panel.ts

@@ -2,11 +2,17 @@ import { CreateElement } from 'vue'
 import { VxeUI } from '../../../ui'
 import XEUtils from 'xe-utils'
 import { formatText } from '../../../ui/src/utils'
+import { errLog } from '../../../ui/src/log'
 
-const { getI18n, getIcon } = VxeUI
+import type { VxeModalComponent, VxeInputComponent, VxeCheckboxComponent, VxeSelectComponent, VxeButtonComponent } from 'vxe-pc-ui'
+
+const { getI18n, getIcon, globalMixins } = VxeUI
 
 export default {
   name: 'VxeTableExportPanel',
+  mixins: [
+    globalMixins.sizeMixin
+  ],
   props: {
     defaultOptions: Object,
     storeData: Object
@@ -26,9 +32,6 @@ export default {
     }
   },
   computed: {
-    vSize () {
-      return this.size || this.$parent.size || this.$parent.vSize
-    },
     checkedAll () {
       return this.storeData.columns.every((column: any) => column.checked)
     },
@@ -44,6 +47,35 @@ export default {
       return !defaultOptions.original && ['xlsx'].indexOf(defaultOptions.type) > -1
     }
   } as any,
+  created (this: any) {
+    const $xeTableExportPanel = this
+
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
+      const VxeUIModalComponent = VxeUI.getComponent<VxeModalComponent>('VxeModal')
+      const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+      const VxeUISelectComponent = VxeUI.getComponent<VxeSelectComponent>('VxeSelect')
+      const VxeUIInputComponent = VxeUI.getComponent<VxeInputComponent>('VxeInput')
+      const VxeUICheckboxComponent = VxeUI.getComponent<VxeCheckboxComponent>('VxeCheckbox')
+
+      $xeTableExportPanel.$nextTick(() => {
+        if (!VxeUIModalComponent) {
+          errLog('vxe.error.reqComp', ['vxe-modal'])
+        }
+        if (!VxeUIButtonComponent) {
+          errLog('vxe.error.reqComp', ['vxe-button'])
+        }
+        if (!VxeUISelectComponent) {
+          errLog('vxe.error.reqComp', ['vxe-select'])
+        }
+        if (!VxeUIInputComponent) {
+          errLog('vxe.error.reqComp', ['vxe-input'])
+        }
+        if (!VxeUICheckboxComponent) {
+          errLog('vxe.error.reqComp', ['vxe-checkbox'])
+        }
+      })
+    }
+  },
   render (this: any, h: CreateElement) {
     const { _e, checkedAll, isAll: isAllChecked, isIndeterminate: isAllIndeterminate, showSheet, supportMerge, supportStyle, defaultOptions, storeData } = this
     const { hasTree, hasMerge, isPrint, hasColgroup } = storeData