elementui 树形控件 懒加载 demo

先上图片，看看实例
这是第一层

这是第二层

步骤1，把树形控件的html代码写出来：

//props绑定的就是data里面的数据结构
//load绑定的就是点击树形结构展示第一层数据或子数据的方法
//row-key绑定的就是后端传回来的数据的id
<temptele>
<el-tree
    :props="teamProps"
    :load="loadNode1"
    row-key="id"
    show-checkbox
    lazy>
</el-tree>
</templete>

步骤二，去data写绑定的数据：

teamProps: {
		//展示的名称
        label: 'name',
        //数据所代表的id
        id: 'id',
        //表示这一层是否是最后一层
        isLeaf: 'isLeaf',
      },

步骤三，写树形控件loadNode1方法:

 loadNode1(node, resolve) {        // 加载 树数据
      let that = this;

      if (node.level === 0) {
        that.loadTreeData(resolve);
       
      }

      if (node.level >= 1) {
        this.getChildByList(node, resolve);
        //注意，我网上看别人写的时候加了这一句，
        //但是我加了这一行树形结构就展示不出来了，所以这一行我给删了
        //return resolve([]);
      }
    },
     // 获取loadtreeData 就是父节点数据，getChildByList就是异步获取子节点数据
    async loadTreeData(resolve) {     
    
     
     //如果有后端就写这个，后端没有写好就写假数据
      // this.$axios.get(`url`).then(res =>{
      //   resolve(res.data);
      // }).catch(err =>{
      //   console.log(err);
      // });

	  //假数据
      resolve(firstTreeData.list)
    },
    // 获取子节点请求
    getChildByList(node,resolve) {     
      // this.$axios.get(`url`,{
      //   params: {
      //     id: node.key
      //   }}).then(res =>{
      //   resolve(res.data);
      // }).catch(err =>{
      //   console.log(err);
      // });
      
      //假数据
      resolve(childrenTreeData.list)
    },

步骤四，需要引入假数据文件:

<script>
//在javascript里面引入假数据的文件,假数据文件和vue文件在同一个目录下
import firstTreeData from "./firstTreeData";
import childrenTreeData from "./childrenTreeData";
export default {

步骤五，写假数据：

//这个是第二层的假数据，文件名:childrenTreeData.js
//后端传回来的数据也需要是这种格式的
const childrenTreeData = {};
childrenTreeData.list = [
  {
    name: '孙悟空',
    id: '111-1',
    isLeaf: true,
  },{
    name: '唐僧',
    id: '111-2',
    isLeaf: true,
  },{
    name: '沙和尚',
    id: '111-3',
    isLeaf: true,
  },{
    name: '猪八戒',
    id: '111-4',
    isLeaf: true,
  },{
    name: '白龙马',
    id: '111-5',
    isLeaf: true,
  },
];
export default childrenTreeData

//这个是第一层的假数据,文件名:firstTreeData .js
const firstTreeData = {};
firstTreeData.list = [
  {
    id: '111',
    isLeaf: false,
    name: '西游记'
  },
  {
    id: '222',
    isLeaf: true,
    name: '三国演义'
  },
  {
    id: '333',
    isLeaf: true,
    name: '208成员'
  }
];
export default firstTreeData

希望我的这个能帮助到哪些还不懂树形控件的小伙伴们，当然，这个是我个人的一些见解，如果有错误的地方希望能理解，谢谢！