el-table tree-props 树级表格折叠搜索定位/树状表格行搜索/高亮定位/搜索定位/树结构搜索,自动展开到搜索到的行并且滚动到搜索行 - 使用Vue3(Vue2也差不多)
在Vue.js中使用Element UI库时,可以利用el-table
组件的tree-props
属性和自定义的搜索逻辑来实现树状格的搜索定位和高亮显示。以下是一个简单的示例:
<template>
<div>
<el-input v-model="searchQuery" placeholder="请输入内容" @input="filterTable"></el-input>
<el-table
:data="filteredData"
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
tableData: [
// 这里填充你的树状数据结构
],
filteredData: []
};
},
methods: {
filterTable() {
this.filteredData = this.performSearch(this.searchQuery, this.tableData);
},
performSearch(query, data) {
if (!query) {
return data;
}
const result = [];
const normalizedQuery = query.toLowerCase();
this.performSearchRecursive(result, normalizedQuery, data);
return result;
},
performSearchRecursive(result, query, nodes) {
if (!nodes || !nodes.length) {
return;
}
nodes.forEach(node => {
const matches = node.name.toLowerCase().includes(query);
if (matches) {
result.push(node);
}
if (node.children && node.children.length) {
this.performSearchRecursive(result, query, node.children);
}
});
}
}
};
</script>
在这个示例中,我们使用了一个el-input
来输入搜索关键词,然后通过一个方法filterTable
来过滤表格数据。performSearch
方法是一个递归函数,它会检查每个节点是否包含搜索词,如果包含,则将其添加到结果数组中。这样,每次输入搜索词后,表格都会更新,只显示包含搜索词的节点及其子节点。
请注意,你需要根据实际的数据结构调整prop
属性和搜索逻辑。在performSearchRecursive
方法中,node.name.toLowerCase().includes(query)
这一部分是用来判断节点是否匹配搜索词的,你可能需要根据实际的数据结构来修改这部分代码。
评论已关闭