antd vue写一个多条件查询

<template>
<!-- 数据筛选 -->
<div class="m-datafilter">
  <div
   v-for="(itemList,listIndex) in filterList"
   :key="listIndex"
   class="m-selectgroup"
  >
    <!-- 筛选条件1 -->
    <a-select
      v-model="itemList.select1"
      style="width: 120px"
      size="small"
      placeholder="请选择"
    >
      <a-select-option
        v-for="(item1,index1) in filterData1"
        :key="index1"
        :value="item1.value"
      >
        {{item1.label}}
      </a-select-option>
    </a-select>

    <!-- 筛选条件2 -->
    <a-select
      v-model="itemList.select2"
      style="width: 120px;margin-left:14px"
      size="small"
      placeholder="请选择"
    >
      <a-select-option
        v-for="(item2,index2) in filterData2"
        :key="index2"
        :value="item2.value"
      >
        {{item2.label}}
      </a-select-option>
    </a-select>

    <!-- 新增、删除、查询 -->
    <a-button @click="addNewCondition(listIndex)" size="small">新增</a-button>
    <a-button @click="deleteCondition(listIndex)" v-if="listIndex !== 0" size="small">删除</a-button>
    <a-button @click="queryTableData(listIndex)" v-if="listIndex + 1 === filterList.length" type="primary" size="small">查询</a-button>
  </div>
</div>
</template>
<script>
export default {
  data () {
    return {
      // 筛选条件1数据
      filterData1: [
        {label: '苹果', value: 1},
        {label: '香蕉', value: 2},
        {label: '西瓜', value: 3},
        {label: '橘子', value: 4}
      ],
      // 过滤条件列表
      filterList: [
        { select1: undefined, select2: undefined }
      ],
      filterData2: [
        { label: '等于', value: '=' },
        { label: '不等于', value: '!=' },
        { label: '大于', value: '>' },
        { label: '大于等于', value: '>=' },
        { label: '小于', value: '<' },
        { label: '小于等于', value: '<=' }
      ]
    }
  },
  methods: {
    // 新增
    addNewCondition (index) {
      this.filterList.push({ select1: undefined, select2: undefined })
    },
    // 删除
    deleteCondition (index) {
      this.filterList.splice(index, 1)
    },
    // 查询
    queryTableData (index) {

    }
  }
}
</script>
<style lang="less" scoped>
  .m-datafilter{
    overflow-y: auto;
    .m-selectgroup{
      margin-bottom:20px;
    }
  }
</style>

实现的效果图如下