注意：tree树的展示，需要二级后端返回特定的数据格式
写法如下
<template>
<div class="app-container">
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
<el-tree
ref="tree2"
:data="data2"
:props="defaultProps"
:filter-node-method="filterNode"
class="filter-tree"
default-expand-all
/>
</div>
</template>
<script>
import sub from "@/api/edu/subject"
export default {
watch: {
filterText(val) {
this.$refs.tree2.filter(val)
}
},
data(){
return{
filterText: '',
data2: [], //返回所有分类数据
defaultProps: {
children: 'children',
label: 'title'
}
}
},
created(){
this.getTreeList()
},
methods:{
getTreeList(){
sub.getSubjectList()
.then(response=>{
// response.data.list;
this.data2 = response.data.list
// console.log(response.data.list)
})
.catch()
},
filterNode(value, data) {
if (!value) return true
return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
}
}
}
</script>效果展示：
