vue实现表格增删改查效果的实例代码


Posted in Javascript onJuly 18, 2017

整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享。

实现效果

vue实现表格增删改查效果的实例代码

我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行:

list: [
  {
    username: 'aaaaa',
    email: '123@qq.com',
    sex: '男',
    province: '北京市',
    hobby: ['篮球', '读书', '编程']
  },
  {
    username: 'bbbbb',
    email: 'bbbbbbb@163.com',
    sex: '女',
    province: '河北省',
    hobby: ['弹琴', '读书', '插画']
  }
  // ...
]

这里面的表单有:文本输入框,单选按钮,select选择框,复选框等。

1. 展示数据

我们的数据都放在数组list中,但是这里并不直接对list对循环输出,而是先把list中的数据给一个数组slist,对slist进行循环输出。因为我们在后面的查询功能中需要对数据进行过滤,数组list一直保存着原始数据(包括新增、修改后或已删除后),而数组slist只负责展示。

在vue中提供一个setSlist方法,将需要展示的数据给了数组slist:

// 获取需要渲染到页面中的数据
setSlist(arr) {
  this.slist = JSON.parse(JSON.stringify(arr));
}

然后在html中使用v-for把slist数组渲染出来:

<tr v-cloak v-for="(item, index) of slist">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td><a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showOverlay(index)">修改</a> | <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="del(index)">删除</a></td>
</tr>

 在操作这一栏中,给修改和删除操作绑定上事件。

2. 增加和删除功能

把增加功能和删除合并到一起,是这两个功能相对来说都比较简单。

增加用户时使用push方法,把用户的信息添加到list数组的最后:

this.list.push({
  username: 'ffff',
  email: 'fffffff@163.com',
  sex: '女',
  province: '河南省',
  hobby: ['弹琴', '插画']
});

这样就能添加一位ffff的用户了。

删除用户时,通过splice(index, 1),可以删除index位置的数据,页面上的数据自动就会更新。

3. 修改功能

假设我们弹层里的数据是selectedlist,那么每次修改时,把index位置的数据给了selectedlist,然后在弹层中修改selectedlist。我们也能看到修改数据的类型: 文本框(用户名,邮箱),单选按钮(性别),select选择框(所在省份),多选框(爱好),这里我们主要练习的是表单处理(https://cn.vuejs.org/v2/guide/forms.html)。弹层是否显示用变量isActive来控制:

// 修改数据
modifyData(index) {
  this.selected = index; // 修改的位置
  this.selectedlist = this.list[index];
  this.isActive = true;
}

有没有发现一个问题,当修改弹层中的信息时,表格中的数据也同步更新了。可是我们本身是希望当点击保存按钮时,才把弹层中的数据保存到表格里。问题的根源就出在这里:

this.selectedlist = this.list[index];

因为list[index]是个Object类型的数据,若使用=赋值,则赋值操作为浅度拷贝(把数据的地址赋值给对应变量,而没有把具体的数据复制给变量,变量会随数据值的变化而变化),selectedlist与list[index]使用相同的数据地址,互相引起数据值的变化。因此这里我们需要进行深度拷贝:

this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先转换为字符串,然后再转换

当用户修改数据后,selectedlist就会发生变化,点击保存按钮时,将数据重新保存到index位置:

/*
 this.list 数据数组
 this.selected 刚才修改的位置
 this.selectedlist 需要保存的数据
*/
Vue.set(this.list, this.selected, this.selectedlist);

4. 查询功能

在第1小节中我们已经说过,在页面表格中展示的是slist中的数据,就是为了方便执行查询操作:

// 获取需要渲染到页面中的数据
setSlist(arr) {
  this.slist = JSON.parse(JSON.stringify(arr));
}

每次根据某些条件将过滤后的数据赋值给slist数组,展示出查询后的数据。这里我们的查询实现了两个小功能:

1.用户在输入某个字符后,自动在输入框下方用列表展示出用户可能要查询的词语(如用户名等)

2.同步更新表格中的数据

这里我们通过用户名和邮箱进行查询,因此在过滤数据时,需要检测用户名和邮箱是否含有查询的单词。我们先给输入框绑定一个input事件,同时用datalist展示用户可能要查询的词语:

<input type="text" placeholder="search" @input="search" list="cars" class="search">
<datalist id="cars">
  <option v-for="item in searchlist" :value="item"></option>
</datalist>

search功能的实现,searchlist为在输入框下方展示的可能要搜索的词语,ss数组则保存过滤后的数据,当循环完毕后,设置调用setSlist方法修改slist数组:

每当用户输入或者删除一个字符时都会调用search方法,执行查询操作,当用点击展示词语列表时,也会调用search方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 #Javascript
vue深入解析之render function code详解
Jul 18 #Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
浅谈JS封闭函数、闭包、内置对象
Jul 18 #Javascript
iscroll实现下拉刷新功能
Jul 18 #Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 #Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 #Javascript
You might like
深入解析php中的foreach问题
2013/06/30 PHP
laravel学习教程之存取器
2016/07/30 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHP实现递归的三种方法
2020/07/04 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python中用于返回绝对值的abs()方法
2015/05/14 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
python生成随机图形验证码详解
2017/11/08 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
python list元素为tuple时的排序方法
2018/04/18 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
技术总监的工作职责
2013/11/13 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
大学军训感言400字
2014/03/11 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
事业单位聘任报告
2015/03/02 职场文书
庆元旦主持词
2015/07/06 职场文书