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 相关文章推荐
js跟随滚动条滚动浮动代码
Dec 31 Javascript
关于this和self的使用说明
Aug 01 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
老生常谈js数据类型
Aug 03 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python json模块使用实例
2015/04/11 Python
python开发之文件操作用法实例
2015/11/13 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
python一些性能分析的技巧
2020/08/30 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
法定代表人免职证明
2015/06/24 职场文书
婚礼家长致辞
2015/07/27 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers