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 相关文章推荐
基于jquery的多功能软键盘插件
Jul 25 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
深入浅析React中diff算法
May 19 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
收音机的保养
2021/03/01 无线电
PHP网站提速三大“软”招
2006/10/09 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
用python写asp详细讲解
2013/12/16 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python能自学吗
2020/06/18 Python
Python下载的11种姿势(小结)
2020/11/18 Python
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
工程质量承诺书
2014/03/27 职场文书
《去年的树》教学反思
2014/04/11 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
股权转让协议范本
2014/12/07 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
java解析XML详解
2021/07/09 Java/Android
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS