Ant Design of Vue中table表格选中项的清除问
使用 ：rowSelection.selectedRowKeys 来控制选项
vue
js
为方便大家复制粘贴，这里直接上代码
<template>
<div>
<div style="margin-bottom: 16px">
<a-button type="primary" :loading="loading" @click="clearSelection">
清空选中项
</a-button>
</div>
<a-table
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns"
:data-source="data"
/>
</div>
</template>
<script>
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
export default {
data() {
return {
data,
columns,
selectedRowKeys: [],
selectedRows:[],
loading: false,
};
},
methods: {
clearSelection() {//清空选中项
this.loading = true;
setTimeout(() => {
this.loading = false;
this.selectedRowKeys = [];
this.selectedRows = []
}, 1000);
},
onSelectChange(selectedRowKeys,selectedRows) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys; //选中的keys
this.selectedRows = selectedRows //选中的行
},
},
};
</script>
