纯vue实现checkbox父子联动

对应代码的github仓库的地址:https://github.com/AlexZhong22c/vue-checkbox-table

demo (在线演示初次加载会有点慢,请稍等)

vue.js的出现,导致很多小插件的简单实现成为可能。

但是,正是由于vue的数据绑定使用起来耦合度太强,导致一些比较常规的插件的实现方式要稍微有所不同。


这是一个带复选框(checkbox)的表格,只用纯vue不用其他框架实现checkbox父子联动

效果:

  • 表头的checkbox视之为一个全局(global)的checkbox,点击它可以实现“全选”和“全不选”
  • 其他的checkbox视之为表中每个条目的一部分,若被勾选则代表该条目被勾选
  • 如果全部条目的checkbox都被勾上,表头的checkbox会被自动勾上

实现:

  • 每个条目中的checkbox用:value="item['id']"来绑定,每当被勾选,对应的value(也就是这个id)会被放进数组checkedIds
  • 用一个深度 watcher,通过判断数组checkedIds的长度,实现 “如果所有条目被勾选,变量isAllChecked变为true,则全局checkbox被自动勾选”
  • 全局checkbox不能用:value来绑定状态,要用:checked和一个onclick函数绑定状态,否则逻辑会混乱

作用原理链:

当我点击全局checkbox:

  1. 触发一个onclick函数
  2. 改变数组checkedIds(因为:value的数据绑定,影响其他checkbox是否会被勾选)
  3. 通过一个深度watcher得出变量isAllChecked的值(因为:checked的数据绑定,影响全局checkbox是否被勾选)

当我点击某个条目中的checkbox:

  1. 因为:value的数据绑定,改变数组checkedIds
  2. 通过一个深度watcher得出变量isAllChecked的值(因为:checked的数据绑定,影响全局checkbox是否被勾选)

最后:

如果对:value:checked的用法不清楚可以看看官网的checkbox是怎么写的:

https://cn.vuejs.org/v2/guide/forms.html#checkbox

但是官网并没有像这里这样做出一个带复选框的表格。

重申一次,正是由于vue的数据绑定使用起来耦合度太强,全局checkbox不能用:value来绑定状态,要用:checked和一个onclick函数绑定状态,否则逻辑会混乱。

另,如果你想找带分页导航条的demo,可以参考我的:

https://github.com/AlexZhong22c/vue-table-nav

如果各位看官喜欢的话留一个Star吧!

文章目录
  1. 1. 效果:
  2. 2. 实现:
  3. 3. 作用原理链:
    1. 3.1. 当我点击全局checkbox:
    2. 3.2. 当我点击某个条目中的checkbox:
  4. 4. 最后:
|