动态获取数据并按顺序组合

当有多个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-input
                size="mini"
                v-model="nqItem.keyWord"
                placeholder="请输入搜索内容"
                @input="filterItems"
            ></el-input>
            <el-dropdown-item>
            <span  @click.stop="stopPropagation" @mousedown.prevent>
              <el-checkbox
                  v-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-checkbox
                     v-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: '', // 指标名称title
      indexModeList: [],
      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的其它属性和筛选后的values
        if (filteredValues.length > 0) {
          return {
            ...ill, // 保留ill对象的其它属性
            values: filteredValues, // 使用筛选后的values
            obj: 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);
  },