封装element ui 下拉搜索带列表

话不多说，先上效果图

 这里是将它变成一个组件去使用，可以多个页面引入使用

一.模板界面部分

<template>
  <div class="about">
    <el-select
      v-model="selectVal"
      placeholder="全部"
      size="mini"
      clearable
      ref="select"
      style="width: 264px"
      @blur="clearData"
      @visible-change="visibleChange"
    >
      <!-- // 设置一个input框用作模糊搜索选项功能 -->
      <el-input
        class="input"
        placeholder="此处键入'关键词'搜索查询"
        prefix-icon="el-icon-search"
        v-model="keyWordFilter"
        @input="handleInput"
        @clear="clear"
        clearable
      ></el-input>
      <!-- // 设置一个隐藏的下拉选项,选项显示的是汉字label,值是value //
      如果不设置一个下拉选项，下面的树形组件将无法正常使用 -->
      <el-option hidden key="id" :value="selectVal" :label="selectName">
      </el-option>
      <div class="down">
        <ul>
          <li
            v-for="(item, index) in searchList"
            :key="index"
            @click.stop="handleSearchList(item)"
          >
            {
   
   { item }}
          </li>
          <li v-show="searchResult" style="text-align: center">暂无搜索结果</li>
        </ul>
      </div>
      <!-- <div v-show="searchResult">暂无搜索结果</div> -->
    </el-select>
  </div>
</template>

二.css部分

<style lang='scss' scoped>
::v-deep .el-scrollbar__bar {
  overflow-x: hidden;
}
::v-deep .el-input--mini .el-input__inner {
  height: 32px;
}
.input {
  width: 278px;
  margin: 10px;
}
.down {
  ul {
    width: 298px;
    max-height: 100px;
    overflow-y: scroll;
    margin: 0;
    padding: 0 12px;
    list-style: none;
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background: #1890ff;
      box-shadow: inset 0 0 5px rgb(59, 193, 230);
    }
    //滚动条底层颜色!
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: #ededed;

      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }

    li {
      overflow: hidden; // 溢出隐藏
      white-space: nowrap; // 强制一行
      text-overflow: ellipsis; // 文字溢出显示省略号
      cursor: pointer;
      &:hover {
        color: rgb(0, 81, 255);
      }
    }
  }
}
</style>

三.最后是js部分

import { objClasslist } from "@/api/informationManageMent/teachProject";
export default {
  name: "dorpdown",
  props: {
    url: {
      type: String,
    },
  },
  data() {
    return {
      selectVal: "", // select框的绑定值
      selectName: "", // select框显示的name
      keyWordFilter: "", // 搜索框绑定值，用作过滤
      solist: [], //搜索存储列表
      searchList: [], //接口返回搜索
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
      },
      // 总条数
      total: 0,
      searchResult: false,
      timer: null,
    };
  },
  created() {},

  watch: {
    keyWordFilter: {
      handler(v) {
        if (!v) {
          this.searchResult = false;
          this.searchList = [];
        }
      },
    },
    searchResult(n) {
      console.log(n);
    },
  },
  methods: {
    clearData() {
      this.keyWordFilter = "";
    },
    visibleChange(e) {
      if (!e) {
        setTimeout(() => {
          this.clearData();
        }, 150);
      } else {
        this.search();
      }
    },
    //   根据关键字搜索
    handleInput() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.search();
      }, 300);
    },

    // 模拟搜索防抖
    async search() {
      this.queryParams.keyword = this.keyWordFilter;

      let res;
      res = await objClasslist(this.queryParams.keyword, this.url);
      if (res.code == 200) {
        this.searchList = res.data;
        if (this.searchList.length == 0) {
          this.searchResult = true;
        } else {
          this.searchResult = false;
        }
        this.total = res.data.total;
      }
    },

    clear() {
      this.searchList = [];
    },
    //   搜索列表点击
    handleSearchList(item) {
      this.selectVal = item;
      console.log(this.selectVal);
      this.$emit("modelClass", this.selectVal);
      this.$emit("modelOrigin", this.selectVal);
      this.visibleChange();
      this.$refs.select.blur();
    },
  },
};
</script>

最后是页面引入使用啦

import dorpdown from "../component/dorpdown.vue";

  <el-col :span="3.5">
        <dorpdown
          url="/backbone/scientificTeach/categoryList"
          @modelClass="changeModelClass"
        ></dorpdown>
      </el-col>
      
       changeModelClass(e) {
      this.modelClass = e;
      console.log(this.modelClass, "this.modelClass");
    },