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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
js中unicode转码方法详解
Oct 09 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
使用JavaScript破解web
Sep 28 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 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
消息持续发送的完整例子
2006/10/09 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
消防战士优秀事迹材料
2014/02/13 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
2015年采购员工作总结
2015/04/27 职场文书
成绩单家长意见
2015/06/03 职场文书
新闻稿件写作范文
2015/07/18 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书