需求:
表格指定列中所有单选框的选中状态与对应行的单选框状态,两两相关;
每一行的单选框状态又与表头的单选框状态,两两相关。

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

在这里插入图片描述
行操作的方法复杂点~作为中间者和每一项相关又和表头相关。
在这里插入图片描述
请添加图片描述

GitHub 加速计划 / vu / vue
100
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:19 天前 )
9e887079 [skip ci] 11 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