引言近期项目需要，要在table表格中直接编辑内容，就是所谓的行内编辑，实现效果如下图，抄别人的图这是，网上找了很多大多数内容不全，要不讲解模糊，要不只提供一部分代码，经过整理完善，特别写了这篇文章。
主要实现原理是：通过v-show显示隐藏元素来实现行内编辑，true的时候显示编辑input行，false显示table内容，我自己项目的效果图如下：
实现table部分的代码如下
table中需要编辑的字段，我们要设置两种显示，input编辑行和span普通内容显示行
<el-table-columnlabel="项目名称">
<templatescope="scope">
<el-inputsize="small"v-model="scope.row.name"placeholder="请输入内容"v-show="scope.row.show">el-input>
<spanv-show="!scope.row.show">{{scope.row.name}}span>
template>
el-table-column>
我们需要v-show来控制显示那种内容，往往api接口传过来的值是没有相关参数的，例如代码中使用的show字段，这时就需要使用forEach()函数，只需要在获取的数据中增加上就可以了，代码实现思路是这样的
.then(response => {
this.items = response.data.data; //api获取到的数据
this.total = response.data.total; //分页字段
this.items.forEach(element => { element["show"] = false }); }); //增加show，默认false
这样我们只需要通过控制show值的变化，就可以来控制表格中的内容是编辑状态还是静态显示状态。
这里我做了按钮来控制table的状态，按钮是这样写的：
<el-button
size="mini"
:type="scope.row.show == true ? 'danger' :'primary'"
@click="scope.row.show == true ? handleSave(scope.$index, scope.row) : handleEdit(scope.$index, scope.row)"
icon="el-icon-edit"
>{{scope.row.show == true ? '保存' :'编辑'}}
这里让按钮在不同的操作，显示不同的名称和函数等，下边我们来写handleEdit和handleSave函数
handleEdit(index, row) {
row.show = true
//...业务代码
},
如果你运行一下项目，会发现table中毫无变化，why？
我们尝试着修改table中元素的内容，修改row.name = 1111，这时候表格中就有变化了，原来我们只更新show中的内容，表格是不会触发双向绑定修改内容的，但是如果每次修改都要赋值其中一个字段的内容也不友好，通过查询，找到了一个this.$set，当我们修改对象的属性或者增加属性的时候，视图没有跟着修改，也许这个时候就需要用到this.$set()这个方法了。
语法是这样的
调用方法：this.$set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值
我们重新写一下上边的代码
handleEdit(index, row) {
this.$set(row,row.show,true)
},
这时候，表格就可以正常进入编辑状态了，我们编辑完如何保存呢？
直接获取row中的数据，axios一下接口就可以了，最后别忘记重新请求一下数据，我为了省事，直接运行一下created中的函数。
handleSave(index, row){
//...业务逻辑，请求等
this.loadData() //重新获取页面所有数据
}
这样基本就完善了，只需要在函数中填充自己需要的业务逻辑就可以了，如有问题可以在下方评论，共同探讨。
【来源：IT小超】
声明：转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与本网联系，我们将及时更正、删除，谢谢。 邮箱地址：[email protected]