内部优化

2026-01-21 05:27:57 +08:00 · 2021-05-27 22:55:47 +08:00
parent 51d973a047
commit b9eb86258a
7 changed files with 53 additions and 15 deletions
--- a/examples/api/grid.js
+++ b/examples/api/grid.js
@@ -538,7 +538,16 @@ const apis = [
        version: '',
        type: '',
        enum: '',
-        defVal: '{ code, $event }',
+        defVal: '{ code, button, $event }',
+        list: []
+      },
+      {
+        name: 'toolbar-tool-click',
+        desc: '只对 toolbar.tools 配置时有效，当右侧工具被点击时会后触发该事件',
+        version: '3.2.9',
+        type: '',
+        enum: '',
+        defVal: '{ code, tool, $event }',
        list: []
      },
      {
--- a/examples/views/table/advanced/CustomlWidthStorage.vue
+++ b/examples/views/table/advanced/CustomlWidthStorage.vue
@@ -19,7 +19,8 @@
      id="toolbar_demo5"
      height="400"
      :custom-config="{storage: true, checkMethod: checkColumnMethod}"
-      :data="tableData">
+      :data="tableData"
+      @resizable-change="resizableChangeEvent">
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="role" title="Role"></vxe-table-column>
@@ -66,7 +67,8 @@ export default {
          id="toolbar_demo5"
          height="400"
          :custom-config="{storage: true, checkMethod: checkColumnMethod}"
-          :data="tableData">
+          :data="tableData"
+          @resizable-change="resizableChangeEvent">
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="Name"></vxe-table-column>
          <vxe-table-column field="role" title="Role"></vxe-table-column>
@@ -102,6 +104,15 @@ export default {
                return false
              }
              return true
+            },
+            resizableChangeEvent () {
+              const columns = this.$refs.xTable1.getColumns()
+              const customData = columns.map(column => {
+                return {
+                  width: column.renderWidth
+                }
+              })
+              console.log(customData)
            }
          }
        }
@@ -121,6 +132,15 @@ export default {
        return false
      }
      return true
+    },
+    resizableChangeEvent () {
+      const columns = this.$refs.xTable1.getColumns()
+      const customData = columns.map(column => {
+        return {
+          width: column.renderWidth
+        }
+      })
+      console.log(customData)
    }
  }
 }
--- a/examples/views/table/base/Filter.vue
+++ b/examples/views/table/base/Filter.vue
@@ -40,7 +40,7 @@
      :data="tableData">
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-colgroup title="基本信息">
-        <vxe-table-column field="name" title="Name" sortable :filters="[{label: 'id大于10003', value: 10002}, {label: 'id大于10003', value: 10003, checked: true}]" :filter-method="filterNameMethod"></vxe-table-column>
+        <vxe-table-column field="name" title="Name" sortable :filters="[{label: 'id大于10003', value: 10002}, {label: 'id大于10003', value: 10003, checked: true},{label: 'id大于10004', value: 10004},{label: 'id大于10005', value: 10005},{label: 'id大于10006', value: 10006},{label: 'id大于10007', value: 10007}]" :filter-method="filterNameMethod"></vxe-table-column>
        <vxe-table-column field="sex" title="Sex" sortable :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"></vxe-table-column>
      </vxe-table-colgroup>
      <vxe-table-colgroup title="其他">
