vue+element 下拉框选择加搜索并且列表选项带图片

子组件代码：

<template>

  <!-- 单选下拉框 -->

  <el-select

    v-model.trim="selectValue"

    filterable

    clearable

    :placeholder="placeText"

    :filter-method="filterMethod"

    :loading="loading"

    @clear="clearSub"

    @focus="focusSub"

    @change="changeSubCoin"

    class="subSelect"

    ref="subSelect"

    v-if="selectType != 4"

  >

    <el-option

      v-for="(item, index) in selectOptions"

      :key="index"

      :label="item.subName"

      :value="item.subId"

    >

      <img :src="getImgUrl(item.icon)" v-if="selectType != 4" />

      <span>{{ item.subName ? item.subName : item.name }}</span>

    </el-option>

  </el-select>

  <!-- 多选下拉框 -->

  <el-select

    v-model.trim="multipleSelectValue"

    filterable

    clearable

    :placeholder="placeText"

    :filter-method="filterMethod"

    :loading="loading"

    multiple

    collapse-tags

    @clear="clearSub"

    @focus="focusSub"

    @remove-tag="removeTag"

    @change="searchTableList"

    class="subSelect1"

    ref="subSelect1"

    v-else

  >

    <el-option

      v-for="(item, index) in multipleSelectOptions"

      :key="index"

      :label="item.name"

      :value="item.name"

    >

    </el-option>

  </el-select>

</template>

<script>

import {

  accountSearch,

  querySelectionList,

} from "@/api/account.js";

export default {

  props: {

    selectType: {

      type: Number,

      default: 1,

    },

    accountId: {

      type: String,

      default: "",

    },

    searchType: {

      // 0 ：去向  1：来源

      type: Number,

      default: 0,

    },

    placeholderText: {

      type: String,

      default: "",

    }

  },

  data() {

    return {

      loading: false,

      selectOptions: [], // 单选下拉框列表选项

      selectValue: "", // 单选下拉框值

      selectName: "", // 单选下拉框名

      placeText: "请选择发放账户",

      multipleSelectValue: [], // 多选下拉框列表选项

      multipleSelectOptions: [], // 多选下拉框值

    };

  },

  mounted() {

    if (this.selectType === 1) {

      this.accountSearchList("");

    } else {

      this.getSelectionList(this.accountId, "", this.searchType);

      if (this.searchType == 0) {

        this.placeText = "请选择去向";

      } else {

        this.placeText = "请选择来源";

      }

    }

  },

  methods: {

    // 获取下拉框图片路径

    getImgUrl(img) {

      return require("@/assets/images/" + img); // 本地图片

    },

    // 发放虚拟币下拉选项支持模糊搜索匹配功能

    accountSearchList(params) {

      let param = {

        queryParam: params,

      };

      accountSearch(param).then((response) => {

        let res = response.data;

        if (res.code == 200) {

          this.selectOptions = res.data;

          sessionStorage.setItem("selectQuery", "");

        }

      });

    },

    // 账户明细-来源去向下拉选择框获取

    getSelectionList(accountId, params, type) {

      accountId = this.accountId

        ? this.accountId

        : sessionStorage.getItem("accountId");

      params = "";

      type = this.searchType;

      querySelectionList(accountId, params, type).then((response) => {

        let res = response.data;

        if (res.code == 200) {

          this.multipleSelectOptions = res.data;

        }

      });

    },

    filterMethod(query) {

      this.selectOptions = [];

      this.loading = true;

      this.getRemote(query);

    },

    getRemote: _.debounce(async function (query) {

      let query1 = sessionStorage.setItem("selectQuery", query);

      if (query !== "") {

        if (query != query1) {

          let param = {

            queryParam: query,

          };

          if (this.selectType === 1) {

            this.loading = false;

            let res = await accountSearch(param);

            this.selectOptions = res.data.data;

          } else if (this.selectType === 4) {

            this.loading = false;

            let res = await querySelectionList(

              this.accountId

                ? this.accountId

                : sessionStorage.getItem("accountId"),

              query,

              this.searchType

            );

            this.multipleSelectOptions = res.data.data;

          }

        }

      } else {

        this.clearSub();

      }

    }, 500),

    // 清空下拉框数据时触发

    clearSub() {

      this.loading = false;

      if (this.selectType !== 4) {

        sessionStorage.setItem("selectQuery", "");

        this.selectValue = "";

        this.selectName = "";

        let arr = [this.selectValue, this.selectName];

        this.$emit("getQuery", arr);

        this.placeText = "请选择发放账户";

        if (this.selectType === 1) {

          this.accountSearchList("");

        }

      } else {

       if (this.multipleSelectValue && this.multipleSelectValue.length > 0) {

        this.$emit("getParams", this.multipleSelectValue);

       } else {

         if (this.searchType == 0) {

          this.placeText = "请选择去向";

        } else {

          this.placeText = "请选择来源";

        }

        this.multipleSelectValue = [];

        this.$emit("getParams", this.multipleSelectValue);

        this.getSelectionList(

          this.accountId ? this.accountId : sessionStorage.getItem("accountId"),

          "",

          this.searchType

        );

       }

      }

    },

    // 聚焦时触发

    focusSub() {

      let query = sessionStorage.getItem("selectQuery");

       if (this.multipleSelectValue && this.multipleSelectValue.length > 0) {

        this.$emit("getParams", this.multipleSelectValue);

       } else {

         if (this.searchType == 0) {

          this.placeText = "请选择去向";

        } else {

          this.placeText = "请选择来源";

        }

        this.multipleSelectValue = [];

        this.$emit("getParams", this.multipleSelectValue);

        this.getSelectionList(

          this.accountId ? this.accountId : sessionStorage.getItem("accountId"),

          "",

          this.searchType

        );

       }

      if (this.selectValue && query != "") {

        if (this.selectType !== 4) {

          this.selectValue = "";

          this.selectName = "";

          let arr = [this.selectValue, this.selectName];

          this.$emit("getQuery", arr);

          this.accountSearchList("");

        }

      } else {

        if (query) {

          if (this.selectType === 1) {

            this.accountSearchList("");

            this.placeText = "请选择发放账户";

          }

        }

      }

    },

    // 多选移除标签时触发

    removeTag() {

      if (this.multipleSelectValue && this.multipleSelectValue.length == 0) {

         if (this.searchType == 0) {

          this.placeText = "请选择去向";

        } else {

          this.placeText = "请选择来源";

        }

        this.multipleSelectValue = [];

        this.$emit("getParams", this.multipleSelectValue);

        this.getSelectionList(

          this.accountId ? this.accountId : sessionStorage.getItem("accountId"),

          "",

          this.searchType

        );

       }

    },

    // 切换子账户

    changeSubCoin(e) {

      this.selectValue = e;

      sessionStorage.setItem("selectQuery", "");

      this.selectOptions.forEach((item) => {

        if (item.subId == e) {

          this.selectName = item.subName;

        }

        if (item.id == e) {

          this.selectName = item.name;

          let subTagType = item.type;

          sessionStorage.setItem("subTagType", subTagType);

          this.$emit("getSubTagType", subTagType);

        }

      });

      let arr = [this.selectValue, this.selectName];

      this.$emit("getQuery", arr);

    },

    searchTableList(e) {

      this.multipleSelectValue = e;

      this.$emit("getParams", this.multipleSelectValue);

    },

  },

};

