Elementui 表格请求懒加载

 <el-table
            :data="cityList"
            header-row-class-name="customCla"
            border
            style="width: 50%"
            row-key="id"
            height="800"
            lazy
            :load="load"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >   
        <el-table-column prop="deep" label="深度" align="center"> </el-table-column>
        <el-table-column prop="ext_name" label="城市名" align="center"> </el-table-column>
        <el-table-column prop="pinyin" label="拼音" align="center"> </el-table-column>
        </el-table>

import { city } from '@/api/MenuServe';
export default {
    created() {
        this.getCityList();
    },
    data() {
        return {
            cityList: []
        };
    },
    methods: {
        async getCityList(id) {
            let { data: res } = await city({ id });
            this.cityList = res.data.map((e) => {
                e.hasChildren = true;
                return e;
            });
        },
        //点击表格时请求
      async load(tree, treeNode, resolve) {
            let { data: res } = await city({ id: tree.id });
            let a = res.data.map((e) => {
                e.hasChildren = true;
                return e;
            });
            setTimeout(() => {
                resolve(a);
            }, 1000);
        }
    }
};
</script>

主要是通过

 设置 lazy   :load="load"  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 这三个属性

表格中的数据必须带有hasChildren=true