vue2+element-ui新增编辑表格+删除行

实现效果：

 

代码实现 ：

          <el-table :data="dataForm.updateData"
                    border
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}">
            <el-table-column label="选项字段"
                             align="center"
                             prop="name">
              <template slot-scope="scope">
                <el-form-item :prop="'updateData.' + scope.$index + '.formName'"
                              :rules="[
                                { required: true, message: '请输入', trigger: 'blur' },
                                { min: 1, max: 20, message: '长度在1到 20个字符', trigger: 'blur' }
                              ]">
                  <el-input v-model="scope.row.formName"
                            clearable></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column fixed="right"
                             label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="addRow(scope.$index,scope.row,dataForm.updateData)"
                           type="text"
                           size="small">
                  新增
                </el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index,scope.row,dataForm.updateData)"
                           type="text"
                           size="small"
                           v-if="dataForm.updateData.length!=1">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

<script>
export default {
      data () {
        return {
            dataForm: {
                // 自定义字段
                updateData: [
                  {
                    // id: '',
                    formName: ''
                  }
                ]
                // 其他...    
            }
        }
      },
      methods: {
    // addRow 新增 自定义字段表格行
    addRow (index, rows, item) {
      // console.log(index, rows, item)
      // this.dataForm.updateData.push({
      //   // sort: this.dataForm.updateData && this.dataForm.updateData.length > 0 ? this.dataForm.updateData.length + 1 : 1,
      //   id: null,
      //   formName: ''
      // })
      // 数组中添加新元素
      item.splice(index + 1, 0, { formName: '' })
    },
    // deleteRow 删除 自定义字段表格行
    deleteRow (index, rows, item) {
      // console.log(index, '当前行索引', rows, '删除的目标行')
      // 从index这个位置开始删除数组后的1个元素
      item.splice(index, 1)
      // this.$confirm('删除当前行, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   item.splice(index, 1)
      //   // this.delArrId.push(rows.id) // 被删除的id数组集合
      //   // rows.isDelete = 1
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   })
      // })
    },
      }
}
</script>