antd 表格的多选/单选框：rowSelection

最新推荐文章于 2023-12-13 17:59:34 发布

原创最新推荐文章于 2023-12-13 17:59:34 发布 · 8.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

Ant Design of Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在Ant Design的表格组件中如何实现单选和多选功能，通过rowSelection配置并监听onChange事件来管理选中状态。重点讨论了在搜索条件变化后如何正确清理selectedRowKeys，避免因历史选择导致的误操作问题。通过设置rowSelection.selectedRowKeys来更新选中状态，并在搜索时清空该值，确保数据一致性。

获取选中的框{

1、定义在rowSelection中,然后监听onChange事件，给selectedRowKeys赋值

               rowSelection:{type:'radio',onChange: this.selectChange,getCheckboxProps:this.getCheckboxProps,selectedRowKeys:[]}

               selectChange (val, selectedRows) { // 表格单选
               this.rowSelection.selectedRowKeys = val //// 要在这里给selectedRowKeys赋值，否则页面不显示选中状态
               }

               然后在页面中就可以获取到已选中的数组：console.log(this.rowSelection.selectedRowKeys) //// 输出已选中的，类型是数组

           2、（不推荐）直接定义在data中，然后监听onChange事件，给selectedRowKeys赋值

selectedRowKeys:[],
rowSelection:{type:'radio',onChange: this.selectChange,getCheckboxProps:this.getCheckboxProps}

               selectChange (val, selectedRows) { // 表格单选
               this.selectedRowKeys = val //// 要在这里给selectedRowKeys赋值，不管赋值不赋值，页面的选中状态不影响
               }

然后在页面中就可以获取到已选中的数组：console.log(this.selectedRowKeys) //// 输出已选中的，类型是数组

}

   注：selectedRowKeys 是已经选中的值，也就是没有手动选择取消的话，这个值是不会因为数据没显示就自动去掉的

   情况：1、页面有搜索条件， 2、根据选中的框，批量操作数据

如果第一次有选中数据，则 selectedRowKeys 中就会有值，然后再输入条件进行搜索，当之前选择的数据不符合的时候，就不会出现在列表中，也就说明之前选择的数据在selectedRowKeys没有取消，此时选择批量操作的话，就会导致上次选择的数据也被操作了

   解决：所以要在点击搜索查询的时候，把之前选中的值清空

       this.rowSelection.selectedRowKeys = [] // 页面显示效果一起生效

// this.selectedRowKeys = [] /// 不推荐，这种实际是修改我们自己定义的一个变量，对rowSelection是没有影响的，也就是没有清空上次选中的值