最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传
期望:Ant design table 单击行选中 勾选checkedbox
实现:
单选:
onClickRow(record) {
return {
on: {
click: () => {
let keys = [];
keys.push(record.id);
this.selectedRowKeys = keys;
}
}
}
}
多选:
onClickRowMulti(record) {
return {
on: {
click: () => {
let rowKeys=this.selectedRowKeys
if(rowKeys.length>0 && rowKeys.includes(record.id)){
rowKeys.splice(rowKeys.indexOf(record.id),1)
}else{
rowKeys.push(record.id)
}
this.selectedRowKeys = rowKeys;
}
}
}
}
思路:
api:
customRow绑定单击行click事件,修改selectedRowKeys 数组的值即可(这里是单选操作 双选则不用清空数组)
完整demo链接:https://gitee.com/DoubleLiang/codes/skcp1ol0n9xjd52irw73816