el-tree的使用

            <el-form-item label="功能权限">
              <!-- show-checkbox 节点是否可被选择 默认false -->
              <!-- check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false -->
              <!-- node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 -->
              <!-- data 展示数据 -->
              <!-- default-checked-keys 默认勾选的节点的 key 的数组 -->
              <!-- props 配置见表 -->
              <!-- node-click 节点被点击时的回调 -->
              <!-- check-change 节点选中状态发生变化时的回调 -->
              <el-tree
                ref="menuTree"
                :data="menuList"
                show-checkbox
                check-strictly
                node-key="menuId"
                :default-checked-keys="menuChecked"
                :props="menuProps"
                @node-click="handleTreeNodeClick"
                @check-change="handleTreeNodeCheck"
              />
            </el-form-item>

数据项 :data=“menuList”

    // 所有的功能权限list
    getMenuList() {
      const menuApi = new ComApiUrl('sys', 'menu')
      menuApi.fetchList({}).then(res => {
        if (!res.code || res.code === 0) {
          this.menuList = res
          //   console.log(this.menuList) // 返回所有未经处理的后端路由权限列表
          const arr = this.changeList2Tree(0, this.menuList)
          this.menuList = arr
          console.log(this.menuList)// 返回经过处理的后端路由权限
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },

el-tree想要的数据结构是这样的

所以我们需要对后台返回的menuList做一个递归处理

最终的效果如下：

show-checkbox 节点是否可被选择 默认false

当去掉了show-checkbox，树形结构就会变为以下形状：

check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false

如果没有选择这个属性，看看效果：

此时，只有全部勾选子树，父树才会被勾选

如果添加了check-strictly属性，
那么在父子节点切换时不会相互受影响（勾选父节点，下面的子节点都会被勾选。取消所有的子节点，父节点也会跟着被取消。）

持续更新…