vue2，实现动态循环筛选功能，根据选择内容显示输入框类型，利用map映射关系绑定数据，同时能随意删除当前行

本文链接：https://blog.csdn.net/vegaGao/article/details/134289066

要求：select 内有多个选项，根据所选选项，显示右侧的输入框类型，同时能添加一条筛选条件，可删除任意一条筛选条件

html部分

<div>
		<div>
      <div v-for="line,index in selectLine" style="display: flex;">
        <el-select v-model="line.value" placeholder="请选择" @change="selectChange(line)">
          <el-option v-for="data in selectData" :key="data.label" :label="data.label" :value="data.label"></el-option>
        </el-select>

        <div v-if="line.compType == 'select'">
          <el-select v-model="line.childSelectDataValue" placeholder="请选择">
            <el-option v-for="data in childSelectData" :key="data" :label="data" :value="data"></el-option>
          </el-select>
        </div>
        <div v-else-if="line.compType == 'input'">
          <el-input v-model="line.childInputValue" placeholder="请输入内容"></el-input>
        </div>
        <div v-else-if="line.compType == 'time'">
          <el-date-picker v-model="line.childTimeValue" type="date" placeholder="选择日期"></el-date-picker>
        </div>
        <div v-else>
          <el-button>默认按钮</el-button>
        </div>
        <span v-if="index == selectLine.length-1" style="width:30px;height:30px;font-size: 32px;line-height: 40px;" @click="add()">+</span>
        <span v-if="index != 0" style="width:30px;height:30px;font-size: 32px;line-height: 40px;" @click="del(index)">-</span>
      </div>
    </div>
    <div>
      <el-button type="primary" @click="getValue()">获取最终的值</el-button>
    </div>
	</div>

javascript部分

<script>
  export default {
    components : {
      
    },
    computed:{

    },
    data(){
      return{
        selectLine:[],
        selectData:[
          {label: "Foo"},
          {label: "Bar"},
          {label: "Car"}
        ],
        compMap:{},
        childSelectData:["男","女"],
      }
    },
    mounted(){
      this.selectLine = [{}] //这里可以写默认值
      this.compMap = new Map()
      this.compMap.set("Foo","select")
      this.compMap.set("Bar","input")
      this.compMap.set("Car","time")
    },
    methods:{
      selectChange(line){
        line.compType = this.compMap.get(line.value)
      },
      add(){
        this.selectLine.push({})
      },
      del(index){
        this.selectLine.splice(index, 1)
      },
      getValue(){
        console.log(this.selectLine)
      }
    }
  }
</script>