Vue实现表格中对数据进行转换、处理的方法


Posted in Javascript onSeptember 06, 2018

众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能。而且对页面加载时间有很大的影响),所以,从数据库取出的数据。只能由前端进行处理。但是在Vue中,如果采用了element等组件,利用数据绑定的特性,也是很难对表格遍历的数据进行单独行的处理的。

我们这边取一个例子来说。比如Mysql datetime 类型的数据与我们一般的显示的形式是不一样的,为了用户更好的体验,势必需要对时间格式进行转换的。

下图是从mysql中默认取出的datetime 类型时间

Vue实现表格中对数据进行转换、处理的方法

我们一般时间显示都是是XXXX年XX月XX日 XX:XX的。上图与我们认知习惯很不一样,肯定不能这样的。下面我们来做时间的转换。

<!- 图中列表的.vue ->
 <template>
 <div class="fromlist">
  <div class="filter-container">
  <el-button type="primary" size="small">新增用户</el-button>
  </div>
  <div>
  <el-table
   :data="tableData"
   border
   style="width: 100%" size="small">
   <el-table-column
   align="center"
   prop="id"
   label="用户ID"
   width="100">
   </el-table-column>
   <el-table-column
   align="center"
   prop="username"
   label="用户名"
   width="100">
   </el-table-column>
   <el-table-column
   align="center"
   prop="ip"
   label="用户IP"
   width="100">
   </el-table-column>
   <el-table-column
   align="center"
   prop="inittime"
   label="注册时间">
   </el-table-column>
   <el-table-column
   align="center"
   prop="endtime"
   label="最后登录时间">
   </el-table-column>
   <el-table-column
   align="center"
   prop="isdel"
   label="状态">
   </el-table-column>
   </template>
   </el-table-column>
  </el-table>
  </div>
 </div>
 </template>

如上,是.vue文件中,上图列表的代码。我们需要在相应需要处理的<el-table-column> 列中加上属性项:formatter=FunctionName。将该列数据与处理函数进行绑定。下面做一个演示:

<!- 在相应需要处理的el-table-column 中,添加formatter属性,并绑定了名为formatTime的处理函数 ->
 <el-table-column
   align="center"
   prop="endtime"
   :formatter="formatTime"
   label="最后登录时间">
 </el-table-column>

而后,我们在该页面的Vue实例中的methods中编写formatTime函数

// row[column.property] 能读取到该行该列的数据。代码中实现了时间格式的转换
 formatTime(row, column) {
   const date = new Date(row[column.property])
   return date.getFullYear() + '年' +
   date.getMonth() + '月' +
   date.getDate() + '日 ' +
   date.getHours() + ':' +
   date.getMinutes()
 }

函数中的功能可以是各种各样的,但是必须return 数据回列表进行显示。其中 row 包含着后端传来的Json数据。column包含着各种辅助数据。其中row[column.property]是可以直接取到该行该列的数据,以供处理的。

流程:在HTML代码中找到需要处理的el-table-column使用formatter进行函数绑定,而后在Vue实例methods中编写函数,即可完成处理。

该流程适合大部分表格数据的处理。

Vue实现表格中对数据进行转换、处理的方法

PS:下面看下Vue表格中时间的处理

Vue中表格的数据应该来自后台数据库,然后从数据库中读取到的数据,时间格式可能有些不同,我们可以根据实际需要来对这个时间进行转化。

这里介绍一个js库,它提供了强大的日期处理功能,功能强大且只有2k大小。安装方式简单,只需要npm install fecha --save即可。

Formatting(日期格式化)

fecha提供一个format方法。fecha.format接收一个Date对象(或一个时间戳)和一个字符串形式的日期格式,然后返回一个字符串(处理后的日期)。

注意: 当传入的参数无效时,fecha会报错

Parsing(日期解析)

fecha另外提供了一个parse方法。和format类似,fecha.parse接收一个Date字符串和一个字符串形式的日期格式,然后返回一个Date对象。

注意: 当传入的参数无效时,fecha会报错

fecha还有其他很多功能,这里不做具体介绍,有兴趣请自行百度学习。

这里放一个demo,以供参考。

html

<el-table-column prop="time" label="时间" :formatter="dateFormat" min-width="100"></el-table-column>

js

methods: {
  dateFormat(row, column, cellValue) {
  return cellValue ? fecha.format(new Date(cellValue), 'YYYY-MM-DD') : '';
  }
 }

总结

以上所述是小编给大家介绍的Vue实现表格中对数据进行转换、处理的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 #Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 #Javascript
在vue中读取本地Json文件的方法
Sep 06 #Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 #Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 #Javascript
vue template中slot-scope/scope的使用方法
Sep 06 #Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 #Javascript
You might like
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP教程 预定义变量
2009/10/23 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python实现注册、登录小程序功能
2018/09/21 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Python实现自动访问网页的例子
2020/02/21 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
蜜蜂引路教学反思
2014/02/04 职场文书
培训班主持词
2014/03/28 职场文书
电子专业求职信
2014/06/19 职场文书
房地产端午节活动方案
2014/08/24 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
运动会800米赞词
2015/07/22 职场文书
mysql事务隔离级别详情
2021/10/24 MySQL
Vue3中的Refs和Ref详情
2021/11/11 Vue.js