首先,我们需要明确什么是懒加载。懒加载即指仅当需要用到某个组件或数据时才进行加载,而不是一次性加载所有的数据和组件。在树状表格的场景中,懒加载指的是只有当节点被展开时才会加载子节点的数据。
接下来,我们将介绍如何使用vue实现一个懒加载的树状表格实例。
- 创建树状表格的基础组件
首先,我们需要创建一个基础的树状表格组件,包含展示数据所需要的功能,例如分页、排序、筛选等功能。这个基础组件可以参考element-ui的table组件,也可以自己手写。
- 数据格式的定义
树状表格的数据通常是嵌套的树形结构。我们需要定义一个数据格式,用于表示一条树形数据,例如:
{
id: 1,
label: '节点1',
children: [
{
id: 2,
label: '子节点1'
},
{
id: 3,
label: '子节点2'
}
]
}
其中,id
和label
是节点的基本信息,children
表示子节点数组。
- 指定表格列
在树状表格中,由于每个节点可能有不同的子节点数量,因此需要动态地生成列。我们可以在表格组件中指定表格列,例如:
columns: [
{
prop: 'id',
label: 'ID'
},
{
prop: 'label',
label: '名称'
},
{
type: 'expand',
expandColumn: true,
width: 50,
render: (h, params) => {
return h('div', {}, [
params.row.loading ? // 判断是否正在加载子节点数据
h('el-spinner', {
attrs: {
type: 'dots',
size: 'small'
},
style: {
display: 'inline-block',
marginRight: '5px'
}
}) :
null,
params.row.children && params.row.children.length > 0 ? // 判断是否有子节点
h('el-button', {
attrs: {
type: 'text',
icon: params.row.expanded ? 'el-icon-arrow-down' : 'el-icon-arrow-right',
size: 'mini'
},
style: {
transition: 'transform .3s, opacity .3s',
transform: `rotate(${params.row.expanded ? '90deg' : '0'})`,
opacity: params.row.expanded && params.row.loading ? 0.5 : 1
},
on: {
click: () => {
params.row.expanded = !params.row.expanded;
if (params.row.expanded && params.row.children && params.row.children.length === 0) { // 加载子节点数据
params.row.loading = true;
loadData(params.row).then((data) => {
params.row.children = data;
}).finally(() => {
params.row.loading = false;
});
}
}
}
}) :
null
]);
}
}
]
其中,columns
表示表格的列,expand
表示展开列,render
是当前列的渲染函数。我们在渲染函数中,通过判断节点的状态和属性来动态生成展开按钮,并在按钮被点击时加载子节点数据。
- 加载子节点数据
在点击展开按钮时,需要加载当前节点的子节点数据。为了避免一次性加载所有的数据,我们可以通过异步加载的方式来实现懒加载。具体实现方式可以参考以下两种方法:
(1) 使用Promise
使用Promise的方式需要手动实现异步加载逻辑,并将结果返回给params.row.children
。示例如下:
function loadData(node) {
return new Promise((resolve, reject) => {
// 加载子节点数据的逻辑
// ...
resolve(data);
});
}
(2) 使用async/await
使用async/await的方式可以更直观地实现异步加载逻辑,示例如下:
async function loadData(node) {
try {
const data = await axios.get(`/api/getChildren?id=${node.id}`);
return data;
} catch (error) {
console.error(error);
return [];
}
}
此外,我们还需要在节点的数据中添加expanded
和loading
两个属性,分别表示节点是否已展开和是否正在加载。可以在创建数据时进行赋值,也可以通过组件内的方法来修改。
- 添加搜索功能
在树状表格中添加搜索功能非常常见。我们可以为表格组件添加一个搜索框,并在输入关键字时触发搜索操作。实现方式可以参考以下示例:
<template>
<div>
<el-input placeholder="请输入关键字" v-model="keyword" style="width: 200px"></el-input>
<el-button type="primary" @click="search">搜索</el-button>
<el-table :data="data" :columns="columns" v-loading="loading">
<!-- ... -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
data: [],
columns: [], // 列定义
loading: false,
keyword: ''
};
},
methods: {
search() {
this.loading = true;
this.loadData().finally(() => {
this.loading = false;
});
},
async loadData() {
try {
const data = await axios.get('/api/getData', {
params: {
keyword: this.keyword
}
});
// 过滤数据
// ...
this.data = filteredData;
} catch (error) {
console.error(error);
this.data = [];
}
}
}
};
</script>
在搜索时,我们需要重新加载数据并根据关键字进行过滤。可以通过发起异步请求来加载数据,在响应结果中进行过滤后更新表格数据。需要注意的是,在表格数据过滤后,如果有节点被过滤掉,那么其所有的子节点也需要被过滤掉,否则会影响搜索结果的正确性。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue实现一个懒加载的树状表格实例 - Python技术站