vue实现表格数据的增删改查


Posted in Javascript onJuly 10, 2017

在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作。比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改。在vue中,我们更应该专注于对数据的操作和处理。

比如我们有一个这样的页面:

vue实现表格数据的增删改查

我们在这个页面里,就实现了增删改查4个功能,点击链接查看demo【http://www.xiabingbao.com/demo/vue-curd/index.html】。

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

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

设置这些数据主要也是复习一下vue对表单的处理操作,这里面的表单有:文本输入框,单选按钮,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>{{index+1}}</td>
 <td>{{item.username}}</td>
 <td>{{item.email}}</td>
 <td>{{item.sex}}</td>
 <td>{{item.province}}</td>
 <td>{{item.hobby.join(' | ')}}</td>
 <td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @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(e) {
 var v = e.target.value,
 self = this;
 self.searchlist = [];
 if (v) {
 var ss = [];

 // 过滤需要的数据
 this.list.forEach(function (item) {
  // 检测用户名
  if (item.username.indexOf(v) > -1) {
  if (self.searchlist.indexOf(item.username) == -1) {
   self.searchlist.push(item.username);
  }
  ss.push(item);
  } else if (item.email.indexOf(v) > -1) {
  // 检测邮箱
  if (self.searchlist.indexOf(item.email) == -1) {
   self.searchlist.push(item.email);
  }
  ss.push(item);
  }
 });
 this.setSlist(ss); // 将过滤后的数据给了slist
 } else {
 // 没有搜索内容,则展示全部数据
 this.setSlist(this.list);
 }
}

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

5. 将弹层独立为组件

其实我们应该发现,修改功能(或新增功能)从代码和样式上相对来说比较独立,我们把弹层独立为组件的形式,把需要修改的数据通过props传递给该组件(新增数据时,可以给组件传递一个空数据),当用户点击保存时,再通过$emit给了父组件(子组件不能直接父级的数据,需要用data或者computed生成一个局部变量,然后再使用$emit方法把这个局部数据再传递上去):

// 弹层组件 
Vue.component('model', {
 props: ['list', 'isactive'],
 template: `<div class="overlay" v-show="isactive">
   <div class="con">
   <h2 class="title">新增 | 修改</h2>
   <div class="content">
    /* 省略 */
   </div>
   </div>
  </div>`,
 computed: {
 modifylist() {
  return this.list;
 }
 },
 methods: {
 changeActive() {
  this.$emit('change'); // 关闭弹层,修改isactive值
 },
 modify() {
  this.$emit('modify', this.modifylist); // 将修改后的数据传递给父组件
 }
 }
});

父组件,在父组件中截取change和modify事件,再用changeOverlay和modify来实现:

<model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>

6. 总结

洋洋洒洒写了不少,其实里面的难点不太多,主要是form表单方面的操作,再一个就是练习下组件间的数据与事件传递。内容比较简单,欢迎各位批评指正。

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

Javascript 相关文章推荐
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
一个选择最快的服务器转向代码
Apr 27 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
js Event对象的5种坐标
Sep 12 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 #Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 #Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 #jQuery
Underscore之Array_动力节点Java学院整理
Jul 10 #Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 #Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 #Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 #Javascript
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
javascript基础知识讲解
2017/01/11 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
angular2+node.js express打包部署的实战
2017/07/27 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
Python with的用法
2014/08/22 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python3.7 的新特性详解
2019/07/25 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python 装饰器重要在哪
2021/02/14 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
银行实习生的自我评价
2014/01/13 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
邀请函的格式
2015/01/30 职场文书
董事长致辞
2015/07/29 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript