需要對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.listlet 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 = falsefor (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
}