因为项目需求是通过接口返回数据 然后表格默认回显,并且切换页数的时候保留当前选择项
1.首先使用rowSelection 需要指定row-key绑定的值必须唯一
<a-table
:columns="state.columns1"
:data-source="state.dataSource1"
:pagination="state.pagination1"
@change="pageChange"
bordered
:row-selection="rowSelection1"
:rowKey="(record) => record.id"
size="small"
style="margin-top: 20px"
>
2.引用rowSelection函数
const selectedRowsList2 = ref([]);
const selectedRowsKey = ref([]);//此处逻辑为切换页数后替换selectedRowsList2
const rowSelection2 = {
selectedRowKeys: selectedRowsList2,
onSelect(record, selected, selectedRowsData, nativeEvent) {
// 选择
if (selected) {
selectedRowsList2.value.push(record.id);
selectedRowsKey.value.push(record);
} else {
// 取消选中
selectedRowsList2.value = selectedRowsList2.value.filter(
(v) => v !== record.id
);
selectedRowsKey.value.splice(
selectedRowsKey.value.findIndex((x) => x.id === record.id),
1
);
console.log(toRaw(selectedRowsKey.value));
}
getArray(selectedRowsKey.value);
},
/**
* selected=true 全选
* selected = false 取消全选
* selectedRows 全选的行数据(包括默认选中的)
* changeRows 前后改变的数据
*/
onSelectAll(selected, selectedRows, changeRows) {
// 全选
if (selected) {
changeRows.map((x) => {
selectedRowsList2.value.push(x.id); //选中id
});
selectedRowsKey.value = selectedRowsKey.value.concat(changeRows);
} else {
// 取消全选
changeRows.forEach((item) => {
// 去掉选择取消的keyID
selectedRowsList2.value = selectedRowsList2.value.filter(
(v) => v !== item.id
);
});
selectedRowsKey.value = selectedRowsKey.value.filter(
(x) => !changeRows.find((i) => i.id === x.id)
);
}
getArray(selectedRowsKey.value);
},
getCheckboxProps: (recode) => {
if (selectedRowsList2.value.includes(recode.id)) {
// 如果数组中无则添加
let index = selectedRowsKey.value.findIndex((v) => v.id == recode.id);
if (index < 0) {
selectedRowsKey.value.push(recode);
}
}
return {
props: {
defaultChecked: selectedRowsList2.value.includes(recode.id),
},
};
},
};
const getArray = (selectData) => {
console.log(selectData, 888);
let map = new Map();
for (let item of selectData) {
if (!map.has(item.id)) {
map.set(item.id, item);
}
}
selectedRowsKey.value = [...map.values()];
};
3.从接口处获取筛选默认数据
//removeDuplicate为去重函数 自己百度或者用上方的getArray也可以
if (selectedRowsKey.value.length != selectedRowsList2.value.length) {
selectedRowsList2.value = removeDuplicate(
selectedRowsKey.value?.map((item) => item.id)
);
} else {
data?.forEach((item) => {
if (item.isChecked == 1) {
// arrList.value.push(item);
selectedRowsList2.value.push(item.id);
}
});
}
都是根据cv网上的大神然后经过自己改良(因为拔文档很多都不能满足要求)