表单input 通过点击按钮新增input框(Vue2)

dy1717

已于 2025-02-25 09:07:57 修改

阅读量222

点赞数 1

文章标签： vue.js elementui javascript

于 2025-02-17 11:16:18 首次发布

本文链接：https://blog.youkuaiyun.com/dy1717/article/details/145352962

版权

需求：给label是车型的输入框后加入新增按钮，label是车型的输入框本身禁用；新增新的输入框，并填写数据，将数据用,拼接起来给车型输入框

        <el-row>
          <el-col :span="20">
            <el-form-item label="车型" prop="IncludeCarModel" class="binding-class">
              <el-input v-model="formData.IncludeCarModel" disabled />
            </el-form-item>
          </el-col>
          <el-button style="margin-left:5px" icon="el-icon-plus" circle @click="addNewPlant" />
          <span class="input-hint">只能使用"*"替代符</span>
        </el-row>

        <!-- 下面是输入框和 一个减号按钮 -->
        <el-row v-for="(item, index) in formData.formList" :key="index" style="margin-bottom: 8px;">
          <el-col :span="12">
            <el-form-item label="" prop="" class="binding-class">
              <el-input v-model="item.carModelName" @input="updateIncludeCarModel" />
              <el-button v-if="formData.formList.length > 0" circle style="margin-left:5px" icon="el-icon-minus" @click="removeField(index)" />
            </el-form-item>
          </el-col>
        </el-row>

    addNewPlant() {
      this.formData.formList.push({ carModelName: '' })
    },
    removeField(index) {
      this.formData.formList.splice(index, 1) // 删除指定索引的项
      this.updateIncludeCarModel()
    },
    // 展示数据的
    updateIncludeCarModel() {
      // 获取所有输入框中的值，按顺序合并为逗号分隔的字符串
      const carModels = this.formData.formList.map(item => item.carModelName).filter(name => name)
      this.formData.IncludeCarModel = carModels.join(',')
    },