当有多个select，且选中后会按顺序组合：
第一列选中： “壹”,“贰”
第二列选中： “a”,“b”
那么组合后的数据为：“壹，a”，“壹，b”，“贰，a”，“贰，b”；依次类推.
该数据存储在前端，删除搜选项后需要再次返回所有数据。reScreenCondition字段为协助数据处理.
编写样式
<div v-for="(nqItem, nqIndex) in screenCondition" :key="nqIndex" class="nq-item-container"><el-dropdown trigger="click" ref="dropdown"><span class="nq-item-title">{{nqItem.title}}<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown" v-show="showDiv" class="custom-dropdown-menu" @click.stop="stopPropagation" @mousedown.prevent><el-inputsize="mini"v-model="nqItem.keyWord"placeholder="请输入搜索内容"@input="filterItems"></el-input><el-dropdown-item><span @click.stop="stopPropagation" @mousedown.prevent><el-checkboxv-model="nqItem.selectAll"@change="(query) => handleSelectAllChange(query, nqItem, nqIndex)">全选</el-checkbox><el-checkbox-group class="column" v-model="nqItem.obj" @change="(query) => handleCheckboxChange(query, nqItem, nqIndex)"><el-checkboxv-for="item in nqItem.values" :key="item":label="item"></el-checkbox></el-checkbox-group></span></el-dropdown-item><div class="dropdown-footer-wrapper"><el-button size="mini" type="primary" @click="handleConfirm({nqItem: nqItem, nqIndex: nqIndex})">确定</el-button></div></el-dropdown-menu></el-dropdown></div>定义数据
return {showDiv: true,searchQuery: '',indexListName: '', // 指标名称titleindexModeList: [],indexMode: [],// 指标方式maxSelections: 50, // 最多拼接50个组合screenCondition: {"sqDate": [{"attrGroupList": [{"title": "page_title","values": ["壹","贰"],"cell": "cell1"},{"title": "userid","values": ["a","b"],"cell": "cell2"// 代表具体哪一列}]}]},reScreenCondition: [], // 数据是复制screenCondition，做全选搜选处理// 新增一个对象来跟踪 checked 状态checkboxStates: {},}
监听搜索项
watch: {searchQuery(newVal) {this.filterItems(newVal);},},
初始化组件
mounted() {document.addEventListener('click', this.hideDivIfClickedOutside);// 在组件创建时，为 screenCondition 中的每个 values 元素初始化复选框状态this.screenCondition.forEach(condition => {condition.values.forEach(cell => {this.$set(this.checkboxStates, cell, false);});});},
具体数据处理
/** 分组确认按钮*/handleConfirm(obj) {let indexObj = this.screenCondition[obj.nqIndex]indexObj.arr = indexObj.obj?.map(git => {return {label: git,value: obj.nqItem.cell + '&' + git}})},/** 阻止事件冒泡到父元素*/stopPropagation(event) {event.stopPropagation();},hideDivIfClickedOutside(event) {if (!this.$el.contains(event.target)) {this.showDiv = false;}},/** 搜选*/filterItems() {// 获取每列关键字let nice = this.screenCondition?.map(real => {return {cell: real.cell,keyWord: real.keyWord}})// 使reScreenCondition关键字this.screenCondition.forEach(lik => {this.reScreenCondition.forEach(cill => {if (lik.title === cill.title) {cill.keyWord = lik.keyWord}})})// 根据关键字过滤数据this.screenCondition = this.reScreenCondition?.map(ill => {let filteredValues = [];nice.forEach(optin => {if (optin.cell === ill.cell) {if (ill.keyWord) {filteredValues = ill.values.filter(ear => ear.includes(optin.keyWord));} else {filteredValues = ill.values}}});// 如果filteredValues有数据，则返回一个新的对象，包含ill的其它属性和筛选后的valuesif (filteredValues.length > 0) {return {...ill, // 保留ill对象的其它属性values: filteredValues, // 使用筛选后的valuesobj: filteredValues // 使用筛选后的values};}// 如果没有找到包含关键字的值，可以选择返回null或者不返回任何内容（由你的逻辑决定）return null;}).filter(result => result !== null); // 过滤掉null值，确保searchList只包含有效的对象},/** 全选*/handleSelectAllChange(query, nqItem, nqIndex) {if (query === undefined) {this.screenCondition = this.screenCondition?.map(item => {this.$set(item, 'selectAll', true)// 复制当前的 item 对象const newItem = { ...item };// 添加一个新的数组属性 obj，其中包含一个空对象 默认全部选中newItem.obj = newItem?.values ? newItem?.values : [];newItem.arr = item.values?.map(git => {return {label: git,value: item.cell + '&' + git}})// 返回新的对象return newItem;})this.reScreenCondition = this.reScreenCondition?.map(item => {this.$set(item, 'selectAll', true)// 复制当前的 item 对象const newItem = { ...item };// 添加一个新的数组属性 obj，其中包含一个空对象 默认全部选中newItem.obj = newItem?.values ? newItem?.values : [];newItem.arr = item.values?.map(git => {return {label: git,value: item.cell + '&' + git}})// 返回新的对象return newItem;})} else {if (query) {this.$set(nqItem, 'selectAll', query)nqItem.obj = query ? nqItem.values : [];} else {nqItem.obj = []}}},/** check选项*/handleCheckboxChange(query, nqItem, nqIndex) {let checkedCount = query.length;nqItem.selectAll = checkedCount === nqItem.values.length;},
组件销毁
beforeDestroy() {// 组件销毁前移除监听器，防止内存泄漏document.removeEventListener('click', this.hideDivIfClickedOutside);},
