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; 
        } 
      } 
   } 
}
复制代码

 

posted @   阳光下那抹高傲的轻笑  阅读(5443)  评论(2编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示