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表格中,对数据进行转换、处理
Vue表格中,对数据进行转换、处理相关推荐
- word表格转换成html,delphi将word表格转换成html_取得Word 表格中的数据
delphi将word表格转换成html_取得Word 表格中的数据 1.delphi将word表格转换成html procedure TForm1.Button1Click(Sender: TObj ...
- vue校验表格数据_如何通过数据验证限制Google表格中的数据
vue校验表格数据 If you use Google Sheets to collaborate with others, you can prevent people from typing th ...
- ant design vue 表格中时间戳转换成时间格式显示
ant design vue 表格中时间戳转换成时间格式显示 原始数据表格如上图,因为接口传递过来的时间是10位int类型的时间戳格式,所以前端需要我们把时间格式化. step1 安装moment n ...
- python提取excel数据-代码详解:使用Python从不同表格中提取数据
常用的表格数据存储文件格式--CSV,Microsoft Excel,Google Excel . Python通常称为粘合语言.这个名称归因于人们逐渐开发出的大量接口库和特征,也得益于广泛的使用和良 ...
- 查询oracle数据库的表格数据类型,excel表格中如何查询数据库数据类型-我想把excel表格中的数据导入oracle数据库中,想在......
在excel表里,什么是:字段.记录.数据类型.多工... declare @t table(id numeric(18,2)) insert into @t SELECT col1 FROM ...
- Android-关于将Excel表格中的数据展示到手机屏幕上的解决方案
1.命题由来 前段时间,公司有个紧急需求,需要将一个原有的页面临时改版,新需求就是要将一个Excel的表格中的数据用一个列表展示出来,因为以前没接触过Excel这类转换的需求,所以还是有点懵的,而另一 ...
- cpp导入excel到mysql_将EXCEL表格中的数据导入mysql数据库表中
本文转载自http://blog.sina.com.cn/s/blog_5d972ae00100gjij.html 今天项目上遇到需要将excel中的数据导入到数据库的classify表中,于是乎拼命 ...
- 使用kettle采集excel表格中的数据
使用kettle采集excel表格中的数据 一.任务描述 二.任务目标 三.任务环境 四.任务分析 五. 任务实施 步骤1.环境准备 步骤2.创建Transformmations 申明: 未经许可,禁 ...
- matlab引用表格命令,如何用matlab引用excel表格数据-matlab如何从excel表格中读取数据?...
怎样利用matlab去读取一个excel表中多个sheet的数... Matlab如何导入excel数据的方法如下: 1.一xlsread()函数,比import简单的多,具体语句: A = xlsr ...
最新文章
- Python 图像处理简介——色彩阴影调整
- java兩個矩陣相乘_Day12 練習java-矩陣乘法
- Dubbo启动,调用方法失败【问题:调用超时】
- CentOS学习笔记(一):中文语言包及输入法的安装使用
- hdfs读写流程_必须掌握的分布式文件存储系统—HDFS
- 『ACM C++』 PTA 天梯赛练习集L1 | 048-49
- Codeforces 990G 点分治+暴力
- php快速排序空间复杂度,PHP 算法基础----时间复杂度和空间复杂度(转载)
- 微信公众号首次关注自动回复图文信息
- Vue动态循环背景图片
- 盘点百度、阿里、腾讯、华为自动驾驶战略
- mysql count函数 null_MySql中COUNT(XXX OR NULL)
- 岛屿数量vs最大正方形
- 深度学习基础之-2.3简单的神经网络(单个输入/多个输入)做线性回归+特征值归一化
- window+将html文件设置为我们的壁纸
- Swoole 基础入门
- 【实验6】MPEG音频编码实验
- java中的Cookie 和 sessions
- 区块链技术与应用实验报告(实验三)
- 用requests和pandas爬取中国福彩网官网 双色球 历年全部彩票数据
热门文章
- 计算机学院肖鹏,肖鹏-生命科学与技术学院
- 清空计算机网络缓存,【缓存清理工具】缓存清理软件_电脑缓存清理软件【最新】-太平洋电脑网...
- 数据库图书管理建表与修改表
- Jmeter调试工具---HTTP Mirror Server
- [转]hadoop新手错误解决方法
- 磁盘空间管理工具FolderSizes
- ubuntu postgresql 的安装
- java和jvm_java 和 JVM
- Pytorch GRU(详解GRU+torch.nn.GRU()实现)
- ubuntu 添加用户、用户组