江苏龙网

  1. 首页 > 资讯 > 科技 > >

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


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

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

实现table部分的代码如下
table|vue element-ui实现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中的函数 。


推荐阅读


上一篇：中年|少吃肉类，也要每天吃虾仁烧冬瓜

下一篇：贪腐|260款违法违规收集个人信息App被处罚