ElementUI + VUE实现表格内编辑

实现效果

每行显示修改和删除按钮：

点击修改后显示保存和取消按钮：

点击保存或取消将回到上一状态。

原理

1. 设置被保存标志saveTF=false，记录当前是否有行数据被编辑
2. 设置中间变量chooseInfo=[ ]，记录被编辑的行数据
3. 设置中间变量chooseNo=""，记录被编辑行数据的唯一id
4. 展示表格时，判断当前行的主键是否等于chooseNo，是则表明当前行正在被编辑，展示input输入框和保存/取消按钮，否则正常展示该行数据和编辑/删除按钮
5. 点击编辑时，更新①②③的数据为该行数据
6. 点击保存时，将②的数据根据主键更新，将①置为false，将②③清空，并刷新表格
7. 点击取消时，将①②③数据重置为初始状态

关键代码

<el-table :data="weekProPlanTable" ref="weekProPlanTable" border :show-summary="true">
	<el-table-column prop="monCount" label="周一" align="center">
	   <template slot-scope="scope">
	        <span v-if="scope.row.id == chooseNo">
	            <el-input-number size="mini" placeholder="请输入数量" :controls="false" 
	            	v-model="chooseInfo.monCount"></el-input-number>
	        </span>
	        <span v-else-if="scope.row.monCount == 0"></span>
	        <span v-else>{{scope.row.monCount}}</span>
	    </template>
	</el-table-column>
	...
	<el-table-column prop="" label="操作" align="center" width="130" fixed="right">
	    <template slot-scope="scope">
	        <div style="display: flex; align-items: center; justify-content: center;">
	            <span v-if="scope.row.id != chooseNo" title="修改" @click="updateClick(scope.row)"
	                class="el-tag el-tag--mini" style="cursor: pointer;">修改</span>
	            <span v-if="scope.row.id != chooseNo" title="删除" @click="deleteClick(scope.row)"
	                class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">删除</span>
	            <span v-if="scope.row.id == chooseNo"  title="保存" @click="saveClick(scope.row)"
	                class="el-tag el-tag--success el-tag--mini" style="cursor: pointer;">保存</span>
	            <span v-if="scope.row.id == chooseNo" title="取消" @click="cancelClick(scope.row)"
	                class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;">取消</span>
	        </div>
	    </template>
	</el-table-column>
</el-table>

data() {
    return {
        //周采购计划表格
        weekProPlanTable: [], 
        chooseNo: "", //被选择的mes计划号
        saveTF: true, //是否已被保存
        chooseInfo: {
      		id: "",
        	monCount: 0,
        	//...
        },
    };
},

//更新按钮
updateClick(row){
    if(this.saveTF == true){
        this.$message.info("请修改");
        this.chooseNo = row.mESPlanNo;
        // console.log("row:" + JSON.stringify(row));
        this.saveTF = false;
        this.chooseInfo.monCount = row.monCount;
        //...
        this.chooseInfo.id = row.id;
    }else {
        this.$message.info("请先保存当前编辑项");
    }
},
//保存按钮
saveClick(row){
	this.$message.success(“成功！”);
	//axios保存数据
	//刷新表格
	//。。。
	//解除编辑状态
    this.chooseNo = "";
    this.saveTF = true;
    //将chooseInfo的数据重置
    this.resetChooseInfo();
},
//取消行信息的修改
cancelClick(row){
    this.$message.info("取消修改");
    //解除编辑状态
    this.chooseNo = "";
    this.saveTF = true;
    //将chooseInfo的数据重置
    this.resetChooseInfo();
},

参考链接

这位大神的代码更简洁，但是我的情况更复杂，不太好借鉴：

https://www.jianshu.com/p/33175c3a6ba4