增加事件 filter-visible

examples/api/table.js

@@ -3028,6 +3028,15 @@ const apis = [
         defVal: '{ sortList, $event }',
         list: []
       },
+      {
+        name: 'filter-visible',
+        desc: '当筛选面板被触发时会触发该事件',
+        version: '3.3.16',
+        type: '',
+        enum: '',
+        defVal: '{ column, property, visible, filterList, $event }',
+        list: []
+      },
       {
         name: 'filter-change',
         descKey: 'app.api.table.desc.filterChange',

examples/views/table/base/Filter.vue

@@ -14,7 +14,9 @@
       border
       highlight-hover-row
       ref="xTable1"
-      :data="tableData">
+      :data="tableData"
+      @filter-visible="filterVisibleEvent"
+      @filter-change="filterChangeEvent">
       <vxe-column field="id" title="ID"></vxe-column>
       <vxe-column field="name" title="Name" sortable :filters="[]" :filter-method="filterNameMethod"></vxe-column>
       <vxe-column field="sex" title="Sex" sortable :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]" :filter-multiple="false"></vxe-column>
@@ -83,7 +85,9 @@ export default {
           border
           highlight-hover-row
           ref="xTable1"
-          :data="tableData">
+          :data="tableData"
+          @filter-visible="filterVisibleEvent"
+          @filter-change="filterChangeEvent">
           <vxe-column field="id" title="ID"></vxe-column>
           <vxe-column field="name" title="Name" sortable :filters="[]" :filter-method="filterNameMethod"></vxe-column>
           <vxe-column field="sex" title="Sex" sortable :filters="[{label: 'Man', value: '1'}, {label: 'Woman', value: '0'}]" :filter-multiple="false"></vxe-column>
@@ -125,6 +129,12 @@ export default {
             }, 500)
           },
           methods: {
+            filterVisibleEvent ({ column, visible }) {
+              console.log(\`\${column.property} \${visible ? '打开' : '关闭'}筛选面板\`)
+            },
+            filterChangeEvent ({ column }) {
+              console.log(\`\${column.property} 筛选了数据\`)
+            },
             filterNameMethod ({ value, row, column }) {
               return row.id >= value
             },
@@ -199,6 +209,12 @@ export default {
     }, 500)
   },
   methods: {
+    filterVisibleEvent ({ column, visible }) {
+      console.log(`${column.property} ${visible ? '打开' : '关闭'}筛选面板`)
+    },
+    filterChangeEvent ({ column }) {
+      console.log(`${column.property} 筛选了数据`)
+    },
     filterNameMethod ({ value, row }) {
       return row.id >= value
     },

packages/filter/src/mixin.js

@@ -85,7 +85,7 @@ export default {
           // 判断面板不能大于表格高度
           let maxHeight = null
           if (filterHeight >= bodyElem.clientHeight) {
-            maxHeight = bodyElem.clientHeight - (filterFootElem ? filterFootElem.offsetHeight : 0) - (filterHeadElem ? filterHeadElem.offsetHeight : 0)
+            maxHeight = Math.max(40, bodyElem.clientHeight - (filterFootElem ? filterFootElem.offsetHeight : 0) - (filterHeadElem ? filterHeadElem.offsetHeight : 0))
           }
           if (column.fixed === 'left') {
             left = targetElem.offsetLeft + targetElem.offsetParent.offsetLeft - centerWidth
@@ -111,6 +111,7 @@ export default {
           filterStore.maxHeight = maxHeight
         })
       }
+      this.emitEvent('filter-visible', { column, property: column.property, filterList: this.getCheckedFilters(), visible: filterStore.visible }, evnt)
     },
     _getCheckedFilters () {
       const { tableFullColumn } = this
@@ -150,7 +151,6 @@ export default {
           datas.push(item.data)
         }
       })
-      filterStore.visible = false
       const filterList = this.getCheckedFilters()
       // 如果是服务端筛选，则跳过本地筛选处理
       if (!filterOpts.remote) {

packages/table/src/methods.js

@@ -3404,12 +3404,17 @@ const Methods = {
    * @param {Event} evnt 事件
    */
   closeFilter () {
-    Object.assign(this.filterStore, {
+    const { filterStore } = this
+    const { column, visible } = filterStore
+    Object.assign(filterStore, {
       isAllSelected: false,
       isIndeterminate: false,
       options: [],
       visible: false
     })
+    if (visible) {
+      this.emitEvent('filter-visible', { column, property: column.property, filterList: this.getCheckedFilters(), visible: false }, null)
+    }
     return this.$nextTick()
   },
   /**

packages/v-x-e-table/src/renderer.js

@@ -522,7 +522,7 @@ const renderMap = {
     renderEdit: nativeEditRender,
     renderDefault: nativeEditRender,
     renderFilter: nativeFilterRender,
-    filterMethod: handleFilterMethod,
+    defaultFilterMethod: handleFilterMethod,
     renderItemContent: nativeItemRender
   },
   textarea: {
@@ -548,7 +548,7 @@ const renderMap = {
         renderOpts.optionGroups ? renderNativeOptgroups(h, renderOpts, params, renderNativeOptions) : renderNativeOptions(h, renderOpts.options, renderOpts, params))
       })
     },
-    filterMethod: handleFilterMethod,
+    defaultFilterMethod: handleFilterMethod,
     renderItemContent (h, renderOpts, params) {
       return [
         h('select', {
@@ -586,7 +586,7 @@ const renderMap = {
     },
     renderDefault: defaultEditRender,
     renderFilter: defaultFilterRender,
-    filterMethod: handleFilterMethod,
+    defaultFilterMethod: handleFilterMethod,
     renderItemContent: defaultItemRender
   },
   $textarea: {
@@ -622,7 +622,7 @@ const renderMap = {
         })
       })
     },
-    filterMethod: handleFilterMethod,
+    defaultFilterMethod: handleFilterMethod,
     renderItemContent (h, renderOpts, params) {
       const { data, property } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts

styles/header.scss

@@ -14,7 +14,7 @@
   /*排序*/
   .vxe-cell--sort {
     width: 1.5em;
-    height: 1.5em;
+    height: 1.35em;
     vertical-align: middle;
     text-align: center;
     display: inline-block;
@@ -36,10 +36,10 @@
     }
   }
   .vxe-sort--asc-btn {
-    top: -0.04em;
+    top: -0.15em;
   }
   .vxe-sort--desc-btn {
-    bottom: -0.04em;
+    bottom: -0.15em;
   }
 }
 
@@ -80,12 +80,12 @@
       top: 0.2em;
     }
   }
-  .vxe-cell--required-icon,
-  .vxe-cell--edit-icon,
-  .vxe-cell-help-icon,
-  .vxe-cell--title {
-    vertical-align: middle;
-  }
+  // .vxe-cell--required-icon,
+  // .vxe-cell--edit-icon,
+  // .vxe-cell-help-icon,
+  // .vxe-cell--title {
+  //   vertical-align: middle;
+  // }
   .vxe-cell--required-icon {
     margin-right: 0.1em;
   }
@@ -96,9 +96,6 @@
   .vxe-cell-help-icon {
     cursor: help;
   }
-  .vxe-cell--title {
-    line-height: 1.5;
-  }
   .vxe-resizable {
     position: absolute;
     right: -7px;

styles/table.scss

@@ -962,7 +962,9 @@
         }
       }
     }
-    .vxe-cell--checkbox .vxe-checkbox--icon,
+    .vxe-cell--checkbox .vxe-checkbox--icon {
+      font-size: $vxe-checkbox-font-size-medium;
+    }
     .vxe-cell--radio .vxe-radio--icon {
       font-size: $vxe-radio-font-size-medium;
     }
@@ -978,7 +980,9 @@
         }
       }
     }
-    .vxe-cell--checkbox .vxe-checkbox--icon,
+    .vxe-cell--checkbox .vxe-checkbox--icon {
+      font-size: $vxe-checkbox-font-size-small;
+    }
     .vxe-cell--radio .vxe-radio--icon {
       font-size: $vxe-radio-font-size-small;
     }
@@ -994,7 +998,9 @@
         }
       }
     }
-    .vxe-cell--checkbox .vxe-checkbox--icon,
+    .vxe-cell--checkbox .vxe-checkbox--icon {
+      font-size: $vxe-checkbox-font-size-mini;
+    }
     .vxe-cell--radio .vxe-radio--icon {
       font-size: $vxe-radio-font-size-mini;
     }

styles/variable.scss

@@ -51,7 +51,7 @@ $vxe-table-row-height-default: 48px !default;
 $vxe-table-row-height-medium: 44px !default;
 $vxe-table-row-height-small: 40px !default;
 $vxe-table-row-height-mini: 36px !default;
-$vxe-table-row-line-height: 24px !default;
+$vxe-table-row-line-height: 22px !default;
 $vxe-table-row-hover-background-color: #f5f7fa !default;
 $vxe-table-row-striped-background-color: #fafafa !default;
 $vxe-table-row-hover-striped-background-color: #f5f7fa !default;