Ant Design Vue中Table默认全选
在网上看了很多资料,始终没有找到自己想要的效果,思考了很久才知道可以直接设置selectedRowKeys来使table默认选中,在这里分享给大家。这里直接根据官网给出的示例进行了修改<template><div><a-tablerowKey="key":row-selection="rowSelection":columns="columns":data-sourc
·
在网上看了很多资料,始终没有找到自己想要的效果,思考了很久才知道可以直接设置selectedRowKeys来使table默认选中,在这里分享给大家。
这里直接根据官网给出的示例进行了修改
<template>
<div>
<a-table
rowKey="key"
:row-selection="rowSelection"
:columns="columns"
:data-source="data"
>
<a
slot="name"
slot-scope="text"
>{{ text }}</a>
</a-table>
<a-button @click="show">默认全选</a-button>
</div>
</template>
<script>
const columns = [
{
title: 'Name',
dataIndex: 'name',
scopedSlots: { customRender: 'name' },
},
{
title: 'Age',
dataIndex: 'age'
},
{
title: 'Address',
dataIndex: 'address'
},
];
const data = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park'
},
{
key: 2,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park'
},
{
key: 3,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park'
},
{
key: 4,
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park'
},
];
export default {
data () {
return {
data,
columns,
selectedTableRow: []
}
},
computed: {
rowSelection () {
return {
onChange: (selectedRowKeys, selectedRows) => {
this.selectedTableRow = selectedRowKeys
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
selectedRowKeys: this.selectedTableRow
}
}
},
methods: {
show () {
this.selectedTableRow = [1,2,3,4]
}
}
};
</script>
通过某个方法去设置选中行的keys,然后在rowSelection中添加selectedRowKeys: this.selectedTableRow即可实现,不过需要注意以下几点:
-
表格一定要是rowKey属性,且该属性就是selectedTableRow的值
-
要定义用来接收selectedRowKeys的数组
-
在rowSelection中添加相应代码
-
在方法中设置需要选中行的key值数组,我这里定义了一个button充当加载页面
效果如下
- 点击前
- 点击后
更多推荐
已为社区贡献1条内容
所有评论(0)