From 6a16d745bb1cfb098cb91ed6aaa5fbe788b3cd5e Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Wed, 20 Oct 2021 23:07:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=8B=E4=BB=B6=20filter-v?= =?UTF-8?q?isible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/api/table.js | 9 +++++++++ examples/views/table/base/Filter.vue | 20 ++++++++++++++++++-- packages/filter/src/mixin.js | 4 ++-- packages/table/src/methods.js | 7 ++++++- packages/v-x-e-table/src/renderer.js | 8 ++++---- styles/header.scss | 21 +++++++++------------ styles/table.scss | 12 +++++++++--- styles/variable.scss | 2 +- 8 files changed, 58 insertions(+), 25 deletions(-) diff --git a/examples/api/table.js b/examples/api/table.js index 64c496a6d..f76b7722a 100644 --- a/examples/api/table.js +++ b/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', diff --git a/examples/views/table/base/Filter.vue b/examples/views/table/base/Filter.vue index ca06c0098..fb85d327a 100644 --- a/examples/views/table/base/Filter.vue +++ b/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"> @@ -83,7 +85,9 @@ export default { border highlight-hover-row ref="xTable1" - :data="tableData"> + :data="tableData" + @filter-visible="filterVisibleEvent" + @filter-change="filterChangeEvent"> @@ -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 }, diff --git a/packages/filter/src/mixin.js b/packages/filter/src/mixin.js index d938911a4..8ef05d38b 100644 --- a/packages/filter/src/mixin.js +++ b/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) { diff --git a/packages/table/src/methods.js b/packages/table/src/methods.js index f8ff4b9e0..1c2abea5d 100644 --- a/packages/table/src/methods.js +++ b/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() }, /** diff --git a/packages/v-x-e-table/src/renderer.js b/packages/v-x-e-table/src/renderer.js index 934e9604c..6efb05567 100644 --- a/packages/v-x-e-table/src/renderer.js +++ b/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 diff --git a/styles/header.scss b/styles/header.scss index a653975fd..d74e3588e 100644 --- a/styles/header.scss +++ b/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; diff --git a/styles/table.scss b/styles/table.scss index c9082da3d..6db680318 100644 --- a/styles/table.scss +++ b/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; } diff --git a/styles/variable.scss b/styles/variable.scss index ffd1a3d51..311f9d10b 100644 --- a/styles/variable.scss +++ b/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;