elementui表格在行内增删改查

elementui表格在行内增删改查（此处每次新增或修改条数为1条）

按钮调用方法

  <el-button  icon="iconfont iconadd" title="新建"
                                               @click="partsAdd"></el-button>
                                    <el-button  icon="iconfont iconedit" title="修改"
                                               @click="Edit"></el-button>
                                    <el-button  icon="iconfont iconremove" title="删除"
                                               @click="Del"></el-button>
                                    <el-button  icon="iconfont iconsave" title="保存"
                                               @click="Submit"></el-button>
                                    <el-button  icon="iconfont iconundo" title="撤销"
                                               @click="Cancel"></el-button>

表格渲染

     <el-table
                                      highlight-current-row
                                      @row-click="TableRowClick"
                                      @selection-change="TableSelect"
                                      :data="List">
                                <el-table-column
                                        class-name="select"
                                        type="selection"
                                        width="60">
                                </el-table-column>
                                <el-table-column min-width="100"
                                                 prop="param1"
                                                 label="参数1">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.show==null">{{scope.row.param1}}</span>
                                        <el-input class="edit_input" maxlength="15" v-else
                                                  v-model="List[scope.$index].param1"></el-input>

                                    </template>
                                </el-table-column>
                                 <el-table-column min-width="100"
                                                 prop="param2"
                                                 label="参数2">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.show==null">{{scope.row.param2}}</span>
                                        <el-input class="edit_input" maxlength="15" v-else
                                                  v-model="List[scope.$index].param2"></el-input>

                                    </template>
                                </el-table-column>
                                <el-table-column min-width="100"
                                                 prop="comment"
                                                 label="备注">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.show==null">{{scope.row.comment}}</span>
                                        <el-input class="edit_input" maxlength="15" v-else
                                                  v-model="List[scope.$index].comment"></el-input>

                                    </template>
                                </el-table-column>
                          
                            </el-table>

初始化变量

data(){
return{
                   partsType: 1,
                teamOpinion: [],
               List: [],
                SelectList: [],
                RowData: null,
                isPartsEdit: false,  //是否有正在编辑的数据
                EditNum: 0,    //正在编辑的数据所在的行数
}
}

增删改查方法

//方法
//table 选中之前改变
TableSelect(selection) {
                this.SelectList = selection;
            }, 
             //table 点选函数
 TableRowClick(val) {
                this.RowData = val
            }, 
            // 新增零部件点击
  Add() {
                if (!this.isPartsEdit) {
                    this.partsType = 1;
                    this.EditNum = this.List.length;
                    this.List.push({
                        show: true,
                        param1:'',
                        param2:'',
                        comment: '',
                    },)
                    this.isPartsEdit = true;
                } else {
                    this.$message.warning('请保存或撤销当前数据后再创建数据');
                }


            },
            // 修改零部件
  Edit() {
                if (!this.isPartsEdit) {
                    if (this.RowData != null) {
                        this.partsType = 2;
                        let editarr = [];
                        for (let x = 0; x < this.List.length; x++) {
                            if (this.List[x].id == this.RowData.id) {
                                this.List[x].show = true;
                                this.EditNum = x;
                            }
                            editarr.push(this.List[x]);
                        }
                        this.List = editarr;
                        this.isPartsEdit = true;
                    } else {
                        this.$message.warning(`请选择数据`)
                    }

                } else {
                    this.$message.warning('请保存或撤销当前数据后再修改数据');
                    return
                }


            },
            // 删除零部件
    Del() {
                if (this.partsSelectList.length > 0) {

                    this.$confirm('确定删除吗', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        closeOnClickModal: false
                    }).then(() => {
                 //删除调用接口

                    }).catch(() => {

                    })

                } else {
                    this.$message.warning(`请选择数据`);
                }

            },
            // 新增修改保存零部件
Submit() {
let addlist = {};
                if (this.partsType == 2) {
                    addlist = this.List[this.EditNum];
                } else {
                    addlist = this.List[this.List.length - 1];
                }
                if (!this.isPartsEdit) {
                    this.$message.warning(`当前无正在编辑的数据`);
                    return
                }
 if (this.partsType == 1){
 //新增调用接口

 }else{
 //修改调用接口
 }
       

     },
            // 取消当前编辑项
Cancel() {
                if (this.isPartsEdit) {
                    this.getPartsList();
                    this.isPartsEdit = false;
                } else {
                    this.$message.warning(`当前无正在编辑的数据`);
                }
            },

备注：

此方法逻辑：同时只能新增或修改一条数据