vue技术分享

vue技术分享—el-tree

在开发中，难免会遇到一些数据展示的形式是树状图的形式。当我们遇到这种 应该怎么才能把数据渲染到树状图中呢？

el-tree的用法

el-tree是elmentui中的原生组件，是专门来做数据的树状图展示。可以直接拿来用 代码如下：

 <el-tree :data="dataTree" show-checkbox node-key="id" :default-checked-keys="defkeys" default-expand-all
                :props="defaultProps">
 </el-tree>

下面来讲解里面属性的含义。
data----用来展示数据: 做数据绑定的，格式就是一个数组。官网上有说明。
props----树状图配置：用来定义data数据里的哪个字段用来做el-tree的children属性。在树形结构中，会存在多重父子关系，可以看作是节点。children就是这个节点。代码如下：

 defaultProps: {
                children: 'classroomVos',//看数据返回是否是children，具体情况看返回是什么
                label: 'className'//authName是数据返回文本的字段
            }

defaultProp是props的值。在defaultProps下有children和lebel。各自都代表不同的涵义。
label—指定节点标签为节点对象的某个属性值。
children—指定子树为节点对象的某个属性值。
show-checkbox—显示选择框。

渲染数据

1. 首先确保我们获取到的数据是树形结构，不过这一步一般都会在后端进行处理。
2. 在页面调用后端接口，请求到数据。代码如下：

        handleNodeClick() {
            infras.classroom(this.state, this.dataTree).then((res) => {
                this.dataTree = res.data.data
                //this.storageDto.total = res.data.count
                // console.log(this.userList);
                console.log(this.dataTree[0].className);
            })

        }

这里调用了后端接口，获取到了数据。赋值給data中的值 dataTree。然后利用props树状图配置来进行配置。代码如下：

 data() {
        return {

            dataTree: [],//对应tree的数据
            defaultProps: {
                children: 'classroomVos',//看数据返回是否是children，具体情况看返回是什么
                label: 'className'//authName是数据返回文本的字段
            },
            defkeys: [],//默认勾选对应的值
            state: '0'
        
        };
    }

其中需要注意的是 children这个值的由来 ‘classroomVos’ 是根据具体返回的对象来决定的。通俗点说 就是在封装请求的时候写的什么名字 这里就写什么名字 比如：

/**
 * 类别查询
 * @param {*} number 
 * @param {*} ClassroomVo 
 * @returns 
 */
function classroom(number,ClassroomVo){ //这个查询接口 返回数据是ClassroomVo 所以children 就写 ClassroomVo
  return Axios({
    url:`/class/classroom/${number}`,
    method:'get',
    data:ClassroomVo
  })
}

总结：这是根据我本人用法的一点分享。其他更多的用法可以根据官网研究。