Vue实现表格中对数据进行转换、处理的方法

 更新时间:2018年09月06日 11:56:58   作者:龙渊  
这篇文章主要介绍了Vue实现表格中对数据进行转换、处理的方法,需要的朋友可以参考下

众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能。而且对页面加载时间有很大的影响),所以,从数据库取出的数据。只能由前端进行处理。但是在Vue中,如果采用了element等组件,利用数据绑定的特性,也是很难对表格遍历的数据进行单独行的处理的。

我们这边取一个例子来说。比如Mysql datetime 类型的数据与我们一般的显示的形式是不一样的,为了用户更好的体验,势必需要对时间格式进行转换的。

下图是从mysql中默认取出的datetime 类型时间

我们一般时间显示都是是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中编写函数,即可完成处理。

该流程适合大部分表格数据的处理。

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实现表格中对数据进行转换、处理的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue 1.0 结合animate.css定义动画效果

    vue 1.0 结合animate.css定义动画效果

    本文分步骤给大家介绍了Vue 1.0自定义动画效果,vue1.0代码结合animate.css定义动画,页面一定要引入animate.cdd,具体实例代码大家参考下本文
    2018-07-07
  • Vue+Openlayers自定义轨迹动画

    Vue+Openlayers自定义轨迹动画

    这篇文章主要为大家详细介绍了Vue+Openlayers自定义轨迹动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • vue 项目代码拆分的方案

    vue 项目代码拆分的方案

    这篇文章主要介绍了vue 项目代码拆分的方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)

    深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使

    这篇文章主要介绍了golang zap 日志库使用(含文件切割、分级别存储和全局使用等),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Vue-Jest 自动化测试基础配置详解

    Vue-Jest 自动化测试基础配置详解

    目前开发大型应用,测试是一个非常重要的环节,而在 Vue 项目中做单元测试可以用 Jest,本文主要介绍了Vue-Jest 自动化测试,感兴趣的可以了解一下
    2021-07-07
  • VUE使用vuex解决模块间传值问题的方法

    VUE使用vuex解决模块间传值问题的方法

    本篇文章主要介绍了VUE使用vuex解决模块间传值问题 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue-cli3.x + axios 跨域方案踩坑指北

    Vue-cli3.x + axios 跨域方案踩坑指北

    这篇文章主要介绍了Vue-cli3.x + axios 跨域方案踩坑指北,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Vue SPA单页应用首屏优化实践

    Vue SPA单页应用首屏优化实践

    这篇文章主要介绍了Vue SPA单页应用首屏优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 详解django模板与vue.js冲突问题

    详解django模板与vue.js冲突问题

    在本文里小编给各位整理了关于django模板与vue.js冲突问题以及实例代码,需要的朋友们参考下。
    2019-07-07
  • 详解为什么Vue中不要用index作为key(diff算法)

    详解为什么Vue中不要用index作为key(diff算法)

    这篇文章主要介绍了详解为什么Vue中不要用index作为key(diff算法),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论