优化重构

2025-12-13 17:58:24 +08:00 · 2020-09-12 17:58:46 +08:00
parent c96ebb250f
commit c30bc21ab6
23 changed files with 109 additions and 39 deletions
--- a/examples/i18n/lang/en-US.js
+++ b/examples/i18n/lang/en-US.js
@@ -404,8 +404,8 @@ module.exports = {
          footerRowStyle: 'Attach a style to the end of a table, or a function, Function({$rowIndex})',
          showFooter: 'Whether to display table footer',
          footerMethod: 'The data method at table footer, Function({columns, data}) return a two-dimensional array',
-          mergeCells: '临时合并指定的单元格，不能用于固定列',
-          mergeFooterItems: '临时合并表尾，不能用于固定列',
+          mergeCells: '临时合并指定的单元格（不建议用于固定列）',
+          mergeFooterItems: '临时合并表尾（不建议用于固定列）',
          spanMethod: 'User defined merge function. The method function ({row, rowindex, $rowindex, column, columnindex, $columnindex, data}) returns the calculated value and cannot be used for fixed columns',
          footerSpanMethod: 'Footer merge rows or columns, Function({$rowIndex, column, columnIndex, $columnIndex, data})',
          showOverflow: 'Sets all content to appear as ellipses if it is too long',
--- a/examples/i18n/lang/zh-CN.js
+++ b/examples/i18n/lang/zh-CN.js
@@ -403,8 +403,8 @@ module.exports = {
          footerRowStyle: '给表尾行附加样式，也可以是函数 Function({$rowIndex})',
          showFooter: '是否显示表尾',
          footerMethod: '表尾的数据获取方法 Function({columns, data}) 返回一个二维数组',
-          mergeCells: '临时合并指定的单元格，不能用于固定列',
-          mergeFooterItems: '临时合并表尾，不能用于固定列',
+          mergeCells: '临时合并指定的单元格（不建议用于固定列）',
+          mergeFooterItems: '临时合并表尾（不建议用于固定列）',
          spanMethod: '自定义合并函数，该方法 Function({row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, data}) 返回计算后的值，不能用于固定列',
          footerSpanMethod: '表尾合并行或列，该函数 Function({$rowIndex, column, columnIndex, $columnIndex, data}) 返回计算后的值，不能用于固定列',
          showOverflow: '设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）',
--- a/examples/i18n/lang/zh-TC.js
+++ b/examples/i18n/lang/zh-TC.js
@@ -403,10 +403,10 @@ module.exports = {
          footerRowStyle: '给表尾行附加样式，也可以是函数 Function({$rowIndex})',
          showFooter: '是否显示表尾',
          footerMethod: '表尾的数据获取方法 Function({ columns, data }) 返回一个二维数组',
-          mergeCells: '临时合并指定的单元格，不能用于固定列',
-          mergeFooterItems: '临时合并表尾，不能用于固定列',
+          mergeCells: '临时合并指定的单元格（不建议用于固定列）',
+          mergeFooterItems: '临时合并表尾（不建议用于固定列）',
          spanMethod: '自定义合并函数，该方法 Function({row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, data}) 返回计算后的值，不能用于固定列',
-          footerSpanMethod: '表尾合并行或列，该函数 Function({$rowIndex, column, columnIndex, $columnIndex, data}) 返回计算后的值',
+          footerSpanMethod: '表尾合并行或列，该函数 Function({$rowIndex, column, columnIndex, $columnIndex, data}) 返回计算后的值，不能用于固定列',
          showOverflow: '设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度）',
          showHeaderOverflow: '设置表头所有内容过长时显示为省略号',
          showAllOverflow: '即将废弃，请使用 show-overflow',
--- a/examples/main.js
+++ b/examples/main.js
@@ -122,7 +122,7 @@ const treeList = [
  {
    id: '10000',
    parentId: null,
-    name: '文件夹 10000',
+    name: 'vxe-table 从入门到放弃 10000',
    size: '53k',
    type: '',
    date: '2019-10-22',
@@ -550,7 +550,7 @@ const treeList = [
      {
        id: '35000',
        parentId: '30000',
-        name: '在线学习 35000.mp4',
+        name: 'vxe-table 从入门到放弃 35000.mp4',
        size: '286k',
        type: 'mp4',
        date: '2019-02-19',
@@ -576,7 +576,7 @@ const treeList = [
  {
    id: '40000',
    parentId: null,
-    name: '文件夹 40000',
+    name: 'vxe-table 从入门到放弃系列 40000',
    size: '26k',
    type: 'mp4',
    date: '2019-03-04',
--- a/examples/views/api/API.vue
+++ b/examples/views/api/API.vue
@@ -38,7 +38,7 @@
      <vxe-table-column field="version" :title="$t('app.api.title.version')" width="120" :title-help="{message: '该文档与最新版本保持同步，如果遇到参数无效时，需要检查当前使用的版本号是否支持该参数'}">
        <template v-slot="{ row }">
          <template v-if="row.version === 'pro'">
-            <a class="link pro" href="https://xuliangzhan_admin.gitee.io/vxe-table/plugins/index.html" target="_blank">pro 专业版</a>
+            <a class="link pro" href="https://xuliangzhan_admin.gitee.io/vxe-table/plugins" target="_blank">pro 专业版</a>
          </template>
           <template v-else-if="row.disabled">
            <span class="disabled">已废弃</span>
--- a/examples/views/table/advanced/Template.vue
+++ b/examples/views/table/advanced/Template.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <p class="tip">使用 <table-column-api-link prop="slot"/> 自定义模板；可以实现自定义任意内容及 html 元素<br>
-      <table-column-api-link prop="default"/>：自定义内容模板（提前格式化（最优） > <table-column-api-link prop="formatter"/>（值发生变化时） > <table-column-api-link prop="slots"/>（即时））<br>
+      <table-column-api-link prop="default"/>：自定义内容模板（提前格式化（最优） > <table-column-api-link prop="formatter"/>（field值发生变化时） > <table-column-api-link prop="slots"/>（即时））<br>
      <table-column-api-link prop="header"/>：自定义表头模板<br>
      <table-column-api-link prop="footer"/>：自定义表尾模板<br>
      <table-column-api-link prop="filter"/>：自定义筛选模板（建议使用<router-link :to="{name: 'RendererAPI'}">渲染器</router-link>，可以更好的复用）<br>
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
    "vxe-table-plugin-iview": "^1.9.1",
    "vxe-table-plugin-menus": "^1.4.6",
    "vxe-table-plugin-shortcut-key": "^1.3.0",
-    "vxe-table-plugin-virtual-tree": "0.4.1",
+    "vxe-table-plugin-virtual-tree": "0.5.0",
    "xe-ajax": "^4.0.5",
    "xe-ajax-mock": "^1.12.0",
    "xe-clipboard": "^1.10.0",
--- a/packages/cell/src/cell.js
+++ b/packages/cell/src/cell.js
@@ -514,9 +514,9 @@ export const Cell = {
          class: ['vxe-table--expand-btn', isLazyLoaded ? (iconLoaded || GlobalConfig.icon.TABLE_EXPAND_LOADED) : (isAceived ? (iconOpen || GlobalConfig.icon.TABLE_EXPAND_OPEN) : (iconClose || GlobalConfig.icon.TABLE_EXPAND_CLOSE))]
        })
      ]) : null,
-      h('span', {
+      (slots && slots.default) || labelField ? h('span', {
        class: 'vxe-table--expand-label'
-      }, slots && slots.default ? slots.default.call($table, params, h) : (labelField ? XEUtils.get(row, labelField) : null))
+      }, slots.default ? slots.default.call($table, params, h) : XEUtils.get(row, labelField)) : null
    ]
  },
  renderExpandData (h, params) {
--- a/packages/edit/src/mixin.js
+++ b/packages/edit/src/mixin.js
@@ -21,7 +21,7 @@ export default {
     * @param {Row} row 指定行
     */
    _insertAt (records, row) {
-      const { mergeList, afterFullData, editStore, scrollYLoad, tableFullData, treeConfig } = this
+      const { mergeList, afterFullData, editStore, sYOpts, scrollYLoad, tableFullData, treeConfig } = this
      if (!XEUtils.isArray(records)) {
        records = [records]
      }
@@ -55,8 +55,8 @@ export default {
          if (afIndex === -1) {
            throw new Error(UtilTools.error('vxe.error.unableInsert'))
          }
-          afterFullData.splice(...([afIndex, 0].concat(newRecords)))
-          tableFullData.splice(...([tableFullData.indexOf(row), 0].concat(newRecords)))
+          afterFullData.splice(afIndex, 0, ...newRecords)
+          tableFullData.splice(tableFullData.indexOf(row), 0, ...newRecords)
          // 刷新单元格合并
          mergeList.forEach(mergeItem => {
            const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
@@ -69,6 +69,7 @@ export default {
        }
      }
      editStore.insertList.unshift(...newRecords)
+      this.scrollYLoad = !treeConfig && sYOpts.gt > -1 && sYOpts.gt < tableFullData.length
      this.handleTableData()
      this.updateFooter()
      this.updateCache()
@@ -91,7 +92,7 @@ export default {
     * 如果为空则删除所有
     */
    _remove (rows) {
-      const { afterFullData, tableFullData, mergeList, editStore, checkboxOpts, selection, isInsertByRow, scrollYLoad } = this
+      const { afterFullData, tableFullData, treeConfig, mergeList, editStore, checkboxOpts, selection, isInsertByRow, sYOpts, scrollYLoad } = this
      const { actived, removeList, insertList } = editStore
      const { checkField: property } = checkboxOpts
      let rest = []
@@ -154,6 +155,7 @@ export default {
          insertList.splice(iIndex, 1)
        }
      })
+      this.scrollYLoad = !treeConfig && sYOpts.gt > -1 && sYOpts.gt < tableFullData.length
      this.handleTableData()
      this.updateFooter()
      this.updateCache()
--- a/packages/grid/src/grid.js
+++ b/packages/grid/src/grid.js
@@ -21,19 +21,20 @@ function getPaddingTopBottomSize (elem) {

 function renderDefaultForm (h, _vm) {
  const { proxyConfig, proxyOpts, formData, formConfig, formOpts } = _vm
-  if (formOpts.items && formOpts.items.length) {
+  if (formConfig && formOpts.items && formOpts.items.length) {
    if (!formOpts.inited) {
      formOpts.inited = true
-      if (proxyOpts && proxyOpts.beforeItem) {
+      const beforeItem = proxyOpts.beforeItem
+      if (proxyOpts && beforeItem) {
        formOpts.items.forEach(item => {
-          proxyOpts.beforeItem.apply(_vm, [{ $grid: _vm, item }])
+          beforeItem.call(_vm, { $grid: _vm, item })
        })
      }
    }
    return [
      h('vxe-form', {
        props: Object.assign({}, formOpts, {
-          data: proxyConfig && proxyOpts.form ? formData : formConfig.data
+          data: proxyConfig && proxyOpts.form ? formData : formOpts.data
        }),
        on: {
          submit: _vm.submitEvent,
@@ -259,8 +260,6 @@ export default {
    const { $scopedSlots, vSize, isZMax } = this
    const hasForm = !!($scopedSlots.form || this.formConfig)
    const hasToolbar = !!($scopedSlots.toolbar || this.toolbar)
-    const hasTop = !!$scopedSlots.top
-    const hasBottom = !!$scopedSlots.bottom
    const hasPager = !!($scopedSlots.pager || this.pagerConfig)
    return h('div', {
      class: ['vxe-grid', {
@@ -301,7 +300,7 @@ export default {
      /**
       * 渲染表格顶部区域
       */
-      hasTop ? h('div', {
+      $scopedSlots.top ? h('div', {
        ref: 'topWrapper',
        class: 'vxe-grid--top-wrapper'
      }, $scopedSlots.top.call(this, { $grid: this }, h)) : null,
@@ -317,7 +316,7 @@ export default {
      /**
       * 渲染表格底部区域
       */
-      hasBottom ? h('div', {
+      $scopedSlots.bottom ? h('div', {
        ref: 'bottomWrapper',
        class: 'vxe-grid--bottom-wrapper'
      }, $scopedSlots.bottom.call(this, { $grid: this }, h)) : null,
@@ -663,8 +662,8 @@ export default {
      return Promise.resolve()
    },
    getFormItems (index) {
-      const { formConfig } = this
-      const items = formConfig && formConfig.items ? formConfig.items : []
+      const { formConfig, formOpts } = this
+      const items = formConfig && formOpts.items ? formOpts.items : []
      return arguments.length ? items[index] : items
    },
    getPendingRecords () {
--- a/packages/locale/lang/en-US.js
+++ b/packages/locale/lang/en-US.js
@@ -88,6 +88,11 @@ export default {
          find: 'Find',
          replace: 'Replace'
        },
+        filter: {
+          re: 'Regular Expression',
+          whole: 'Whole word',
+          sensitive: 'Case sensitive'
+        },
        btns: {
          findNext: 'Find next',
          findAll: 'Find all',
@@ -101,6 +106,7 @@ export default {
          value: 'Value'
        },
        empty: '(Empty)',
+        reError: 'Invalid regular expression',
        recordCount: 'Found {{0}} cells',
        notCell: 'No matching cells were found',
        replaceSuccess: 'Successfully replaced {{0}} cells'
--- a/packages/locale/lang/ja-JP.js
+++ b/packages/locale/lang/ja-JP.js
@@ -88,6 +88,11 @@ export default {
          find: '查找',
          replace: '替换'
        },
+        filter: {
+          re: '正则表达式',
+          whole: '全词匹配',
+          sensitive: '区分大小写'
+        },
        btns: {
          findNext: '查找下一个',
          findAll: '查找全部',
@@ -101,6 +106,7 @@ export default {
          value: '值'
        },
        empty: '(空值)',
+        reError: '无效的正则表达式',
        recordCount: '已找到 {{0}} 个单元格',
        notCell: '找不到匹配的单元格',
        replaceSuccess: '成功替换 {{0}} 个单元格'
--- a/packages/locale/lang/zh-CN.js
+++ b/packages/locale/lang/zh-CN.js
@@ -88,6 +88,11 @@ export default {
          find: '查找',
          replace: '替换'
        },
+        filter: {
+          re: '正则表达式',
+          whole: '全词匹配',
+          sensitive: '区分大小写'
+        },
        btns: {
          findNext: '查找下一个',
          findAll: '查找全部',
@@ -101,6 +106,7 @@ export default {
          value: '值'
        },
        empty: '(空值)',
+        reError: '无效的正则表达式',
        recordCount: '已找到 {{0}} 个单元格',
        notCell: '找不到匹配的单元格',
        replaceSuccess: '成功替换 {{0}} 个单元格'
--- a/packages/locale/lang/zh-TC.js
+++ b/packages/locale/lang/zh-TC.js
@@ -88,6 +88,11 @@ export default {
          find: '查找',
          replace: '替換'
        },
+        filter: {
+          re: '規則運算式',
+          whole: '全詞匹配',
+          sensitive: '區分大小寫'
+        },
        btns: {
          findNext: '查找下一個',
          findAll: '查找全部',
@@ -101,6 +106,7 @@ export default {
          value: '值'
        },
        empty: '(空值)',
+        reError: '無效的規則運算式',
        recordCount: '已找到 {{0}} 個儲存格',
        notCell: '找不到匹配的儲存格',
        replaceSuccess: '成功替換 {{0}} 個儲存格'
--- a/packages/table/src/methods.js
+++ b/packages/table/src/methods.js
@@ -298,7 +298,7 @@ const Methods = {
  loadTableData (datas) {
    const { keepSource, treeConfig, editStore, sYOpts, scrollYStore, scrollXStore } = this
    const tableFullData = datas ? datas.slice(0) : []
-    const scrollYLoad = !treeConfig && sYOpts.gt > -1 && sYOpts.gt <= tableFullData.length
+    const scrollYLoad = !treeConfig && sYOpts.gt > -1 && sYOpts.gt < tableFullData.length
    scrollYStore.startIndex = 0
    scrollYStore.endIndex = 1
    scrollXStore.startIndex = 0
@@ -1202,7 +1202,7 @@ const Methods = {
      })
    }
    const visibleColumn = leftList.concat(centerList).concat(rightList)
-    let scrollXLoad = sXOpts.gt > -1 && sXOpts.gt <= tableFullColumn.length
+    let scrollXLoad = sXOpts.gt > -1 && sXOpts.gt < tableFullColumn.length
    Object.assign(columnStore, { leftList, centerList, rightList })
    if (scrollXLoad && isGroup) {
      scrollXLoad = false
--- a/public/issues.html
+++ b/public/issues.html
@@ -6,18 +6,41 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vxe-table 如何学会问问题？</title>
+    <style>
+      a {
+        text-decoration: none;
+        color: #333;
+      }
+      ul li {
+        padding: 5px;
+      }
+      ul li:hover a {
+        text-decoration: underline;
+        color: #1890ff;
+      }
+    </style>
  </head>
  <body>
-    <div>1.将代码示例放到以下任意一个在线链接中，运行起来（确保能复现问题，点击 fork 与 保存，将链接发群里即可）</div>
+    <p>两步快速演示问题：</p>
+    <div>1.将代码示例放到以下任意一个在线链接中，运行起来（点击 fork，确保能复现问题，最后点击保存，将链接发群里即可）</div>
      <ul>
        <li>
-          <a href="https://jsrun.pro/vIyKp/edit" target="_blank">jsrun</a>
+          <a href="https://jsrun.pro/vIyKp/edit" target="_blank">jsrun（默认）</a>
        </li>
        <li>
-          <a href="https://codesandbox.io/s/vue-template-916h0" target="_blank">codesandbox</a>
+          <a href="https://jsrun.net/4BLKp/edit" target="_blank">jsrun（集成 element-ui）</a>
        </li>
        <li>
-          <a href="https://jsfiddle.net/04Ldpsy8/" target="_blank">jsfiddle</a>
+          <a href="https://jsrun.net/KRLKp/edit" target="_blank">jsrun（集成 iview）</a>
+        </li>
+        <li>
+          <a href="https://jsrun.net/pRLKp/edit" target="_blank">jsrun（集成 ant-design-vue）</a>
+        </li>
+        <li>
+          <a href="https://codesandbox.io/s/vue-template-916h0" target="_blank">codesandbox（支持jsx）</a>
+        </li>
+        <li>
+          <a href="https://jsfiddle.net/04Ldpsy8/" target="_blank">jsfiddle（默认）</a>
        </li>
      </ul>
    <div>2.将问题步骤与浏览器环境描述清楚即可</div>
--- a/styles/export.scss
+++ b/styles/export.scss
@@ -67,7 +67,8 @@
    }
    .vxe-export--panel-column-body {
      padding: 0.2em 0;
-      max-height: 16em;
+      min-height: 10em;
+      max-height: 17.6em;
    }
  }
  .vxe-import-selected--file {
--- a/styles/table.scss
+++ b/styles/table.scss
@@ -852,7 +852,6 @@

  /*展开行*/
  .vxe-table--expanded {
-    padding-right: 0.5em;
    cursor: pointer;
    .vxe-table--expand-btn {
      width: 1em;
@@ -864,6 +863,9 @@
        color: $vxe-table-font-color;
      }
    }
+    &+.vxe-table--expand-label {
+      padding-left: 0.5em;
+    }
  }
  .vxe-body--expanded-column {
    border-bottom: 1px solid $vxe-table-border-color;
--- a/types/extends/renderer.d.ts
+++ b/types/extends/renderer.d.ts
@@ -135,6 +135,9 @@ export interface ColumnCellRenderParams extends TableRenderParams {
   * 相对于当前表格数据的索引
   */
  $rowIndex: number;
+  isHidden: boolean;
+  fixed: string;
+  type: string;
 }

 /**
--- a/types/form.d.ts
+++ b/types/form.d.ts
@@ -47,6 +47,7 @@ export declare class Form extends VXETableModule {
   * 手动切换折叠状态
   */
  toggleCollapse(): Promise<any>;
+  [key: string]: any;
 }

 export interface FormRule {
@@ -118,4 +119,5 @@ export interface FormOptions {
  validConfig?: {
    autoPos?: boolean;
  };
+  [key: string]: any;
 }
--- a/types/grid.d.ts
+++ b/types/grid.d.ts
@@ -21,6 +21,7 @@ export declare class Grid extends Table {
   * 数据代理配置项
   */
  proxyConfig?: GridProxyConfig;
+  proxyOpts: GridProxyConfig;
  /**
   * 工具栏配置
   */
@@ -29,6 +30,7 @@ export declare class Grid extends Table {
   * 表单配置项
   */
  formConfig?: boolean | GridFormOptions;
+  formOpts: GridFormOptions;

  /**
   * 给数据代理提交指令
@@ -58,6 +60,7 @@ export declare class Grid extends Table {
    pager: any;
    pendingRecords: any[];
  };
+  [key: string]: any;
 }

 export interface GridProxyQueryPageParams {
@@ -93,9 +96,12 @@ export interface GridProxyConfig {
    delete?(params: { body: { removeRecords: any[] } }, ...args: any[]): Promise<any>;
    save?(params: { body: { insertRecords: any[], updateRecords: any[], removeRecords: any[], pendingRecords: any[] } }, ...args: any[]): Promise<any>;
  }
+  [key: string]: any;
 }

-export interface GridPagerConfig extends PagerOptions {}
+export interface GridPagerConfig extends PagerOptions {
+  [key: string]: any;
+}

 export interface GridColumnOptions extends ColumnOptions {
  children?: GridColumnOptions[];
@@ -113,4 +119,6 @@ export interface GridToolbarOptions extends ToolbarOptions {
  }
 }

-export interface GridFormOptions extends FormOptions {}
+export interface GridFormOptions extends FormOptions {
+  [key: string]: any;
+}
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -964,6 +964,7 @@ export declare class Table extends VXETableModule {
   * 使表格失去焦点
   */
  blur(): Promise<any>;
+  [key: string]: any;
 }

 /**
@@ -1028,6 +1029,7 @@ export interface CheckboxConfig {
  reserve?: boolean;
  labelField?: string;
  checkField?: string;
+  halfField?: string;
  showHeader?: boolean;
  checkAll?: boolean;
  checkRowKeys?: string[] | number[];
@@ -1063,6 +1065,7 @@ export interface ExpandConfig {
  loadMethod?(params: { row: RowInfo, rowIndex: number, $rowIndex: number }): Promise<any>;
  toggleMethod?(params: { expanded: boolean, row: RowInfo, column: ColumnInfo, columnIndex: number, $columnIndex: number }): boolean;
  visibleMethod?(params: { expanded: boolean, row: RowInfo, column: ColumnInfo, columnIndex: number, $columnIndex: number }): boolean;
+  showIcon?: boolean;
  iconOpen?: string;
  iconClose?: string;
  iconLoaded?: string;
@@ -1083,6 +1086,7 @@ export interface TreeConfig {
  hasChild?: string;
  loadMethod?(params: { row: RowInfo }): Promise<any[]>;
  toggleMethod?(params: { expanded: boolean, row: RowInfo, column: ColumnInfo, columnIndex: number, $columnIndex: number }): boolean;
+  showIcon?: boolean;
  iconOpen?: string;
  iconClose?: string;
  iconLoaded?: string;
@@ -1100,6 +1104,7 @@ export interface TreeOpts {
  hasChild: string;
  loadMethod?(params: { row: RowInfo }): Promise<any[]>;
  toggleMethod?(params: { expanded: boolean, row: RowInfo, column: ColumnInfo, columnIndex: number, $columnIndex: number }): boolean;
+  showIcon: boolean;
  iconOpen: string;
  iconClose: string;
  iconLoaded: string;
--- a/types/toolbar.d.ts
+++ b/types/toolbar.d.ts
@@ -127,6 +127,7 @@ export interface ToolbarOptions {
    buttons?(params: ToolbarButtonsSlotParams, h: CreateElement): VNode[] | string[];
    tools?(params: ToolbarToolsSlotParams, h: CreateElement): VNode[] | string[];
  };
+  [key: string]: any;
 }

 export interface ToolbarButtonsSlotParams extends GridRenderParams {}