Vue实战之Element树形控件

实现效果:

1.请求接口获得数据:

2.引入element树形控件

3.放入动态数据

import { rolesGet } from "@/http/request";
export default {
  created() {
    rolesGet("....")
      .then((res) => {
        console.log(res);
        let { meta, data } = res.data;
        if (meta.status == 200) {   
          this.data = data;
        } else {
          this.$message.error(meta.status);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        //可使用函数返回你要放入的属性名
        label: function (data) {
          return data.authName ? data.authName : data.roleName;
        },
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};