From b9eb86258adba5cc2eca4f9339fcba572cbb0dbc Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Thu, 27 May 2021 22:55:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=86=85=E9=83=A8=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/api/grid.js                          | 11 ++++++++-
 .../table/advanced/CustomlWidthStorage.vue    | 24 +++++++++++++++++--
 examples/views/table/base/Filter.vue          | 16 +++++++++----
 examples/views/table/scroll/Merge.vue         |  5 +++-
 packages/filter/src/panel.js                  |  2 +-
 packages/header/src/header.js                 |  4 ++--
 styles/filter.scss                            |  6 ++---
 7 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/examples/api/grid.js b/examples/api/grid.js
index 00568d460..8d3b7e3d0 100644
--- 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: []
       },
       {
diff --git a/examples/views/table/advanced/CustomlWidthStorage.vue b/examples/views/table/advanced/CustomlWidthStorage.vue
index 159e03aee..1ea793085 100644
--- 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)
     }
   }
 }
diff --git a/examples/views/table/base/Filter.vue b/examples/views/table/base/Filter.vue
index 011b64aaa..8fbbae9c6 100644
--- 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' }
               ]
             }
           },
diff --git a/examples/views/table/scroll/Merge.vue b/examples/views/table/scroll/Merge.vue
index e509ca92d..b27f33bf3 100644
--- 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
diff --git a/packages/filter/src/panel.js b/packages/filter/src/panel.js
index 1e351cae9..a5b50631a 100644
--- 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)) : [])
diff --git a/packages/header/src/header.js b/packages/header/src/header.js
index ad3554721..8b924c41c 100644
--- 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: {
diff --git a/styles/filter.scss b/styles/filter.scss
index bf03b9652..72fc73a37 100644
--- 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,