el-select+el-tree实现下拉树形选择

主要实现el-select下使用树结构,支持筛选功能

封装的组件 composeTree.vue

<template><el-select :popper-class="popperClass"v-model="selectedList"placeholder="请选择"filterable:filter-method="handleFilter" multiple:collapse-tags="collapseTags"size="mini"@visible-change="handleSelectVisibleChange"@remove-tag="removeTag"><el-tree :filter-node-method="filterNode" show-checkbox ref="tree"@check-change="handleCheckChange":data="treeList" :node-key="nodeKey":props="props"><template slot-scope="{ node, data }"><slot :node="node" :data="data"><span class="custom-tree-node">{{data[props.label]}}</span></slot></template></el-tree><el-option value="" style="display: none;"></el-option></el-select>
</template>
<script>
export default {props: {props: {type: Object,default: () => {return {children: 'children',label: 'label',value: 'value',}}},nodeKey: {type: String,default: 'value'},collapseTags: {type: Boolean,default: false},popperClass: {type: String,default: ''},selectedIdList: {type: Array,default: () => []},treeList: {type: Array,default: () => []}},model: {prop: 'selectedIdList',//选中的数组event: 'updateSelectedIdList'},watch: {selectedIdList: {handler(val) {this.$nextTick(() => {this.$refs['tree'].setCheckedKeys(val, true);})},immediate: true},},data() {return {list: [],searchVal: '',noFilterTreeNode: false,//是否过滤树节点selectedList: [],// checkedNodeList:[],}},created() {},methods: {//筛选handleFilter(val) {if (this.noFilterTreeNode) return;this.searchVal = val;this.$refs['tree']?.filter(val);},filterNode(value, data, node) {if (!value) return truereturn data[this.props.label].toLowerCase().indexOf(value.toLowerCase()) !== -1},removeTag(val) {this.watchCheckChangeRun = false;let obj = this.checkedNodeList.find(item => item[this.props.label] === val);this.$refs.tree.setChecked(obj[this.props.value], false);setTimeout(() => {//由于首次回显不对tree有任何操作的时候，直接移除标签，不能触发tree的change事件，所以添加个手动调用if (!this.watchCheckChangeRun) {this.handleCheckChange();}},1)},handleSelectVisibleChange(val) {this.noFilterTreeNode = false;if (!val) {//select框隐藏时，重置树结构if (this.searchVal) {this.handleFilter('')}}},//树选择变化handleCheckChange() {this.watchCheckChangeRun = true;let checkList=this.$refs['tree'].getCheckedNodes(true);this.selectedList = checkList.map(item => item[this.props.label]);this.$emit('updateSelectedIdList', checkList.map(item => item[this.props.value]));this.checkedNodeList = checkList;this.noFilterTreeNode = true;//避免vl-tree筛选问题},}
}
</script>

页面中引用组件

<template><div><h2>下拉框中树结构及搜索功能</h2><div v-for="(v,i) in list" :key="i" class="box"><composeTree  :props="props":nodeKey="'id'"v-model="v.selectedIdList" :treeList="treeList" :collapseTags="true"><!--  <template #default="{node,data}"><div>{{data.name}}-{{ data.id }}</div></template> --></composeTree><div>selectedIdList：{{ v.selectedIdList }}</div></div></div>
</template>
<script>
import composeTree from './composeTree.vue';
export default {data() {return {props:{children: 'children',label: 'name',value: 'id',},list: [{id: 1,selectedIdList:['Option001']},{id: 2,selectedIdList:['Option111']}],treeList:[]}},components: {composeTree},created() {const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const options = Array.from({ length: 50 }).map((_, idx) => ({id: `Option${idx + 1}`,name: `${initials[idx % 10]}${idx}`,children: [{id: `Option${'0' + idx + 1}`,name: `${initials[idx % 10]}${'0'+idx}`,},{id: `Option${'1' + idx + 1}`,name: `${initials[idx % 10]}${'1'+idx}`,}]}));this.treeList = options;}
}
</script>
<style lang="less" scoped>
.box {margin-bottom: 20px;
}
</style>