Pitfalls: a-table page turning check data loss, data echo check
requirements: the input box displays a string consisting of names in all the checked data, click the icon behind to pop up a pop-up box, and the previously selected data needs Echo checked. As shown below
<a-card :bordered="false">
<s-table
ref="table"
:columns="columns"
:data="loadData"
:alert="true"
:rowKey="(record) => record.id"
:rowSelection="rowSelection"
>
<span
slot="sex"
slot-scope="text"
>
{
{ sexFilter(text) }}
</span>
<span
slot="status"
slot-scope="text"
>
{
{ statusFilter(text) }}
</span>
</s-table>
</a-card>
data(){
return{
selectedRowKeys:[] //保存的选择的keyId列表
selectedRows:[] //保存的所有选择数据列表
rowSelection: {
columnTitle: ' ',
selectedRowKeys: this.selectedRowKeys,
onSelect: this.onSelect,
onSelectAll: this.onSelectAll,
getCheckboxProps: (recode) => {
if (this.selectedRowKeys.includes(recode.id)) {
// 如果数组中无则添加
let index = this.selectedRows.findIndex((v) => v.id == recode.id)
if (index < 0) {
this.selectedRows.push(recode)
}
}
return {
props: {
defaultChecked: this.selectedRowKeys.includes(recode.id),
},
}
},
},
}
}
methods:{
onSelect(record, selected, selectedRowsData, nativeEvent) {
// 选择
if (selected) {
this.selectedRowKeys.push(record.id)
this.selectedRows.push(record)
} else {
// 取消选中
this.selectedRowKeys = this.selectedRowKeys.filter((v) => v !== record.id)
this.selectedRows.splice(
this.selectedRows.findIndex((x) => x.id === record.id),
1
)
}
this.getArray(this.selectedRows)
},
/**
* selected=true 全选
* selected = false 取消全选
* selectedRows 全选的行数据（包括默认选中的）
* changeRows 前后改变的数据
*/
onSelectAll(selected, selectedRows, changeRows) {
console.log(selected, selectedRows, changeRows)
// 全选
if (selected) {
changeRows.map((x) => {
this.selectedRowKeys.push(x.id) //选中id
})
this.selectedRows = this.selectedRows.concat(changeRows)
} else {
// 取消全选
changeRows.forEach((item) => {
// 去掉选择取消的keyID
this.selectedRowKeys = this.selectedRowKeys.filter((v) => v !== item.id)
})
this.selectedRows = this.selectedRows.filter((x) => !changeRows.find((i) => i.id === x.id))
}
this.getArray(this.selectedRows)
},
// 数组去重
getArray(selectData) {
let map = new Map()
for (let item of selectData) {
if (!map.has(item.id)) {
map.set(item.id, item)
}
}
this.selectedRows = [...map.values()]
console.log(this.selectedRows, '数组去重后')
},
}
Now we have implemented page turning memory selection, which can also be implemented when data is echoed.
However, we have also discovered a problem. If all the data on a certain page is checked and echoed, the all-select box will not be selected. I have not thought of it yet. What a good solution (I finally removed the select all box). If you guys have encountered it, you can leave a comment and leave a solution. Thank you in advance~
