需要对el-table的树状表格根据输入机构名称,筛选出符合条件的数据,可用如下方法:
页面内容如下:
<el-input v-model="ogeName" placeholder="请输入机构名称">
<el-table :data="list" row-key="id" :tree-props="{children:'children',hasChildren:'hasChildren'">
<el-table-column label="机构名称" prop="attributes.org_name"></el-table-column>
</el-table>
数据格式如下:
data() {
return {
data: [{
attributes:[org_name:'1'],
hasChildren: true,
label: '一级 1',
children: [{
attributes:[org_name:'1'],
hasChildren: true,
label: '二级 1-1',
children: [{
attributes:[org_name:'1'],
hasChildren: false,
label: '三级 1-1-1'
}]
}]
}],
};
},
具体筛选方法如下:
// 查询
handleSearch() {
let list = this.list
let lastList = this.handleTreeData(list,this.orgName)
this.list = lastList
}
// 筛选数据
handleTreeData(treeData,filterValue) {
if (!treeData || treeData.length !== 0) {
return []
}
const data = []
for (let i = 0; i < treeData.length; i++) {
let match = false
for (const pro in treeDate[i]) {
if (pro === 'label') {
match |= treeData[i][pro].includes(filterValue)
if (match) break
}
if (this.handleTreeData(treeData[i].children,filterValue).length > 0 || match) {
data.push({ ...treeData[i],children: this.handleTreeData(treeData[i].children,filterValue})
}
return data
}