ElementUI中table组件懒加载效果,并默认展开第一层的数据
在ElementUI的Table组件中实现懒加载效果,并默认展开第一层数据,可以通过设置lazy
属性为true
来启用懒加载,并提供load
方法来加载子节点数据。同时,可以通过设置default-expand-all
或:default-expanded-keys
属性来默认展开第一层数据。
以下是一个简单的示例代码:
<template>
<el-table
:data="tableData"
style="width: 100%"
lazy
:load="load"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
default-expand-all
>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
loading: false
};
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: ++this.id,
date: '2016-05-02',
name: '张小刚',
address: '上海市普陀区金沙江路 1518 弄'
}
]);
}, 1000);
}
}
};
</script>
在这个例子中,tableData
是表格的数据源,load
方法用于加载子节点数据。lazy
属性被设置为 true
来启用懒加载功能。tree-props
属性用于指定树形数据的默认属性名,default-expand-all
属性用于默认展开所有层级的数据。
请注意,示例中的 load
方法是一个简单的模拟,它在1秒后通过 resolve
函数返回模拟的子节点数据。在实际应用中,你需要替换为真实的异步数据加载逻辑。
评论已关闭