Element 树形控件的使用

Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

基础的树形结构展示：

<template>
  <div>
    <el-tree
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>
/* eslint-disable */
import { roleGet } from "@/http/request.js";
export default {
  name: "RolesView",
  created() {
    roleGet("roles")
      .then((res) => {
        // console.log(res);
        let { meta, data } = res.data;
        if (meta.status == 200) {
          // 改变原数据，第一层加一个authName字段
          data.forEach(r=> {
           r.authName=r.roleName 
          });
          this.data = data;
        } else {
          this.$message.error(meta.msg);
        }
      })
      .catch((err) => {
        this.$message.error(err);
      });
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label:'authName'
        // 下面这种方法，不用增加数据
        /* label: function (data) {
          // 返回要渲染的数据的名字。因为返回数据的第一层没有authName，采用三目运算法则，如果data.authName可以渲染数据就用它，不能就用data.roleName
          return data.authName ? data.authName : data.roleName;
        }, */
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  },
};
</script>