vue中el-tree实现层级筛选和关键字过滤
vue使用el-tree组件可以用清晰的层级结构展示信息，可展开或折叠。
1、可以通过关键字过滤树节点，这一点在element文档中有说明。
html页面
<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部分
<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>
注意：在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。在换成实际数据时要注意，树形结构的渲染数据的key是否为label，如果不是，那要根据实际数据对过滤函数进行修改。
2、可以动态展开树形结构层级，使其展开至制定层级
html页面
<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部分
<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>
注意：在设置动态层级时要把default-expand-all设置为false。在使用以上代码时要注意实际数据与演示数据的区别。
3、效果展示
