feat: add event update:filterDropdownVisible for Table.Column (#3893)
It's same as event filterDropdownVisibleChange, but can be used with prop as ':filterDropdownVisible.sync="filterDropdownVisible"' for short. It's the base of other props in Table.Column to add event update:prop to use ':prop.sync' shorthand. Next events for other props will be update:filteredValue and update:sortDirections.pull/3900/head
viruscamp
GitHub
parent
6fca13fb2c
commit
3761eddb4b
|
|
@ -1,12 +1,16 @@
|
|||
<cn>
|
||||
#### template 风格的 API
|
||||
使用 template 风格的 API
|
||||
“Last Name” 列展示了列筛选在 template 风格 API 中的通常用法。
|
||||
“Tags” 列展示了自定义列筛选以及“双向绑定”的 filterDropdownVisible 属性，其内部使用了事件 update:filterDropdownVisible。
|
||||
> 这个只是一个描述 `columns` 的语法糖，所以你不能用其他组件去包裹 `Column` 和 `ColumnGroup`。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### template style API
|
||||
Using template style API
|
||||
The "Last Name" column shows the normal usage of column filter using template style API.
|
||||
The "Tags" column shows a customized column search, and also the "two-way binding" of prop filterDropdownVisible, which use event update:filterDropdownVisible.
|
||||
> Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components.
|
||||
</us>
|
||||
|
||||
|
|
@ -18,11 +22,41 @@ Using template style API
|
|||
<a-table-column key="firstName" data-index="firstName">
|
||||
<span slot="title" style="color: #1890ff">First Name</span>
|
||||
</a-table-column>
|
||||
<a-table-column key="lastName" title="Last Name" data-index="lastName" />
|
||||
<a-table-column
|
||||
key="lastName"
|
||||
title="Last Name"
|
||||
data-index="lastName"
|
||||
:filters="[
|
||||
{ text: 'Brown', value: 'Brown' },
|
||||
{ text: 'Green', value: 'Green' },
|
||||
{ text: 'Black', value: 'Black' },
|
||||
]"
|
||||
:default-filtered-value="['Brown', 'Green']"
|
||||
@filter="(value, record) => record.lastName == value"
|
||||
/>
|
||||
</a-table-column-group>
|
||||
<a-table-column key="age" title="Age" data-index="age" />
|
||||
<a-table-column key="address" title="Address" data-index="address" />
|
||||
<a-table-column key="tags" title="Tags" data-index="tags">
|
||||
<a-table-column
|
||||
key="tags"
|
||||
:title="`Tags ${tagsFilterDropdownVisible ? 'filtering' : ''}`"
|
||||
data-index="tags"
|
||||
:filtered-value="filteredTags"
|
||||
@filter="(value, record) => record.tags.includes(value)"
|
||||
:filter-dropdown-visible.sync="tagsFilterDropdownVisible"
|
||||
>
|
||||
<template slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys }">
|
||||
<div style="background-color: white; border: solid;">
|
||||
<a-checkbox
|
||||
v-for="tag in ['nice', 'cool', 'loser']"
|
||||
:key="tag"
|
||||
:checked="filteredTags.includes(tag)"
|
||||
@change="filteredTags = toggleSelectedTags(filteredTags, tag, $event.target.checked)"
|
||||
>
|
||||
{{ tag }}
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
<template slot-scope="tags">
|
||||
<span>
|
||||
<a-tag v-for="tag in tags" :key="tag" color="blue">{{ tag }}</a-tag>
|
||||
|
|
@ -72,8 +106,21 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
data,
|
||||
filteredTags: [],
|
||||
tagsFilterDropdownVisible: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleSelectedTags(oldTags, tag, checked) {
|
||||
let newTags = [...oldTags];
|
||||
if (checked) {
|
||||
newTags.push(tag);
|
||||
} else {
|
||||
newTags = newTags.filter(t => t != tag);
|
||||
}
|
||||
return newTags;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
|||
| defaultFilteredValue | Default filtered values | string\[] | - | 1.5.0 |
|
||||
| defaultSortOrder | Default order of sorted values: `'ascend'` `'descend'` `null` | string | - | |
|
||||
| filterDropdown | Customized filter overlay | slot \| slot-scope | - | |
|
||||
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | |
|
||||
| filterDropdownVisible | Whether `filterDropdown` is visible. Can be used with `.sync` in template, see `update:filterDropdownVisible` | boolean | - | |
|
||||
| filtered | Whether the `dataSource` is filtered | boolean | `false` | |
|
||||
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | |
|
||||
| filterIcon | Customized filter icon | slot \| slot-scope \| (filtered: boolean, column: Column) | `false` | |
|
||||
|
|
@ -102,7 +102,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
|||
| customCell | Set props on per cell | Function(record, rowIndex) | - | |
|
||||
| customHeaderCell | Set props on per header cell | Function(column) | - | |
|
||||
| onFilter | Callback executed when the confirm filter button is clicked, Use as a `filter` event when using template or jsx | Function | - | |
|
||||
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed, Use as a `filterDropdownVisible` event when using template or jsx | function(visible) {} | - | |
|
||||
| onFilterDropdownVisibleChange <br> @filterDropdownVisibleChange <br> @update:filterDropdownVisible | Callback executed when `filterDropdownVisible` is changed, Use as a `filterDropdownVisibleChange` or `update:filterDropdownVisible` event when using template or jsx | function(visible) {} | - | |
|
||||
| slots | When using columns, you can use this property to configure the properties that support the slot, such as `slots: { filterIcon: 'XXX'}` | object | - | |
|
||||
| scopedSlots | When using columns, you can use this property to configure the properties that support the slot-scope, such as `scopedSlots: { customRender: 'XXX'}` | object | - | |
|
||||
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
| dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | string | - | |
|
||||
| defaultFilteredValue | 默认筛选值 | string\[] | - | 1.5.0 |
|
||||
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | VNode \| slot-scope | - | |
|
||||
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | |
|
||||
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见。在 template 中可用 `.sync` 后缀, 参见 `update:filterDropdownVisible` | boolean | - | |
|
||||
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
|
||||
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - | |
|
||||
| filterIcon | 自定义 filter 图标。 | VNode \| (filtered: boolean, column: Column) => vNode \|slot \|slot-scope | false | |
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
| customCell | 设置单元格属性 | Function(record, rowIndex) | - | |
|
||||
| customHeaderCell | 设置头部单元格属性 | Function(column) | - | |
|
||||
| onFilter | 本地模式下，确定筛选的运行函数, 使用 template 或 jsx 时作为`filter`事件使用 | Function | - | |
|
||||
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用 template 或 jsx 时作为`filterDropdownVisibleChange`事件使用 | function(visible) {} | - | |
|
||||
| onFilterDropdownVisibleChange <br> @filterDropdownVisibleChange <br> @update:filterDropdownVisible | 自定义筛选菜单可见`filterDropdownVisible`变化时调用，使用 template 或 jsx 时作为`filterDropdownVisibleChange`或`update:filterDropdownVisible`事件使用 | function(visible) {} | - | |
|
||||
| slots | 使用 columns 时，可以通过该属性配置支持 slot 的属性，如 `slots: { filterIcon: 'XXX'}` | object | - | |
|
||||
| scopedSlots | 使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 `scopedSlots: { customRender: 'XXX'}` | object | - | |
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,25 @@ const Table = {
|
|||
const events = getEvents(element);
|
||||
const listeners = {};
|
||||
Object.keys(events).forEach(e => {
|
||||
const k = `on-${e}`;
|
||||
/*
|
||||
Convert events on template Column to function props onPropAbcChange in Table.columns prop.
|
||||
If you write template code like below:
|
||||
<Column @prop-abc-change="f1" @update:prop-abc="f2" :prop-abc.sync="dataAbc" />
|
||||
You will get these events:
|
||||
{
|
||||
'prop-abc-change': this.f1,
|
||||
'update:prop-abc': [this.f2, e => this.dataAbc = e],
|
||||
'update:propAbc': e => this.dataAbc = e,
|
||||
}
|
||||
All of these events would be treat as column.onPropAbcChange,
|
||||
but only one of them will be valid, which can not be determined.
|
||||
*/
|
||||
let k;
|
||||
if (e.startsWith('update:')) {
|
||||
k = `on-${e.substr('update:'.length)}-change`;
|
||||
} else {
|
||||
k = `on-${e}`;
|
||||
}
|
||||
listeners[camelize(k)] = events[e];
|
||||
});
|
||||
const { default: children, ...restSlots } = getSlots(element);
|
||||
|
|
|
|||
Loading…
Reference in New Issue