动态，可点击的筛选操作查询（vue3）

子组件需求样例：

 子组件代码

<template>
  <div class="set-filter-criteria">
    <div
      class="set-filter-criteria-item"
      v-for="(criteria, index) in listItems"
      :key="index"
    >
      <div class="serial-number">{{ index + 1 }}</div>
      <span> 当 </span>
      <!-- 所属产品 -->
      <el-select
        v-model="criteria.optionsProductsed"
        class="m-2 their-products"
        placeholder="请选择所属产品"
        size="large"
      >
        <el-option
          v-for="item in criteria.optionsProducts"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- 条件 -->
      <el-select
        v-model="criteria.conditionSelected"
        class="m-2 condition"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in criteria.conditionSelect"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- 选择数据项 -->
      <el-select
        v-model="criteria.optionsDataItemed"
        class="m-2 select-data-item"
        placeholder="请选择数据项"
        size="large"
      >
        <el-option
          v-for="item in criteria.optionsDataItem[criteria.optionsProductsed]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <Delete class="icon" @click="handleDelete(index)" />
    </div>
    <div style="margin: 30px 0">
      <el-button
        type="primary"
        :disabled="disabled"
        @click="handleAddFilterCriteria"
      >
        +添加筛选条件</el-button
      >
    </div>
    <el-divider />
    <div class="set-filterf-criteria-button">
      <el-button :link="true" @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleAddFilter"> 确定</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, watch, computed } from "vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  Items: {
    type: Array,
    defualt: () => [],
  },
  optionsDataItem: {
    type: Object,
    defualt: () => {},
  },
  conditionSelect: {
    type: Array,
    defualt: () => [],
  },
  optionsProducts: {
    type: Array,
    defualt: () => [],
  },
});
const emit = defineEmits(["cancel"]);
const listItems = ref<any>([]);
const disabled = ref<Boolean>(false);
const obj = ref({
  optionsProducts: props.optionsProducts,
  optionsProductsed: "",
  conditionSelect: props.conditionSelect,
  conditionSelected: "unequalTo",
  optionsDataItem: props.optionsDataItem,
  optionsDataItemed: "",
});
watch(<object>props.Items, (val) => {
  listItems.value = JSON.parse(JSON.stringify(val));
});

onMounted(() => {
  listItems.value = JSON.parse(JSON.stringify(props.Items));
});
// 添加筛选条件
const handleAddFilterCriteria = () => {
  const arr = [...listItems.value];
  if (listItems.value.length <= listItems.value[0].optionsProducts.length - 1) {
    arr.push(JSON.parse(JSON.stringify(obj.value)));
    disabled.value = false;
  }
  listItems.value = arr;
  if (listItems.value.length == listItems.value[0].optionsProducts.length) {
    disabled.value = true;
  }
};

// 删除
const handleDelete = (index) => {
  if (listItems.value.length > 1) {
    listItems.value.splice(index, 1);
  } else {
    ElMessage.warning("至少保留一项");
  }
};
// 确定
const handleAddFilter = () => {
  const params: any = [];
  listItems.value.forEach((v) => {
    const { optionsProductsed, conditionSelected, optionsDataItemed } = v;
    const obj: object = {
      optionsProductsed,
      conditionSelected,
      optionsDataItemed,
    };
    params.push(obj);
  });
  emit("cancel");
};
// 取消
const handleCancel = () => {
  listItems.value = [obj.value];
  emit("cancel");
};
</script>

<style scoped lang="less">
.set-filter-criteria {
  min-height: 200px;
  border-top: 1px solid #dcdfe6;
  .icon {
    width: 1em;
    height: 1em;
    margin-left: 8px;
    cursor: pointer;
  }
  .set-filter-criteria-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0px;
    .serial-number {
      width: 20px;
      height: 20px;
      background-color: #dcdfe6;
      text-align: center;
    }
    .their-products {
    }
    .condition {
      :deep(.el-input__wrapper) {
        width: 130px;
      }
    }
    .select-data-item {
      :deep(.el-input__wrapper) {
        width: 450px;
      }
    }
  }
  .set-filterf-criteria-button {
    display: flex;
    justify-content: flex-end;
  }
}
</style>

点击父组件中下拉标志---展示组件

- 

父传子的数据结构