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

众所周知,后端从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文件中,上图列表的代码。我们需要在相应需要处理的<el-table-column> 列中加上属性项: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中编写函数,即可完成处理。

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

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=jbkj0j&title=Vue表格中,对数据进行转换、处理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371010.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java应用程序中的SQL注入

在本文中&#xff0c;我们将讨论什么是SQL注入攻击。 以及它如何影响任何Web应用程序使用后端数据库。 在这里&#xff0c;我专注于Java Web应用程序。 开放Web应用程序安全项目&#xff08;OWAP&#xff09;列出了SQL注入是Web应用程序的主要漏洞攻击。 黑客将Web请求中的SQL代…

bluetooth射频已关闭请打开bluetooth射频_希杰大功率射频放大器烧了维修诊断步骤...

如果电阻值过低&#xff0c;说明电源内部存在短路&#xff0c;正常时其阻值应能达到100千欧以上;电容器应能够充放电&#xff0c;如果损坏&#xff0c;则表现为AC电源线两端阻值低&#xff0c;呈短路状态&#xff0c;否则可能是开关管击穿。然后检查直流输出部分脱开负载&#…

java中整数如何表示,在Java中如何在位级别上内部表示整数?

慕瓜9086354Java整数为32位&#xff0c;并且总是带符号的。这意味着&#xff0c;最高有效位(MSB)用作符号位。用an表示的整数int不过是位的加权和。权重分配如下&#xff1a;Bit# Weight31 -2^3130 2^3029 2^29... ...2 2^21 2^10 …

three.js制作3d模型工具_3D打印模型打磨抛光常用工具

对于追求更好模型品质的人来说&#xff0c;对3D打印模型进行后处理工作是必不可少的&#xff0c;而后处理&#xff0c;首要的便是对模型进行打磨、抛光&#xff0c;将不属于模型的耗材去除&#xff0c;提高表面光洁度。在此工作中&#xff0c;我们需要用到很多工具&#xff0c;…

为何要清除浮动?如何清除?

原因&#xff1a; 元素设置了float属性后&#xff0c;就会脱离文档流&#xff0c;当 包含框 的高度小于 浮动框 的时候&#xff0c;会出现高度塌陷。因此才需要清除浮动&#xff01; 表现如图&#xff1a;包括框container已经包不住float的图片了&#xff01; 清除浮动方法&a…

Spring MVC错误处理示例

这篇文章描述了在Spring MVC 3中执行错误处理的不同技术。该代码在GitHub上的Spring-MVC-Error-Handling目录中可用。 它基于带有注释的Spring MVC示例。 在Spring 3之前处理异常 在Spring 3之前&#xff0c;使用HandlerExceptionResolvers处理异常。 此接口定义一个方法&…

php数字取反,[转+自]关于PHP7的新特性(涉及取反和disabled_functions绕过)

PHP7和PHP5上的安全区别preg_replace()不再支持/e修饰符利用\e修饰符执行代码的后门大家也用了不少了&#xff0c;具体看官方的这段描述:如果设置了这个被弃用的修饰符&#xff0c; preg_replace() 在进行了对替换字符串的 后向引用替换之后, 将替换后的字符串作为php 代码评估…

如何关闭苹果手机自动扣费_教你关闭苹果手机系统的自动更新功能,旧手机还能再用几年!...

大家都知道&#xff0c;苹果手机在更新几个大版本后&#xff0c;手机不是变得非常卡&#xff0c;就是非常的耗电&#xff0c;大大的缩短了手机的使用寿命。所以&#xff0c;许多人都不会选择更新系统&#xff0c;但是手机只要连上WiFi并且在充电状态&#xff0c;就会在半夜自动…

HttpClient的使用

新引入Hutool-HttpUtil的使用&#xff08;更简单&#xff0c;更强大&#xff01;&#xff09;&#xff0c;详见&#xff1a;http://www.cnblogs.com/jiangbei/p/7667858.html 一、概述 1.简介 根据凡技术必登其官网的原则&#xff08;如果有&#xff09;&#xff0c;我们可以先…

四人帮–代理设计模式

代理是另一种结构设计模式 &#xff0c;可以“代表”另一个对象或“代替”另一个对象以访问后面的对象。 何时使用此模式&#xff1f; 当我们需要创建一个包装来覆盖客户端的主要对象的复杂性时&#xff0c;将使用代理模式。 有哪些使用场景&#xff1f; 虚拟代理–设想一种…

