elementUI el-table动态表格及操作

html结构：

        <!-- 规格表单 -->
        <div class="add-norms">
            <el-form :model="addForm" ref="addForm" :label-width="formLabelWidth" :rules="rules" class="normsForm"
                     label-position="left">

                <el-form-item label="规格名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请输入规格名称"></el-input>

                    <div>
                        <span class="el-icon-info" style="font-size: 15px;color: #2DACFF;margin-right: 0.5%"></span>
                        <span>请填写常用的商品规格的名称；例如：颜色；尺寸等。</span>
                    </div>
                </el-form-item>
                <el-form-item label="规格序号" prop="sequence">
                    <el-input v-model.number="addForm.sequence"
                              placeholder="请输入规格序号"></el-input>

                    <div>
                        <span class="el-icon-info" style="font-size: 15px;color: #2DACFF;margin-right: 0.5%"></span>
                        <span>请填写整数。</span>
                    </div>
                </el-form-item>

                <el-divider></el-divider>

                <div style="display: flex">
                    <CloudTitle>规格值</CloudTitle>
                    <el-button type="text" icon="el-icon-plus"
                               @click="addDomain" style="margin-left: 1%"
                               size="mini">
                        添加
                    </el-button>
                </div>
                <el-table :data="addForm.properties" border class="normTable">
                    <el-table-column label="排序" min-width="2">
                        <template slot-scope="scope">
                            <el-form-item :prop="'properties.' + scope.$index + '.sequence'"
                                          :rules="rules.properties.sequence" label-width="0px">
                                <el-input
                                        style="width:250px"
                                        v-model.number="scope.row.sequence"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格值" min-width="2">
                        <template slot-scope="scope">
                            <el-form-item :prop="'properties.' + scope.$index + '.value'"
                                          :rules="rules.properties.value" label-width="0px">
                                <el-input
                                        style="width:250px"
                                        v-model="scope.row.value"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="1">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-delete"
                                       @click="removeDomain(scope.row)"
                                       circle size="mini">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>

        <!-- 底部按钮 -->
        <div class="btn">
            <el-button @click="back">取消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
        </div>

重点是el-form-item的动态prop和rules

:prop="'properties.' + scope.$index + '.value'"
:rules="rules.properties.value" 

data：

	  //表单标签宽度
	  formLabelWidth: '85px',
	  //表格值
	  addForm: {
	      properties: []
	  },
      //验证规则
      rules: {
          name: [required("请输入名称")],
          sequence: [integerGreaterThanOrEqualToZero("请输入规格序号且为整数")],

          //动态表单验证规则
          properties: [{
               value: [required('请输入规格值')],
               sequence: [integerGreaterThanOrEqualToZero('请输入排序且为整数')]
         }]
     }

requeired,integerGreaterThanOrEqualToZero是项目封装的验证规则，根据需要自改一下吧

method：

  //新增规格值
  addDomain() {
      this.addForm.properties.push({
          sequence: 0,
          value: ''
      });
      this.rules.properties.push(this.rules.properties[0]);
  },

  //删除规格值
  removeDomain(item) {
      let index = this.addForm.properties.indexOf(item)
      if (index !== -1) {
          this.addForm.properties.splice(index, 1)
  }