部分实现代码如下
<template>
<div>
<el-select
v-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-tree
v-loading="loading"
:data="treeData"
:index="index"
:props="defaultProps"
:default-expand-all="expandAll"
node-key="puid"
highlight-current
v-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;
},
// 下拉框出现或隐藏清空输入框值,重新获取所有treeData
handleVisible() {
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);
}