ElementUI的el-tree控件用后台数据结构的生成及选择数据的回显

ElementUI tree

1. 分析业务需求

后台管理里面的权限设置 需要用到树形结构 我用了
ElementUI的el-tree控件
数据 1.拿到所有的父节点显示在tree中

<template>
 <el-tree
              :data="rootData"//数据
              default-expand-all
              show-checkbox
              node-key="id"
              ref="tree"//取值使用
              :default-checked-keys="checkedKeys" //选中的
              :default-expanded-keys="expandedKeys"//默认展开
              :props="defaultProps"//配置
            ></el-tree>
            </template>
 <script>
  export default {
    rootData() {//展示在tree的数据 大体就是这样的结构
      return {
      checkedKeys：[], //选中的
        expandedKeys: [], //默认展开 也可以不写
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
      };
      //对应显示
       defaultProps: {
          children: 'children',//子集
          label: 'label'//显示的文本
        }
    },
  };
</script>

这样就把数据渲染在tree上了

ElementUI tree的取值

 methods: {
 //返回选中的 这样返回的就是全选和半选中的全用 一般在提交时调用 传给后台保存
    getCheckedKey() {
      let parentArr = this.$refs.tree.getHalfCheckedKeys() //通过 key 获取 半选中
      let childeArr = this.$refs.tree.getCheckedKeys() //通过 key 获取 选中的
      let roleIds = childeArr.concat(parentArr) //全部选中的
      return roleIds
    },}

ElementUI tree 回显

一般点击编辑修改时 会有我们之前的选中的 第一步就是要把上次提交的节点选上
但是我们发现应为提交时 半选的父元素节点 如果选中会导致子节点全部选中 现在我能就 有什么方法也可剔除 中我们不需要的父节点 我做了一个回调函数把 不需要的节点地删除
后台给我的数据是这样的

["450719512824782849", "465875385280765953", "450719002138910720", "456515713616715777",…]
res.data.roleIds就是上面的数据

  this.checkedKeys = res.data.roleIds ? res.data.roleIds : [] //应该有的权限id
        var newArr = [] //需要展示的数据
        var item = ''
        this.checkedKeys.forEach(item => {
          this.checked(item, this.rootData, newArr)
          //   item  //上面的各项节点id
          // this.rootData 所有的id
        })
        this.checkedKeys = newArr//需要展示的数据
      })
 // 删除父元素
    checked(id, data, newArr) {
      data.forEach(item => {//遍历组成树结构的数据
        if (item.id == id) {//需要显示的如果有父元素的节点
          // 当子节点数组为数组[]时用  item.childList.length==0  childList是子节点的数组名
          // 当子节点为空是后台传的为null时用  item.childList==null
          if (item.childList == null) {
            newArr.push(item.id)//把这个数据添加
          }
        } else {//需要显示的没有父元素的节点但是有子节点
          if (item.childList != null) {
            this.checked(id, item.childList, newArr)
          }
        }
      })
    },

这样就可以！用到的思路很简单 有问题留言