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)写方法,见代码注释

行操作的方法复杂点~作为中间者和每一项相关又和表头相关。

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐




所有评论(0)