el-table 前端自定义的列表添加和删除

1.前端自定义的列表添加和删除

 <el-form ref="formData" :rules="formRules" :model="ruleForm" label-width="200px" >
          <el-form-item label="要求内容:" prop="infoArrayDTOList">
            <el-button type="text"  @click="handleAdd('内容')">添加</el-button>
            <el-table :data="formData.infoArrayDTOList" height="300" class="box" :header-cell-style="{ background: 'rgb(242, 242, 242)' }" row-key="id" border fit highlight-current-row style="margin-top: 10px;">
           
              <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
              <el-table-column  prop='ruleName' label='信息' align="center" :render-header="addRedStar">
                <template slot-scope="scope">
                  <el-form-item :prop="'infoArrayDTOList.' + scope.$index + '.ruleName'" :rules="formRules.ruleName">
                    <el-input v-model="scope.row.ruleName" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column  prop='jobPosition' label='岗位' align="center" :render-header="addRedStar">
                <template slot-scope="scope">
                  <el-form-item :prop="'infoArrayDTOList.' + scope.$index + '.jobPosition'" :rules="formRules.jobPosition">
                    <el-select v-model="scope.row.jobPosition" multiple clearable placeholder="请选择" style="width:100%">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" align="center" width="80">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" :disabled="formTitleTip!='add'" @click.native.prevent="handleDelete('内容',scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
</el-form >

formData:{
    
    
infoArrayDTOList:[],
},
formRules:{
    
    
  contractOppositeName: [
      {
    
     required: true, message: "不能为空", trigger: "blur" },
      {
    
     max: 20, message: "20字以内", trigger: "blur" },
  ],
  jobPosition: [
       {
    
     required: true, message: "不能为空", trigger: "blur" },
       {
    
     max: 20, message: "20字以内", trigger: "blur" },
 ],
},

    handleAdd(val) {
    
    
      let obj = {
    
    
        ruleName: "",
        jobPosition: "",
      };
      if (val == "内容") {
    
    
        this.formData.infoArrayDTOList.push(obj);
      }
    },

  //删除行
    handleDelete(val, index) {
    
    
      if (val == "内容") {
    
    
        this.formData.infoArrayDTOList.splice(index, 1);
      }
    },