Vue表格中，对数据进行转换、处理

番茄西红柿发布于2019-04-23 13:25 / 3599人阅读

摘要：但是在中，如果采用了等组件，利用数据绑定的特性，也是很难对表格遍历的数据进行多带带行的处理的。将该列数据与处理函数进行绑定。其中是可以直接取到该行该列的数据，以供处理的。该流程适合大部分表格数据的处理。

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

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

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

我们一般时间显示都是是XXXX年XX月XX日 XX：XX的。上图与我们认知习惯很不一样，肯定不能这样的。下面我们来做时间的转换。

 1 - 图中列表的.vue ->
 2 <template>
 3   <div class="fromlist">
 4     <div class="filter-container">
 5       <el-button type="primary" size="small">新增用户el-button>
 6     div>
 7     <div>
 8       <el-table
 9         :data="tableData"
10         border
11         style="width: 100%" size="small">
12         <el-table-column
13           align="center"
14           prop="id"
15           label="用户ID"
16           width="100">
17         el-table-column>
18         <el-table-column
19           align="center"
20           prop="username"
21           label="用户名"
22           width="100">
23         el-table-column>
24         <el-table-column
25           align="center"
26           prop="ip"
27           label="用户IP"
28           width="100">
29         el-table-column>
30         <el-table-column
31           align="center"
32           prop="inittime"
33           label="注册时间">
34         el-table-column>
35         <el-table-column
36           align="center"
37           prop="endtime"
38           label="最后登录时间">
39         el-table-column>
40         <el-table-column
41           align="center"
42           prop="isdel"
43           label="状态">
44         el-table-column>
45           template>
46         el-table-column>
47       el-table>
48     div>
49   div>
50 template>

如上，是.vue文件中，上图列表的代码。我们需要在相应需要处理的列中加上属性项:formatter=FunctionName。将该列数据与处理函数进行绑定。下面做一个演示：

1 - 在相应需要处理的el-table-column 中，添加formatter属性，并绑定了名为formatTime的处理函数 ->
2 <el-table-column
3           align="center"
4           prop="endtime"
5           :formatter="formatTime"
6           label="最后登录时间">
7 el-table-column>

而后，我们在该页面的Vue实例中的methods中编写formatTime函数

1 // row[column.property] 能读取到该行该列的数据。代码中实现了时间格式的转换
2 formatTime(row, column) {
3         const date = new Date(row[column.property])
4         return date.getFullYear() + 年 +
5           date.getMonth() + 月 +
6           date.getDate() + 日  +
7           date.getHours() + : +
8           date.getMinutes()
9 }

函数中的功能可以是各种各样的，但是必须return 数据回列表进行显示。其中 row 包含着后端传来的Json数据。column包含着各种辅助数据。其中row[column.property]是可以直接取到该行该列的数据，以供处理的。

流程：在HTML代码中找到需要处理的el-table-column使用formatter进行函数绑定，而后在Vue实例methods中编写函数，即可完成处理。

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

私有云服务器托管 php对表格进行分页在防火墙中可以对什么网络进行设置对数据进行分析对数据进行统计排行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1844.html

Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能

摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...

Profeel 2019-08-21 10:51 评论0 收藏0
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能

摘要：基础布局的中主要为部分，分别是用于搜索筛选和分页的表单控件用于排序表格的表头以及用于展示数据的。这也是前瞻发布之后，提出废弃部分功能后许多人反应较为强烈的原因。与上周的第一篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部...

ChanceWong 2019-08-01 15:21 评论0 收藏0
Vue表格组件--GridManager Vue

摘要：基于的封装用于便捷的在中使用除过特性外，其它与相同。非必设项筛选条件列表数组对象。格式在使用时该参数为必设项。并且使用服务需要提前通过将注册至全局组件。刷新或更新查询条件或其它更多请直接访问查看当前版本 GridManager Vue 基于 Vue 的 GridManager 封装, 用于便捷的在 Vue 中使用GridManager. 除过Vue特性外，其它API与GridManag...

khs1994 2019-08-23 16:46 评论0 收藏0
Vue 2019开发者图谱

摘要：为了便于您更清晰的理解的体系架构，在这里我将为您展示年开发者知识图谱，它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。作为 Vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和Vue经常一起被提到的工具和库，如Vuex、Webp...

cgspine 2019-08-23 18:14 评论0 收藏0
Vue 项目功能实现：Element UI 表格内容格式化方案

摘要：前言项目中经常遇到表格内容要根据接口数据格式化展示，比如接口返回时间戳格式，表格要展示为。下面介绍种格式化数据的方案并简述其使用场景，希望帮助大家在项目中可以准确定位快速开发。前言 Vue 项目中经常遇到表格内容要根据接口数据格式化展示，比如：接口返回时间戳格式 1560565657109，表格要展示为 2019.06.15 10:27:37。下面介绍3种格式化数据的方案并简述其使用...

luqiuwen 2019-08-23 18:08 评论0 收藏0