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 相关文章推荐
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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
MySQL相关说明
2007/01/15 PHP
由php if 想到的些问题
2008/03/22 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
浅谈Django的缓存机制
2018/08/23 Python
python如何调用字典的key
2020/05/25 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
会议接待欢迎词
2014/01/12 职场文书
关于逃课的检讨书
2014/01/23 职场文书
节约电力资源的建议书
2014/03/12 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
web前端之css水平居中代码解析
2021/05/20 HTML / CSS