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面向对象、prototype、call()、apply()
May 14 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
js实现网页抽奖实例
Aug 05 Javascript
jQuery的文档处理程序详解
May 10 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
js事件触发操作实例分析
Jun 21 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python实现点对点聊天程序
2018/07/28 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
神路信息Java面试题目
2013/03/31 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
幼儿园教师备课制度
2014/01/12 职场文书
西双版纳导游词
2015/02/03 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
手机销售员岗位职责
2015/04/11 职场文书
统招统分证明
2015/06/23 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL