Element-UI中el-tree的使用

写项目时经常会遇到使用el-tree的场景，针对用过的，做个简单记录

一，先简单讲一下怎么安装element-ui：

1.安装：

npm i element-ui

1. 在main.js中引入样式以及组件：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3.丢个官网在这里，详细可以去查看：

Element - The world's most popular Vue UI framework

二，el-tree常见属性：

data----用来展示数据

props----树状图配置

label---指定节点标签为节点对象的某个属性值

children---指定子树为节点对象的某个属性值

disabled---指定节点选择框是否禁用为节点对象的某个属性值

show-checkbox---显示选择框

getCheckedKeys----获取当前选中的节点的keys

default-expand-----all-默认展开

check-strictly----设置true，可以关闭父子关联

this.$refs.tree.setCheckedKeys([])-----清空当前的选择

三，如果已经获取到了数据，如何把它填充到el-tree中，让某些个复选框处于选中状态？

(在el-tree组件中通过setCheckedKeys****方法 + node-key将数据 回显到el-tree)

1.给tree补充属性node-key：

  <el-tree
      ref="refTree"
      :data="permissionData"
      :props="{ label: 'name' }"
      :default-expand-all="true"
      :show-checkbox="true"
      :check-strictly="true"
+     node-key="id"
    />

2.调用setCheckedKeys:

   async loadRoleDetail() {
      const res = await getRoleDetail(this.roleId)
      console.log('获取角色现有的权限', res.data.permIds)

      // 回填
   +   this.$refs.refTree.setCheckedKeys(res.data.permIds)
    },

（下次继续补充）