From b7a3ad01b86cf12991f32f61b03002731db0e7ee Mon Sep 17 00:00:00 2001 From: LauraXia123 Date: Tue, 5 Jan 2021 17:47:50 +0800 Subject: [PATCH] minor, table column filters popover --- examples/docs/zh-CN/table.md | 14 ++++++- packages/autocomplete/src/autocomplete.vue | 4 +- packages/select/src/option.vue | 8 ++-- packages/table/src/filter-panel.vue | 48 +++++++++++++++++++++- 4 files changed, 65 insertions(+), 9 deletions(-) diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 4d78c208dfa..a0e8474757b 100644 --- a/examples/docs/zh-CN/table.md +++ b/examples/docs/zh-CN/table.md @@ -1500,9 +1500,14 @@ sortable :info-icon="'el-icon-info'" :info-tooltip="'测试tooltip'" + :show-search-input="true" + :show-multiple-footer="false" + placeholder="kkk" width="180" + :filters2="[{text: '全部', value: ''}]" :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]" :filter-method="filterHandler" + filter-filters-change="filterFiltersChange" > @@ -1572,6 +1577,9 @@ filterHandler(value, row, column) { const property = column['property']; return row[property] === value; + }, + filterFiltersChange(value) { + console.log(value) } } } @@ -2237,5 +2245,9 @@ | filter-change | 复选内容更改时的返回数据, 当`show-multiple-footer`为false时可以使用。 | Function | - | - | | filter-icon | 筛选自定义icon。 | String | - | - | | show-all-select-option | 是否显示`全部`筛选项（筛选数据为单选时该字段可用），如为false可以通过`filter-change`函数获取筛选值。 ｜ Boolean | - | true | +| show-search-input | 是否显示筛选项搜索框 | Boolean | - | false | +| placeholder | 筛选项搜索框占位符文案 | String | - | - | +| filter-filters-change | 筛选项搜索框搜索时过滤筛选项的方法 | Function | - | - | +| filters2 | 特殊组的数据过滤的选项，数组格式，数组中的元素需要有 text 、 value 和 icon 属性。下划线分割 | Array[{ text, value, icon }] | — | — | | info-icon | info icon，用于提示列的解释 | String | - | - | | info-tooltip | 用于提示列的解释详细 | String | - | - | \ No newline at end of file diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue index 3ef9e60c834..1a91608763d 100644 --- a/packages/autocomplete/src/autocomplete.vue +++ b/packages/autocomplete/src/autocomplete.vue @@ -236,7 +236,7 @@ this.highlightedIndex = index; this.$el.querySelector('.el-input__inner').setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`); }, - handleLoadingMore () { + handleLoadingMore() { this.loadingMore = true; let callback = (suggestions) => { this.loadingMore = false; @@ -245,7 +245,7 @@ } else { console.error('autocomplete suggestions must be an array'); } - } + }; this.$emit('loadMore', callback); } }, diff --git a/packages/select/src/option.vue b/packages/select/src/option.vue index 978d48a4e56..8647adee274 100644 --- a/packages/select/src/option.vue +++ b/packages/select/src/option.vue @@ -138,10 +138,10 @@ } }, - onPrefixIconClick (event) { - event.preventDefault() - event.stopPropagation() - this.$emit('prefix-icon-click', this.value) + onPrefixIconClick(event) { + event.preventDefault(); + event.stopPropagation(); + this.$emit('prefix-icon-click', this.value); } }, diff --git a/packages/table/src/filter-panel.vue b/packages/table/src/filter-panel.vue index 98a453bb22e..1cc71b83512 100644 --- a/packages/table/src/filter-panel.vue +++ b/packages/table/src/filter-panel.vue @@ -1,5 +1,13 @@