antdesign table 设置默认选中行且不可编辑
近日碰到一个需求, 就是在一个弹出的列表里需要默认勾选已经绑定过的数据并且不可取消,所以才有了这次记录
自定义rowSelection属性
查阅官方文档, 发现有这个途径, 那就开始自定义吧
代码
代码解读
rowSelection
是一个对象存在的,里面这些是我需要的
type
可选 checkbox
或者 radio
, 就是样式
selectionRowKeys
界面所显示的选中行, 其中selectedRows
是用来更新点击选中的行, oldBindList
是服务器返回已经绑定的数据id数组
onChange
设置每一行的点击事件
getCheckboxProps
方法
用于自定义设置哪些行是默认不可编辑的, 当然是服务器返回的已经绑定的数据
实现每一行的点击方法
代码
代码解读
selectedRowsKeys
当前全部选中的行的简单数据, 我这里是个id
数组, 会随着点击变化
selectedRows
当前全部选中行的详细数据, 也是随着点击而变化
newSelectedRowsKey
剔除服务器返回已经绑定的id
数组, 也就是纯新增的
newSelectedRows
剔除服务器返回已绑定的完整数据数组, 也是纯新增数据
使用自定义rowSelection
代码
代码解读
就是把自定义对象解构使用
总结
这样就实现了设置默认选中行且不可取消的界面效果, 并且提交新增数据时候也是剔除原有已绑定的纯新增数据
版权声明: 本文为 InfoQ 作者【张张张小烦】的原创文章。
原文链接:【http://xie.infoq.cn/article/b33a19500e3a4776747ad5534】。文章转载请联系作者。
评论