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 png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
红米手机抢购的js代码
Mar 10 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
jquery replace方法去空格
May 08 jQuery
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
使用Vue 实现滑动验证码功能
Jun 27 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
PHP4引用文件语句的对比
2006/10/09 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
php解决安全问题的方法实例
2019/09/19 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
Python的类实例属性访问规则探讨
2015/01/30 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
计算机专业自荐信
2013/10/14 职场文书
产品工艺师的岗位职责
2013/11/15 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
母校寄语大全
2014/04/10 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
2014年个人总结范文
2015/03/09 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
python Tkinter的简单入门教程
2021/04/11 Python