Vue动态添加项添加input输入框，实现同时实现两次动态添加

简述

为了实现这一需求，啊啊啊啊啊~简直要疯了；设计数据类型，读取数据，添加数据....一系列问题。记录开发不易啊，各种细节处理，调试。

需求

1.点击选中复选框，下面出现复选框选中项
2.不选中复选框时，不出现
3.同时输入框也是可以动态添加的
4.也可以指定项删除

效果图

具体实现效果图如下:

效果图

前提准备

1.搭建Vue环境
2.引入elementUI依赖，这里是全局引入的
3.路由router，本项目引入了，看个人需要引入

源码

              <!-- form表单 -->
 <el-form ref="form" :model="formContract" label-width="80px">
              <el-form-item label="补充项目">
              <!--读取数据到 复选框  -->
                <el-checkbox-group v-model="formContract.checkedServices" @change="handleCheckedServiceChange">
                  <el-checkbox v-for="service in formContract.services" :key="service" :label="service" name="type">{{service}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <!--分割线  -->
              <el-divider></el-divider>
          <!--读取数据  -->
              <section v-for="(domain, index) in formContract.domains" :key="domain.key">
                <el-row style="float: left;">
                <!--被选中的复选框项  加载到这 -->
                  <el-checkbox :label="domain.key" checked>{{domain.key}}</el-checkbox>
                </el-row>
                <el-form-item label="要求说明:">
                  <section v-for="(item,m) in domain.value" :key="m">
                  <!-- m为input索引 第一个只显示add -->
                    <el-row v-if="m===0">
                      <el-col :span="20" style="float: right; ">
                        <el-input @keyup.enter.native="addInput(index,m)" style="width: 600px;border: 1px solid #999;" v-model="domain.value[m]"
                          type="textarea" />
                       <el-button @click="addInput(index,m)" type="primary" plain circle>+</el-button>
                      </el-col>
                    </el-row>
                      <!--调整输入框距离上间距，后面输入显示删除按钮  -->
                    <el-row style="margin-top:10px;" v-if="m>0">
                      <el-col :span="20" style="float: right;  ">
                        <el-input @keyup.enter.native="addInput(index,m)" style="width: 600px;border: 1px solid #999;" v-model="domain.value[m]"
                          type="textarea" />
                      <el-button @click.prevent="removeInput(index,m)" type="danger" plain circle>-</el-button>
                      </el-col>
                    </el-row>
                  </section>
                </el-form-item>
              </section>
            </el-form>

行为方法：

<script>
  // 复选框数据
  const serviceOptions = ['服务内容', '服务时效', '服务价格', '付款条件', '验收条件', '售后条件', '其他'];
  export default {
    data() {
      return {
        //  form对象
        formContract: {
          type: '',
          // 选中项
          checkedServices: [],
          // 添加input数组
          inputCount: [],
          // 选中补充项目数组
          domains: [],
          services: serviceOptions,
        },
        //复选框选中的 前一次的数组数据
        checkedNum: [],
      }
    },
    methods: {
      // 复选框的改变事件
      handleCheckedServiceChange(value) {
        let checkedCount = value.length; //当前选中个数
        let num = this.checkedNum.length; //之前选中个数
        // 当前选中个数 比 上一次选中个数 多【追加一行】
        if (checkedCount > num) {
          const name = value[checkedCount - 1] // 售后条件
          // 追加一行属性
          this.formContract.domains.push({
            key: value[checkedCount - 1],
            value: [''],
          })
        } else {
          // 少【减少一行】  if(checkedCount < num)
          for (let i = 0; i < num; i++) {
            let indexs = value.indexOf(this.checkedNum[i]);
            console.log(i + '--inde:' + indexs)
            if (indexs == -1) {
              console.log("www:" + this.checkedNum[i])
              this.formContract.domains.splice(i, 1)
            }
          }
        }
        this.checkedNum = value //记录选中的数据
      },
      // 添加输入框事件
      addInput(index, m) {
        const inputItem = this.formContract.domains[index].value[this.formContract.domains[index].value.length - 1]
        if (inputItem.trim() === '') {
          this.$message.error('请您填写完一项后继续再追加')
        } else {
          this.formContract.domains[index].value.push('')
        }
      },
      // 删除输入框事件
      removeInput(index, m) {
        // console.log("item11:" + JSON.stringify(item))
        // var index = this.formContract.inputCount.indexOf(item) //索引
        console.log(index)
        if (m !== -1) {
          this.formContract.domains[index].value.splice(m, 1)
        }
      },
    }
  }
</script>

数据格式：

 this.formContract.domains: [
          {
             key:'title111',
             value:['data1','data11']
         } ,{
           key:'title222',
           value:['data2','data22']
           }
       ],