tablevue element-ui实现Table表格行内编辑 |行内|表格|

【tablevue element-ui实现Table表格行内编辑】
引言近期项目需要，要在table表格中直接编辑内容，就是所谓的行内编辑，实现效果如下图，抄别人的图这是，网上找了很多大多数内容不全，要不讲解模糊，要不只提供一部分代码，经过整理完善，特别写了这篇文章。

本文插图
主要实现原理是：通过v-show显示隐藏元素来实现行内编辑， true的时候显示编辑input行， false显示table内容，我自己项目的效果图如下：

本文插图
实现table部分的代码如下

本文插图
table中需要编辑的字段，我们要设置两种显示， input编辑行和span普通内容显示行
&ltel-table-column label="项目名称"&gt&lttemplate scope="scope"&gt&ltel-input size="small" v-model="scope.row.name" placeholder="请输入内容" v-show="scope.row.show"&gtel-input&gt
&ltspan v-show="!scope.row.show"&gt{{scope.row.name}}span&gttemplate&gtel-table-column&gt 我们需要v-show来控制显示那种内容，往往api接口传过来的值是没有相关参数的，例如代码中使用的show字段，这时就需要使用forEach()函数，只需要在获取的数据中增加上就可以了，代码实现思路是这样的
.then(response =&gt {this.items = response.data.data //api获取到的数据this.total = response.data.total //分页字段 this.items.forEach(element =&gt { element["show"] = false }) }) //增加show ，默认false
这样我们只需要通过控制show值的变化，就可以来控制表格中的内容是编辑状态还是静态显示状态。
这里我做了按钮来控制table的状态，按钮是这样写的：
&ltel-buttonsize="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"&gt{{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中的函数。