AntDesignVue Table的跨页全选勾选解决方案

AntV上文档上没有明确说明Table组件是支持跨页全选勾选的, 但实际rowSelection中的selectedRowKeys属性就是跨页的.
这个参数负责显示勾选项, 如果不需要获取整行的数据, 只需要key值, 完全可以只靠selectedRowKeys的值获取跨页勾选的key数组.

但是如果需要勾选的整行数据, 就需要配合onSelect和onSelectAll事件, 下面例子使用id作为rowKey.

<a-table 
  ...
  rowKey="id"
  :rowSelection="rowSelection"
  ...
></a-table>

// ...
data() {
    return {
        // ...
        // 已勾选的行数据
        selected: [],
        // 已勾选的行key数组
        selectedRowKeys: [], 
        // ...
    };
},
computed: {
    // ...
    rowSelection() {
        return {
            // selectedRowKeys 需要和 onChange 配合.
            // selectedRowKeys 就是显示的key(即id), 与 selectedRows 无关
            selectedRowKeys: this.selectedRowKeys,
            onChange: selectedRowKeys => {
                this.selectedRowKeys = selectedRowKeys;
            },
            // onSelectAll onSelect 分别为跨页全选和勾选的逻辑
            onSelectAll: (isSelected, selectedRows, changedRows) => {
                if (isSelected) {
                    this.selected = [...this.selected, ...selectedRows];
                } else {
                    const removedIds = changedRows.map(i => i.id);
                    this.selected = this.selected.filter(
                         i => !removedIds.includes(i.id)
                    );
                }
             },
             onSelect: (record, isSelected) => {
                 if (isSelected) {
                     this.selected.push(record);
                 } else {
                     this.selected = this.selected.filter(i => i.id !== record.id);
                 }
             },
        };
    },
    // ...
},

评论