ElementUI Tree 树形结构展示

效果图

实现参考ElementUI提供的控件

官网链接：ElementUITree 树形控件 我使用了节点过滤这个控件，以下为ElementUI官方提供的代码。

在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。

<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> <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' }, { id: 10, label: '三级 1-1-2' }] }] }, { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' }] }, { id: 3, label: '一级 3', children: [{ id: 7, label: '二级 3-1' }, { id: 8, label: '二级 3-2' }] }], defaultProps: { children: 'children', label: 'label' } }; } }; </script>

下面是我写的具体实现

//页面实现 <el-form :inline="true" :model="searchForm" ref="searchForm" label-width="auto"> <el-input style="width: 200px" placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree @node-click="getNodeData" node-key="id" class="filter-tree" :data="materialTreeOptions" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree"> </el-tree> </el-form> //方法 <script> //调用接口fetchTree，具体后端怎么传数据可以查看我的另一篇文章哦！ import {fetchTree} from '@/api/workshop/materialtype' import {mapGetters} from 'vuex' export default { data () { return { filterText:'', searchForm:{ current: 1, size: 10, materialName:'', materialTypeId:'' }, dataForm: { key: '' }, defaultProps: { children: 'children', label: 'name' }, materialTreeOptions:[], materialOptions:[], dataListLoading: false, addOrUpdateVisible: false } }, watch: { filterText(val) { this.$refs.tree.filter(val); } }, created () { this.getMaterialType() this.getTreeselect() }, computed: { ...mapGetters(['permissions']) }, methods: { /** 通过树节点查询物料信息 */ getNodeData(data) { this.searchForm.id = data.id this.dataListLoading = true; fetchList(this.searchForm).then(response => { this.dataList = response.data.data.records; this.totalPage = response.data.data.total; }); this.dataListLoading = false; }, /** 通过关键字过滤树节点 */ filterNode(value, materialTreeOptions) { if (!value) return true; return materialTreeOptions.name.indexOf(value) !== -1; }, /** 查询物料分类下拉树结构 */ getTreeselect() { fetchTree().then(response => { var chooseMaterial = [] for (let i = 0; i < response.data.data.length; i++) { chooseMaterial[i] = response.data.data[i] } this.materialTreeOptions = chooseMaterial }); }, } </script>

fetchTree调用后台传过来已经封装好的树形数据 具体实现之前写过：https://blog.csdn.net/ka_xingl/article/details/109163852