@@ -72,7 +72,9 @@ export default {
        { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
-        { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 24, address: 'Shanghai' }
+        { id: 10004, name: 'Test4', role: 'Test', sex: '1', age: 24, address: 'Shanghai' },
+        { id: 10005, name: 'Test5', role: 'Develop', sex: '0', age: 32, address: 'Shenzhen' },
+        { id: 10006, name: 'Test6', role: 'Designer', sex: '0', age: 28, address: 'Shanghai' }
      ],
      demoCodes: [
        `
@@ -99,7 +101,9 @@ export default {
                { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'vxe-table 从入门到放弃' },
                { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
-                { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 24, address: 'Shanghai' }
+                { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 24, address: 'Shanghai' },
+                { id: 10005, name: 'Test5', role: 'Develop', sex: '0', age: 32, address: 'Shenzhen' },
+                { id: 10006, name: 'Test6', role: 'Designer', sex: '0', age: 28, address: 'Shanghai' }
              ]
            }
          },
@@ -120,7 +124,7 @@ export default {
          :data="tableData">
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-colgroup title="基本信息">
-            <vxe-table-column field="name" title="Name" sortable :filters="[{label: 'id大于10003', value: 10002}, {label: 'id大于10003', value: 10003, checked: true}]" :filter-method="filterNameMethod"></vxe-table-column>
+            <vxe-table-column field="name" title="Name" sortable :filters="[{label: 'id大于10003', value: 10002}, {label: 'id大于10003', value: 10003, checked: true},{label: 'id大于10004', value: 10004},{label: 'id大于10005', value: 10005},{label: 'id大于10006', value: 10006},{label: 'id大于10007', value: 10007}]" :filter-method="filterNameMethod"></vxe-table-column>
            <vxe-table-column field="sex" title="Sex" sortable :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]"></vxe-table-column>
          </vxe-table-colgroup>
          <vxe-table-colgroup title="其他">
@@ -143,7 +147,9 @@ export default {
                { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'vxe-table 从入门到放弃' },
                { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
-                { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 24, address: 'Shanghai' }
+                { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 24, address: 'Shanghai' },
+                { id: 10005, name: 'Test5', role: 'Develop', sex: '0', age: 32, address: 'Shenzhen' },
+                { id: 10006, name: 'Test6', role: 'Designer', sex: '0', age: 28, address: 'Shanghai' }
              ]
            }
          },
--- a/examples/views/table/scroll/Merge.vue
+++ b/examples/views/table/scroll/Merge.vue
@@ -1,6 +1,9 @@
 <template>
  <div>
-    <p class="tip">虚拟渲染与单元格合并，可以通过设置参数 <table-api-link prop="merge-cells"/> 或调用函数 <table-api-link prop="setMergeCells"/>、<table-api-link prop="setMergeCells"/> 来控制单元格的临时合并状态</p>
+    <p class="tip">
+      虚拟渲染与单元格合并，可以通过设置参数 <table-api-link prop="merge-cells"/> 或调用函数 <table-api-link prop="setMergeCells"/>、<table-api-link prop="setMergeCells"/> 来控制单元格的临时合并状态<br>
+      <span class="red">（注：合并是以牺牲渲染性能为代价，如果需要用合并建议关闭虚拟滚动）</span>
+    </p>

    <vxe-table
      border
--- a/packages/filter/src/panel.js
+++ b/packages/filter/src/panel.js
@@ -23,7 +23,7 @@ export default {
      class: ['vxe-table--filter-wrapper', 'filter--prevent-default', compConf && compConf.className ? compConf.className : '', {
        'is--animat': $xetable.animat,
        'is--multiple': filterStore.multiple,
-        'filter--active': filterStore.visible
+        'is--active': filterStore.visible
      }],
      style: filterStore.style
    }, filterStore.visible ? this.renderOptions(h, filterRender, compConf).concat(this.renderFooter(h)) : [])
--- a/packages/header/src/header.js
+++ b/packages/header/src/header.js
@@ -141,8 +141,8 @@ export default {
                'col--ellipsis': hasEllipsis,
                'fixed--hidden': fixedHiddenColumn,
                'is--sortable': column.sortable,
-                'is--filter': !!column.filters,
-                'filter--active': hasFilter,
+                'col--filter': !!column.filters,
+                'is--filter-active': hasFilter,
                'col--current': currentColumn === column
              }, UtilTools.getClass(headerClassName, params), UtilTools.getClass(headerCellClassName, params)],
              attrs: {
--- a/styles/filter.scss
+++ b/styles/filter.scss
@@ -8,7 +8,7 @@
  vertical-align: middle;
  display: inline-block;
  line-height: 0;
-  &.is--active {
+  &.col--active {
    .vxe-filter--btn {
      color: $vxe-table-font-color;
    }
@@ -21,7 +21,7 @@
    }
  }
 }
-.filter--active {
+.is--filter-active {
  .vxe-cell--filter {
    .vxe-filter--btn {
      color: $vxe-primary-color;
@@ -43,7 +43,7 @@
  &:not(.is--multiple) {
    text-align: center;
  }
-  &.filter--active {
+  &.is--active {
    display: block;
  }
  .vxe-table--filter-header,