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;