子组件代码：
<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(query); 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; } }, } 标签：vue,multipleSelectValue,sessionStorage,element,let,query,下拉框,accountId From： https://www.cnblogs.com/xiaofang234/p/17243257.html