使用inetaddress测试目标可达性_PDPS软件机器人虚拟仿真:Smart Place功能介绍与使用方法...

概述对于机器人工作站或生产线的虚拟仿真&#xff0c;很大一部分的作用是找出机器人与工装夹具等外围设备的最佳布局位置。市面上大多数的工业机器人虚拟仿真软件都有这种专门用于检测机器人与外围设备之间最佳布局位置的功能&#xff0c;比如DELMIA软件中的“Auto Place”功能…

angular js 使用pdf.js_排名靠前的几个JS框架发展趋势和前景

转载自&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。原文出处&#xff1a;https://blog.bitsrc.io/top-5-javascript-frameworks-past-present-and-future-8b6fda39de02随着信息技术领域的发展&#xff0c;企业…

debian dhcp服务启动不了_DHCP服务器配置

DHCP &#xff1d; Dynamic Host Configuration Protocol 基于TCP/IP&#xff0c;用于动态配置工作站网络接口&#xff0c;使工作站的网络接口管理自动化。DHCP服务器软件dhcpd网站&#xff1a;http://www.isc.org安装方法&#xff1a;#tar -zxvf dhcp-4.0.0.tar.gz#cd dhcp-4.…

C++map类型 之 简单介绍

一&#xff1a;map的前世今生&#xff08;1&#xff09;从关联容器与顺序容器说起。关联容器通过键&#xff08;key&#xff09;存储和读取元素。而顺序容器则通过元素在容器中的位置顺序存储和訪问元素&#xff08;vector,queue,stack,list等&#xff09;。关联容器&#xff0…

MySql Socket 完成数据库的增查Demo

需求: 利用MySql数据库结合前端技术完成用户的注册(要求不使用Web服务技术),所以 Demo采用Socket技术实现Web通信. 第一部分:数据库创建 数据库采用mysql 5.7.18, 数据库名称为MyUser, 内部有一张表 user.字段有 Id,UserName,Psd,Tel 第二部分:数据库连接与Socket通信 创建控…

苹果桌面主题_看腻了手机自带的桌面主题,试试这个

在这个看脸的时代&#xff0c;颜值似乎越来越重要了。尤其是我们每天都要看到的手机桌面&#xff0c;如果它的颜值好一点&#xff0c;也许我们的心情会更好&#xff0c;所以有不少人都用手机自带的主题来美化桌面&#xff0c;但是对于喜欢个性的我们&#xff0c;手机自带的主题…

Java SE 11:推动Java向前发展

介绍 在我看来&#xff0c;这篇文章提出了Java语言应该如何发展以保持其作为首选语言的地位。 它还提供了一些我喜欢但有时&#xff08;可能永远不会&#xff09;成为Java一部分的功能&#xff0c;由于我将要解释的某些原因&#xff0c;这些功能有时我已经爱上了。 我真的很想…

Hexo使用细节及各种问题

解决markdown图片不显示(返回403 forbidden)、添加本地图片无法显示、修改文章page模板、同时部署发布同步到多个仓库站点(Github、coding、gitee 码云) 图片不显示 在使用过程中&#xff0c;会发现有的引用图片无法显示的问题。但是如果直接复制图片地址到浏览器打开的话显示…

智能小车37:异常在ARM、JAVA、硬件里的实现

几乎所有编程语言都有异常&#xff0c;可以说有程序就有异常。今天学习Arm的中断(异常)处理,联想到Java的异常,硬件中如何实现等问题&#xff0c;下面给大家分享一下。 一、Arm的中断。 1.触发异常 2.保存现场 3.cpu进入异常工作模式&#xff0c;程序指针(pc)跳入异常入口&…

c++builder提高批量动态创建panel的速度_骑行时影响速度的事项有哪些 怎样有效提高骑行速度 单车租赁信息...

撇开人的因素在自行车的组件中对车速影响最大的几项是什么?车重?自锁?轮组?传动?我的个人感受&#xff0c;从提高幅度上来讲&#xff0c;而不是重要性上来讲一、自锁起码提高你50%的速度&#xff0c;我不用自锁和别人一起走AVS25就很辛苦了&#xff0c;用了自锁&#xff0…