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原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
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 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php防止sql注入代码实例
2013/12/18 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
红领巾心向党广播稿
2014/01/19 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Python+Appium新手教程
2021/04/17 Python