需求：表格的行可以多选，选中的数据要在弹框中展示
问题：数据可以选中，但是默认的对勾样式不展示
第一步
从官网https://1x.antdv.com/components/table-cn/找例子
image.png
<a-table
:columns="columns"
:data-source="data"
:row-selection="rowSelection"
:expanded-row-keys.sync="expandedRowKeys"
/>
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
};
选中后主要用的是 onChange 方法
但是用const定义的方法无法保存这些变量
第二步
发现还有可选择的表格
image.png
<a-table
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns"
:data-source="data"
/>
data() {
return {
selectedRows: [], // Check here to configure the default column
};
},
methods:{
onSelectChange(selectedRowKeys, selectedRows) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
console.log('selectedRows:', selectedRows);
this.selectedRowKeys = selectedRows;
},
}
至此，非常符合我的需求，但是我发现页面可以选中数据，但是选中后的样式出不来，如下
image.png
已选中数据，控制台打印出console，但是表格中没有默认的对勾样式
再次更改无果，询问chatGPT无果
第三步
又发现官网下面的例子
image.png
<a-table :row-selection="rowSelection" :columns="columns" :data-source="data"/>
computed: {
rowSelection() {
return {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
};
},
},
至此，显示正常。选择表格后展示对勾了。
但是我不知道为什么呀，有知道的小伙伴记得留言哦～谢谢
