El-tree in vue implements hierarchical filtering and keyword filtering
Vue uses the el-tree component to display information in a clear hierarchical structure that can be expanded or collapsed.
1. You can filter tree nodes by keywords, which is explained in the element document.
html page
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree">
</el-tree>
js part
<script>
export default {
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
},
data() {
return {
filterText: '',
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
Note: When you need to filter nodes, call the filter method of the Tree instance, and the parameters are keywords. It should be noted that filter-node-method needs to be set at this time, and the value is the filter function. When changing to actual data, pay attention to whether the key of the tree structure's rendering data is label. If not, then the filter function must be modified based on the actual data.
2. The tree structure level can be dynamically expanded to the specified level
html page.
<el-select
v-model="expandLevel"
placeholder="请选择"
@change="expandChange"
>
<el-option key="1" label="1级" value="1"></el-option>
<el-option key="2" label="2级" value="2"></el-option>
<el-option key="all" label="全部" value="all"></el-option>
</el-select>
<el-tree
node-key="id"
:data="data"
:props="defaultProps"
:default-expanded-keys="expandedKeys"
ref="tree">
</el-tree>
js part
<script>
export default {
data() {
return {
expandLevel: "1",
expandedKeys: [],
keyTree: [],
keyAllTree: [],
data: [],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
// 下拉框选择
expandChange() {
this.data= [];
if (this.expandLevel == "1") {
this.expandedKeys = [];
} else if (this.expandLevel == "2") {
this.expandedKeys = this.keyTree;
} else if (this.expandLevel == "all") {
this.expandedKeys = this.keyAllTree;
}
this.$nextTick(() => {
this.data= this.treeArr;
});
},
// 展开至全部时
getAllKey(tree) {
tree.forEach(element => {
this.keyAllTree.push(element.id);
if (element.children.length > 0) {
this.getAllKey(element.children);
}
});
},
// 获取树形数据
getList(){
getList().then(res=>{
//接口成功的.then函数
this.data=res.data.data
// 实际数据以接口返回为准，此处的数据为以下格式
// [{
// id: 1,
// label: '一级 1',
// children: [{
// id: 4,
// label: '二级 1-1',
// children: [{
// id: 9,
// label: '三级 1-1-1'
// }]
// }]
}
let keyval = [];
res.data.data.forEach(element => {
keyval.push(element.id); //keyval为临时存放展开某一级的标识，使用时注意el-tree是否以id作为标识
});
this.keyTree = keyval; // 展开至2级时
this.keyAllTree = [];
this.getAllKey(res.data.data);
this.treeArr = JSON.parse(JSON.stringify(res.data.data));
})
},
};
</script>
Note: When setting the dynamic level, set default-expand-all to false. When using the above code, pay attention to the difference between actual data and demonstration data.
3. Effect display