</script>

<style scoped>

.el-select-dropdown__item {

  display: flex;

  align-items: center;

}

img {

  display: inline-block;

  width: 70px;

  height: 24px;

  margin-right: 10px;

}

</style>

<style lang="scss" scoped>

.subSelect {

  width: 240px;

}

.subSelect1 {

  width: 260px;

  /deep/.el-select__tags-text { // 解决下拉框文本过长溢出

    display: inline-block;

    max-width: 150px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

  }

  /deep/.el-tag__close.el-icon-close {

    top: -7px;

  }

  /deep/ .el-input__suffix {

    height: 40px !important;

  }

}

</style>

单选框父组件代码：

<!-- 搜索下拉组件 -->

<template>

<div>

<select-search

    :selectType="1"

     @getQuery="getQuery"

     ref="subSelect"

></select-search>

</div>

</tempalte>

import SelectSearch from "@/components/selectSearch/index.vue";

export default {

  components: {

    SelectSearch

  },

  data() {

    return {

      accountId: "", // 账户id

      subValue: "", // 子账户值

      subName: "", // 子账户名

    };

  },

  methods: {

    getQuery(value) {

      this.subValue = value[0];

      this.subName = value[1];

    },

}

多选框父组件代码：

<!-- 搜索下拉组件 -->

<template>

<div>

<select-search

    :selectType="4"

    :placeholderText="placeholderText1"

     :accountId="accountId"

     :searchType="0"

      @getParams="getdirection"

      ref="subSelect"

 ></select-search>

</div>

</tempalte>

import SelectSearch from "@/components/selectSearch/index.vue";

export default {

  components: {

    SelectSearch

  },

  data() {

    return {

　　direction: [],

      placeholderText1: "请选择去向",

      accountId: "",

    };

  },

created() {

    this.accountId = sessionStorage.getItem("accountId");

  },

  methods: {

    getdirection(value) {

      this.direction = value;

    }

    },

}