树形数据懒加载:
代码部分:
然后端配合给出适合的数据,然后把配置项写好,就可以直接渲染了
<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>