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中编写函数,即可完成处理。
该流程适合大部分表格数据的处理。
Vue表格中,对数据进行转换、处理的更多相关文章
- vue表格中显示金额格式化与保存时格式化为数字并校验!
最近项目中遇到了成本计算的,需要显示金额,保存一下,以后方便直接拿来用! 一 数字转金额格式显示 //数字转金额格式 format:function(s){ if(/[^0-9\.]/.test(s) ...
- 如何使用免费控件将Word表格中的数据导入到Excel中
我通常使用MS Excel来存储和处理大量数据,但有时候经常会碰到一个问题—我需要的数据存储在word表格中,而不是在Excel中,这样处理起来非常麻烦,尤其是在数据比较庞大的时候, 这时我迫切地需要 ...
- jQuery Ajax遍历表格,填充数据,将表格中的数据一条一条拼成Jason数组
$.ajax({ url: baseURL + "InvoiceSale/OnQuotaInvoiceSale", //点击核销单号时,点击核销时,交互的页面 ...
- 利用java反射机制实现读取excel表格中的数据
如果直接把excel表格中的数据导入数据库,首先应该将excel中的数据读取出来. 为了实现代码重用,所以使用了Object,而最终的结果是要获取一个list如List<User>.Lis ...
- python读取excel表格中的数据
使用python语言实现Excel 表格中的数据读取,需要用到xlrd.py模块,实现程序如下: import xlrd #导入xlrd模块 class ExcelData(): def __init ...
- java读取Excel表格中的数据
1.需求 用java代码读取hello.xls表格中的数据 2.hello.xls表格 3.java代码 package com.test; import java.io.File; import j ...
- ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子 1.HTML页面 <!doctype html> ...
- 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
查看本章节 查看作业目录 需求说明: 在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的"删除"超链接,使用 DOM 节点的删除操作将对应的 ...
- unittest(20)- 自动更新表格中的数据(3)
通过函数获取表格中的手机号 # 1. get_data.py from tools import project_path import pandas as pd class GetData: Coo ...
随机推荐
- 0.jQuery选择器
左边的是jQuery用法 右边是js用法 $("tag") == document.getElementsByTagName("tag"); $(". ...
- [HNOI/AHOI2018]排列
[Luogu4437] 如果\(a[i]=j\)则序列\(p[]\)中\(j\)必须排在\(i\)前面,如果\(j\)不在范围内则不管,求一个式子\(\sum_{i=1}^n iw_{p[i]}\)的 ...
- 深入理解promise
如今promise大行其道,关于异步方面的几乎都有它的影子,新的fetch api返回的是promise对象,generator中的yield后面一般也会跟promise对象,async的await后 ...
- ansys 14.0
张建伟等.2012.12 人民邮电 一天一本书,这种感觉 真是爽啊. 但我觉得什么也没学到. 话说回来,此authors 确实书写得比较一般,实例不如百度文档上的WORD实例,理论不如我看的那本CFD ...
- TT 安装 之 AIX
# mkgroup -'A' id='1000' adms='root' tt -- 创建用户 # mkuser id='1000' pgrp='tt' groups='tt' adms='root' ...
- mysql 研发规范
1. 命名 a) 有意义. b) 数据库.表,都用小写,仅使用下划线和小写字母. c) 索引以idx_开头. d) 命名不要过长,尽量少于25个字符. e) 不要使用保留 ...
- Oracle 更改归档文件到ASM磁盘
01,配置磁盘路径
- python 爬虫系列01-连接mysql
爬虫学习中......................................... import pymysql conn = pymysql.connect(host=',database ...
- C++ 17的新标准
几个自己比较关注的C++新标准,说是17的标准,不过估计要拖到20才能真正支持 Module python的import之类的东西 解决问题: include头文件导致速度变慢的问题 目前 ...
- (转)linux shell单引号、双引号及无引号区别
原文:http://blog.csdn.net/woshizhangliang999/article/details/50132265 3.描述linux shell中单引号.双引号及不加引号的简单区 ...