antdesign vue 自定义实现可选表格,表格某列选项可选、行可选、表头可选

需求:
表格指定列中所有单选框的选中状态与对应行的单选框状态,两两相关;
每一行的单选框状态又与表头的单选框状态,两两相关。
ps: 语言好难描述清除~~
相关知识:可选择表格
(antdesign 有该功能,先来看下示例~)
功能:参考checkBox实现全选效果
(1)当选择某些行时,表头是部分选样式;所有行选中时,表头会是选中状态;所有行不选时,表头是非选中状态。
(2)当点击表头单选框为选中状态时,每一行会变为选中状态。相反~
我的需求是要在上述示例中进一步扩展~增加行与表格数据的关联操作!
一开始想要直接使用上述antd table提供的api(row-selection
)扩展,发现内部是使用的
checkBox与checkbox group实现全选效果。由于部分选会用到indeterminate属性,但checkbox group不具有该属性,只有checkBox具有该属性。因此每一行就不能实现部分选样式,只能自己写啦~
**
正文开始:
先来看下实现效果~
实现思路
:
1).表格项、行操作、表头操作都使用checkbox完成!
2).使用checkbox的属性indeterminate控制部分选时的样式,属性checked控制是否选中状态样式。
代码实现:
(1)插槽自定义列和自定义表头(参考antd Table自定义)
模板中:
功能权限列
行操作列和表头
colums中:
(2)全局data中定义全选和部分选字段(用于表头checkbox)
(3)tableData中也要定义全选和部分选字段(用于每一行checkbox)
(4)写方法,见代码注释
行操作的方法复杂点~作为中间者和每一项相关又和表头相关。




更多推荐
所有评论(0)