element懒加载的组件

<template>
<!-- 这个是懒加载的组件 -->
  <div>
      <h1>rights</h1>
      <el-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox
  @check-change="handleCheckChange">
</el-tree>
  </div>
</template>

<script>
export default {
 name:"RightsView",
 data() {
      return {
        // 配置数据对象的key名字的
        props: {
          label: 'name',
          children: 'zones'
        },
        count: 1
      };
    },
    methods: {
      // 勾选复选框时候触发
      handleCheckChange(data, checked, indeterminate) {
        // 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
        console.log(data, checked, indeterminate);
      },
 
      // loadNode点击层级不勾选复选框每次点击都会执行一遍
      loadNode(node, resolve) {
        // node.level第一层给一个数组数据
        if (node.level === 0) {
          return resolve([{ name: 'region1' }, { name: 'region2' }]);
        }
        // 大于第三层就不个数据了  直接是空的数据
        if (node.level > 3) return resolve([]);
    //  这个开关是用来判断给谁加子数据的
        var hasChild;
        if (node.data.name === 'region1') {
          hasChild = true;
        } else if (node.data.name === 'region2') {
          hasChild = false;
        } else {
          // 这个是随机值 其他的节点是否有数据 是随机值
          //如果0`1之间的随机数大于0.5 则为true,否则为false
          hasChild = Math.random() > 0.5;

          // 第五层之后就没有数据了
          hasChild=true
        }

        setTimeout(() => {
          var data;
          // 如果开关是true添加数据 否则不添加数据 
          if (hasChild) {
            data = [{
              name: 'zone' + this.count++
            }, {
              name: 'zone' + this.count++
            }];
          } else {
            data = [];
          }
        // resolve添加数据
          resolve(data);
        }, 500);
      }
    }
}
</script>

<style>

</style>
复制代码
复制代码

真实接口获取

• 当获取接口的数据和页面不一样的时候

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

<script>
import { rolesGet } from "@/http/request.js";
export default {
  name: "RolesView",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        // label: 'roleName' 第二种递归的方式
        //  label:function(data,node) 这是elemenui这个里面的方法
        // 此方法不用改变原数据
  /*       label: function (data, node) {
          console.log(data);
          // laber方法可以返回 你要渲染的数据的名字到底叫什么
          // 出现找不到的名字原因是data后面的名字不对
          // 解决:采用三木运算法则
          // 如果data.authName能渲染数据就用data.authName  如果不可以渲染就使用data.roleName
          return data.authName ? data.authName : data.roleName;
        }, */
        // 第三种方式:需要改变原来的数据 把第一层多加一个authName字段 值为roleName字段的值
        label:'authName'
      },
    };
  },
  created() {
    rolesGet("roles")
      .then((res) => {
        console.log(res);
        let { meta, data } = res.data;
        // 当请求成功,把数据给到vue的data中
        if (meta.status == 200) {
          data.forEach(r=>{
            r.authName=r.roleName
          })
      


          //  第二种递归的方式
          // data.forEach(r=>{
          //   if(r.children&&r.children.length){
          //     r.children.forEach(v=>{
          //       v.roleName=v.authName;
          //       if(v.children&&v.children.length){
          //         v.children.forEach(t=>{
          //           t.roleName=t.authName
          //           if(t.children&&t.children.length){
          //             t.children.forEach(i=>{
          //            i.roleName=i.authName
          //             })

          //           }
          //         })
          //       }
          //     })

          //   }
          // })
          this.$message.success(meta.msg);
          this.data = data;
        } else {
          this.$message.error(meta.msg);
        }
      })
      .catch((err) => console.log(err));
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

<style>
</style>