编写请求接口
import request from '@/utils/request'
export default {
// 1.获取分类数据
getCategoryData() {
return request({
url: `/service_video/category/getTreeCategory`,
method: 'get'
})
}
}
在列表页，导入请求，然后在调用请求 Api 拿到分类树形结构数据渲染
因为我们后台给的是 title 而且 el-tree 默认的是 lable 需要改下
最终的代码如下，参考自己写也行，复制也可以
<template>
<div class="app-container">
<el-input v-model="filterText" placeholder="Filter keyword" />
<el-tree
ref="tree"
:data="list"
:props="defaultProps"
:filter-node-method="filterNode"
class="filter-tree"
default-expand-all
/>
</div>
</template>
<script>
import category from '@/api/video/category/category';
export default {
name: "list",
data() {
return {
filterText: '',
list: [],
defaultProps: {
children: 'children',
label: 'title'
}
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val)
}
},
methods: {
filterNode(value, data) {
if (!value) return true
return data.title.indexOf(value) !== -1
},
getTreeCategory() {
category.getCategoryData().then(res => {
this.list = res.data.list;
}).catch(error => {
this.$message.error("服务器繁忙！");
});
}
},
created() {
// 一进入页面就加载分类列表数据
this.getTreeCategory();
}
}
</script>
<style scoped>
</style>
