Ant design vue table 单击行选中 勾选checkbox

 

 

最近了解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