当前位置：首页 > news >正文

elementui的el-select+el-tree+el-input实现可搜索的下拉树组件

news 2025/8/21 5:05:25

部分实现代码如下

<template>
<div><el-selectv-model="item.TableName"placeholder="请选择":disabled="!item.disabled"@visible-change="handleVisible"ref="TableName"><el-input placeholder="请输入关键词" v-model="inputValue" maxlength="40"><i slot="suffix" class="el-input__icon el-icon-search" @click="getTreeData"></i></el-input><el-option :value="item.TableName" style="height: 200px; overflow-y: auto"><el-treev-loading="loading":data="treeData":index="index":props="defaultProps":default-expand-all="expandAll"node-key="puid"highlight-currentv-if="refreshTree"@node-click="(data, node, item) =>handleNodeClick(data, node, item, index, 'TableName')"/></el-option></el-select>
</div>
</template>

在这里插入代码片

<script>
export default {name: '',components: {},props: {defaultProps: { type: Object, default: () => ({}) },treeData: { type: Array, required: true, default: () => [] },},data() {return {inputValue: '', //树搜索值expandAll: false, //搜索后全部展开refreshTree: true,loading: false,};},computed: {},methods: {// 树模型选中后触发，选中数据赋值到下拉框，判断是否有重复数据，重复的话提示handleNodeClick(data, node, item, index, position) {操作：自定义// 选择后收起下拉菜单setTimeout(() => {this.$refs[position][index].blur();}, 50);},// 筛选树模型数据；触发父组件搜索接口，修改this.treeData数值即可getTreeData() {this.loading = true;},// 下拉框出现或隐藏清空输入框值，重新获取所有treeDatahandleVisible() {this.inputValue = '';},},watch: {// 更新属性inputValue: {handler(newVal, oldVal) {if (newVal !== oldVal) {// 再次重新请求数据接口即可}},immediate: true,deep: true,},},};
</script>

<style lang="scss">
.el-input-group__append,
.el-input-group__prepend {padding: 0;background: #ffffff;font-size: 14px;
}
.el-input-group {width: 88%;padding: 10px 18px;
}
.el-icon-caret-right:before {content: '\e6e0';
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {background: #ffffff;
}
.el-select-dropdown__item {padding: 10px 0 0 0;}
.el-select-dropdown__list {padding: 6px 20px;
}
.el-scrollbar__bar.is-vertical {display: none;
}
.el-input__icon {transform: scale(1.5);
}