iview-树形控件的使用（一）

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

首先引入组件：

然后是data数据：

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

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

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

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

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

1.将获取到的原始数据深拷贝一份

2.对得到的拷贝数据进行 *** 作后，赋值给Tree组件绑定的data

深拷贝方法：

 deepCopy(source) {

      let sourceCopy = source instanceof Array ? [] : {}

      for (var item in source) {

        sourceCopy[item] =   typeof source[item] === "object" ? this.deepCopy(source[item]) : source[item]

      }

      return sourceCopy

    }

以下方法实现功能为：让Tree结构中resourceId为某个值的数据被选中，并且该层级及以上层级都默认展开

node:为深拷贝后的原始数据 ， resourceId：想要被选中的那条数据的resourceId

 buildTree(node, resourceId) {

      if (node.currentNodeResources && node.currentNodeResources.length > 0) {

        if (node.currentNodeResources[0].resourceId === resourceId) {

          node.selected = true

          node.expand = true

          return node

        }

      }

      let current = null

      if (node.childNode && node.childNode.length > 0) {

        node.childNode.forEach((element) => {

          current = this.buildTree(element, resourceId)  //递归调用

          if (current.expand) {

            node.expand = true

          }

        })

      }

      return node

    },

---