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

要求: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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值