Vue+Elenment笔记（一）：el-table使用多选框与树形数据写一个有半选全选功能的表格。

 完整代码：

 运行效果：

 完成功能整理思路：

        特性：在el-tabel组件中定义复选框

 type="selection"

问题：表头全选只能勾选非树状数据子级的数据，但半选状态只需要你给任意一条数据定义选中就会让表头的全选框变成半选状态。

（1）使用：this.$refs.multipleTable.toggleRowSelection(row,true);定义一条数据为被选中，全选框就会变成半选状态，当你将非树状数据子级的数据全部定义为选中时全选框会变为全选状态。

问题：type：selection展现的复选框无法给树状数据父级定义半选状态（至少我是没找到如何改成半选状态，所以另辟曲径使用el-checkbox来达成效果）。

（2）使用：自定义row使用el-checkbox，根据官网介绍el-checkbox绑定indeterminate即可使其变为半选状态所以绑定半选和选择两个属性

     

结合以上两个完成构思，使用方法让其点击数据，在点击完成之后对全部进行判断，即：

        父级的所有子级有选中状态或者半选状态则父级为半选状态，父级的所有子级为选中状态则父级为选中状态，点击父级时判断是否有子级别然后将所有子级和父级的状态同步。

        随后将所有为选中状态的数据使用this.$refs.multipleTable.toggleRowSelection(row,true)在el-table中变为选中状态，为非选中状态得则定义为非选中状态this.$refs.multipleTable.toggleRowSelection(row,false)。

这样功能就出来了，我自己写这功能的时候都觉得我js写的重复很多很差，而且我的这个完成思路也可能不是很好，只能说是给不知道怎么弄得人一个思路之类的（如果你知道怎么给type=selection给树状数据生成的复选框上半选状态得话记得告诉我一下）。

        另外我这代码还有一个bug我在写着篇文章的时候才发现的，就是：表头的全选框在全选非全选的时候无法对半选的树状数据父级进行操作，这是一个小坑解决也挺简单的在全选非全选的时候判断一下就好了，如果你是直接复制代码的话记得修复一下这个bug。