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的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python 文件管理实例详解
2015/11/10 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
python安装及变量名介绍详解
2020/12/12 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
高级工程师岗位职责
2013/12/15 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书