Element-ui中tree树形控件全选与取消全选的功能实现

还有一种就是直接给tree返回来的数据加个全选的数据就可以了

data里面的

html

方法 methods

Element-ui中tree树形控件全选与取消全选的功能实现（checkbox那种形式而不是tree）

//树形控件

//data里面的内容

//checkbox选择事件

1.dhtmlxTree

dHTMLxTree是一个功能丰富的Tree Menu控件。提供丰富的 *** 作API，AJAX支持和drag-n-drop功能。

2. Control.Treeview

采用Mootools开发的树形菜单控件。支持通过Ajax动态获取节点，设置默认选中某些节点。

3. Folder Tree

文件夹树形控件。支持利用拖放（drag and drop） *** 作来重新排序节点，利用Ajax更新节点。

4. DHTML Tree

这是一个基于标准Html结构构造的Tree控件。

5. dFTree

dFTree是一个javascript css Folder Tree支持利用Ajax技术动态新增/删除/修改节点等功能。

因为需要做一个权限管理，所以用到树形控件。

首先引入组件：

然后是data数据：

数据就会在页面上以树形结构的形式渲染出来：

左边是权限选项，右边是所选权限，如何达到这样的效果和只获取用户所选的权限。

树形控件里提供了三个事件和三个方法，这里用到的是事件是@on-select-change，点击树节点时触发，返回值是当前选中的节点数组，当前项，用到的方法是getCheckedAndIndeterminateNodes()，用于获取选中及半选节点。ref="tree'，这个属性一定要写，之后要获取的数据通过$refs.tree.data可获取。

首先是如何在右边显示用户选择的权限，要有层级关系，半选的选中的都要显示。

将用户选择的权限有层级关系的展示出来后，现在要做的是获取用户选择的权限，只需要全选的即可。这里用到的是iview提供的getCheckedAndIndeterminateNodes()方法。this.power里存放的就是用户选择的权限，然后通过按钮保存按钮提交到后台即可

---