el-Table表格树形数据懒加载_el-table 树形懒加载

树形数据懒加载:

 代码部分:

然后端配合给出适合的数据,然后把配置项写好,就可以直接渲染了

 <el-table
      :data="tableData"
      border
      height="640"
      style="width: 100%"
      row-key="category_id" // 绑定的每行key值
      :lazy="lazy"  // 布尔值 是否开启懒加载函数
      :load="load"  // 懒加载事件
      :default-expand-all="defaultExpandAll" // 布尔值是否展开所有
      :tree-props="{ children: 'children',hasChildren: 'hasChildren' }" 
      // 如果有children就渲染第二层 如果有 hasChildren 为true就加载事件渲染第二层
      // 以此类推
    >
 </el-table>
 
 <script>
    export default{
        data(){
            return{
                defaultExpandAll: false, // 展开所有
                lazy: true,    // 开启加载       
            }  
        methods:{
            load(tree, treeNode, resolve) {
                // tree 点击的当前行row
                // treeNode 点击当前行的子
                // resolve 当前行回调函数 渲染表格
               setTimeout(() => {
                    let params={
                          category_id:"", // 类目id
                          level:tree.level, // 第几级
                          status:tree.status, // 状态
                          attr_name:tree.attr_name?tree.attr_name:"", // 材质
                          parent_id:tree.category_id, // 父类id 也是请求下一级的标识id
                     }
               CategoryListData(params).then((res)=>{ // 第二层 数据请求
                      let arr=[]
                     res.data.list.forEach(item => {
                               arr.push({
                               // 第二层对应的返回字段
                               category_id:item.category_id,
                               category_name:item.category_name,
                               level:item.level,
                               code:item.code,
                               status:item.status, 
                               hasChildren:item.hasChildren, 
                             // 第二层必须返回hasChildren为true 才能展开第二层 开始懒加载
                               })                            
                               resolve(arr) // 返回数组给第二层渲染
                                 })
                                })
                         }, 1000)
                  }            
            }      
        }
 </script>