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

部分实现代码如下

css 复制代码
<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>
javascript 复制代码
在这里插入代码片
javascript 复制代码
<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>
css 复制代码
<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);
}
相关推荐
码蜂窝编程官方21 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
gqkmiss21 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃26 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰30 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye37 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm39 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You2 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js