VUE+elementui 表单动态添加input

 

<el-dialog title="基础信息" :visible.sync="baseOpen" width="80%" @close="baseInfoClose"
               v-dialog-drag :close-on-click-modal="false">
      <el-form ref="baseForm" :model="baseForm" :rules="baseRules" label-width="120px">
        <el-row v-for="(item, index, i) in personalInfo.expertiseListVo" :key="item.id">
          <el-col :span="12">
            <el-form-item label="擅长领域" prop="item.content">
              <el-input v-model="item.content" class="el-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="addInput()">添加</el-button>
            <el-button size="mini" type="text" icon="el-icon-remove-outline" @click="delInput(item,index,i)">删除</el-button>
          </el-col>
        </el-row>
      </el-form>
 </el-dialog>

export default {
data() {
    return {
      //标签页显示
      activeName: "first",
      // 遮罩层
      loading: false,
      //当前登录用户
      userCode: store.getters.userCode,
      //员工档案信息
      personalInfo: {
        expertiseListVo: [{id:undefined,content:undefined}]
      },
      talentInventory: true,
      // 查询参数
      queryParams: {
        userCode: undefined,
        personal: true
      },
      // 是否显示基础信息弹出层
      baseOpen: false,
      // 基础信息表单
      baseForm: {},
    };
  },

  methods: {
    //添加一行方法
    addInput () {
      this.personalInfo.expertiseListVo.push({ id: undefined, content: undefined })
    },
    //删除当前行方法
    delInput(item,index){
      this.personalInfo.expertiseListVo.splice(index,1)
    },
  },
}