本文主要是介绍el-select配合el-tree实现下拉选以及数据回显以及搜索，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、前言
有时候就会遇到组件配合使用的情况，然后就整理了一下，后面大家需要的话可以直接拿去使用。
二、源码
<template><el-selectref="selectTree"filterablev-model="name":placeholder="'请选择'":filter-method="focus"clearable@focus="focus('')"@clear="clearValue"><el-option style="height: auto"><el-treeref="tree":data="data":expand-on-click-node="false"default-expand-allnode-key="categoryId":empty-text="'无匹配数据'":props="defaultProps"highlight-current@node-click="handleNodeClick":filter-node-method="filterNode"/></el-option></el-select>
</template><script>
export default {data() {return {name: '',categoryId: null,data: [{id: 1,pid: null,parentId: 0,children: [{id: 2,pid: null,parentId: 1,children: [{id: 8,pid: null,parentId: 2,children: [],postCode: '',postName: '添加1',sort: null,tenantId: 120,status: 1,createTime: '2023-10-30 14:28:16',childPost: null,postType: 2,nodeType: null,postAdmin: 10024},{id: 9,pid: null,parentId: 2,children: [],postCode: '',postName: '测试添加',sort: null,tenantId: 120,status: 1,createTime: '2023-11-01 15:30:22',childPost: null,postType: 2,nodeType: null,postAdmin: 10022},{id: 11,pid: null,parentId: 2,children: [],postCode: '',postName: '测试',sort: null,tenantId: 120,status: 1,createTime: '2023-11-02 13:26:24',childPost: null,postType: 2,nodeType: null,postAdmin: 10024},{id: 13,pid: null,parentId: 2,children: [],postCode: '',postName: '测试111',sort: null,tenantId: 120,status: 1,createTime: '2023-11-02 13:48:44',childPost: null,postType: 2,nodeType: null,postAdmin: 10022}],postCode: null,postName: '人事部门',sort: null,tenantId: 120,status: 1,createTime: '2023-10-26 10:55:18',childPost: null,postType: 2,nodeType: null,postAdmin: null}],postCode: null,postName: '回集团根节点',sort: null,tenantId: 120,status: 1,createTime: '2023-10-26 10:55:18',childPost: null,postType: 1,nodeType: 6,postAdmin: 10000}],defaultProps: {children: 'children',label: 'postName'}}},methods: {filterNode(value, data) {if (!value) return truereturn data.postName.indexOf(value) !== -1},// 节点点击事件handleNodeClick(data, node, nodeData) {this.name = data.postNamethis.categoryId = data.idthis.$refs.selectTree.blur()},// 数据集回显echoDataSet(val) {if (!val) returnconst categoryId = val.id || ''this.categoryId = categoryIdthis.$refs.tree.setCurrentKey(categoryId) // 设置节点高亮},focus(val) {this.$refs.tree.filter(val)},clearValue() {this.$refs.tree.setCurrentKey(null)}}
}
</script><style>
.el-select-dropdown__item {padding: 0;
}
</style>关于回显只需要在编辑的时候进行name字段的赋值，以及触发代码中数据回显的方法，传入需要选中的id就可以了。
这篇关于el-select配合el-tree实现下拉选以及数据回显以及搜索的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
