vue 下拉框和输入框动态加减

<template>

  <div class="lin-container">

    <div class="lin-wrap-ui">

      <el-card class="box-card" style="margin-bottom:50px;padding-bottom:20px;">

        <div class="block-box">

          <el-row class="input-row" v-for="(item, index) in list" :key="index">

             <el-select class="el-select" v-model="item.label">

              <el-option

                v-for="(item, index) in addList"

                :key="index + 1"

                :label="item.label"

                :value="item.value"

              ></el-option>

            </el-select>

            <el-input v-model="item.text" placeholder="请输入内容" class="input-detail"></el-input>

            <div class="function">

              <i class="el-icon-remove" v-if="list.length-1" @click="removeContent(index)"></i>

              <i class="el-icon-circle-plus" v-if="index === list.length - 1" @click="addContent"></i>

            </div>

          </el-row>

          <el-button type="primary" @click="submit">主要按钮</el-button>

        </div>

      </el-card>

    </div>

  </div>

</template>

  list: [{ text: "", type: "" }],

            addList: [

                {

                    value: "老板",

                    label: "老板"

                },

                {

                    value: "经理",

                    label: "经理"

                }

            ]

 addContent() {

            this.list.push({text: ""});

        },

 

        removeContent(index) {

            this.list.splice(index, 1);

        },

        submit(){

            console.log(this.list)

        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值