技術標籤：前端javascriptcss

<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>

實現的效果圖如下