ElementUI动态表格数据转换formatter
elementUI的表格初始化比较简单,声明prop值对应的字段名即可。
而在实际应用中,我们常常有这种需求:从服务器获取的数据并不是我们要显示的最终结果,涉及一些状态、类型、日期时间等的转换,这时候我们就需要用elementUI表格组件的formatter属性,来进行数据转换了。
以下给出一个例子,很是简单明了,代码如下:
<template>
<el-table ref="myTable" :data="tableData" stripe style="width: 100%">
<el-table-column align="center" prop="userName" label="用户名" width="120" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="mobilePhone" label="联系方式" width="120" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="company" label="公司所属" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="time" :formatter="dateFormatter" label="入职日期" width="100"></el-table-column>
<el-table-column align="center" prop="remark" label="备注" width="100" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="status" :formatter="statusFormatter" label="禁用" width="100"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{id: 1, userName: '张三', mobilePhone: 15812356789, company: '某某软件有限公司', time: 1535379319240, remark: '备注信息', status: 0},
{id: 2, userName: '李四', mobilePhone: 15812356666, company: '某某软件有限公司', time: 1535479319240, remark: '备注信息', status: 0},
{id: 3, userName: '王五', mobilePhone: 15812357777, company: '某某软件有限公司', time: 1535579319240, remark: '备注信息', status: 0},
{id: 4, userName: 'Lena', mobilePhone: 15812358888, company: '某某软件有限公司', time: 1535679319240, remark: '备注信息', status: 0},
{id: 5, userName: 'Sally', mobilePhone: 15812359999, company: '某某软件有限公司', time: 1535779319240, remark: '备注信息', status: 1},
{id: 6, userName: 'Thomas', mobilePhone: 15812357788, company: '某某软件有限公司', time: 1535879319240, remark: '备注信息', status: 1}
]
}
},
methods: {
// 日期格式化
dateFormatter (row, column) {
let datetime = row.time;
if(datetime){
datetime = new Date(datetime);
let y = datetime.getFullYear() + '-';
let mon = datetime.getMonth()+1 + '-';
let d = datetime.getDate();
return y + mon + d;
}
return ''
},
// 禁用状态格式化
statusFormatter(row, column) {
let status = row.status;
if(status === 0){
return '否'
} else {
return '是'
}
}
}
}
</script>
给formatter属性传入调用的方法名,就会在初始化表格的时候调用这个方法转换显示的数据了。
效果图如下:
ElementUI动态表格数据转换formatter的更多相关文章
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- element ui的表格列设置fixed后做动态表格出现表格错乱
最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...
- 在<s:iterator>标签里给动态表格添加序号
在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...
- HTML5&CSS3经典动态表格
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 5.11-5.15javascript制作动态表格
制作动态表格的主要是运用js中表格类的insertRow.insertCell简易添加行和列的代码,不过要注意每行添加的表格是有位置行编号的,每行的编号为rows.length-1,增加的表格内的标签 ...
- vue+element-ui实现表格checkbox单选
公司平台利用vue+elementui搭建前端页面,因为本人第一次使用vue也遇到了不少坑,因为我要实现的效果如下图所示 实现这种单选框,只能选择一个,但element-ui展示的是多选框,check ...
- jQuery的下面是动态表格动态表单中的HTML代码
动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...
- JavaScript 创建动态表格
JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...
- Java利用poi生成word(包含插入图片,动态表格,行合并)
转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...
随机推荐
- viewSwitcher 切换视图
通过VIewSwitcher切换视图.这个用到了baseAdapter,还是不太懂,先记个笔记. <RelativeLayout xmlns:android="http://schem ...
- shell编程系列1--shell脚本中的变量替换
shell编程系列1--shell脚本中的变量替换 变量替换总结: .${变量#匹配规则} # 从头开始匹配,最短删除 .${变量##匹配规则} # 从头开始匹配,最长删除(贪婪模式) .${变量%匹 ...
- Jmeter之__CSVRead随机读取变量
背景:当你需要从一些数据中随机的取值用的话可以用这个函数来实现__CSVRead __CSVRead函数用于对脚本进行参数化,当脚本中不同变量需要不同参数值时,可以考虑__CSVRead函数. _CS ...
- 006-多线程-JUC线程池-并发测试程序
一.java代码模拟并发 1.1.一次并发 单次并发测试 1.使用CountDownLatch 等待一个或多个线程一起执行 详细参看:007-多线程-锁-JUC锁-CountDownLatch-闭锁[ ...
- Django中的QuerySet查询优化之实例篇
转载的,做个笔记,原文链接 在数据库有外键的时候,使用 select_related() 和 prefetch_related() 可以很好的减少数据库请求的次数,从而提高性能.本文通过一个简单的例子 ...
- Delphi中进行延时的4种方法
1.挂起,不占CPUsleep2.不挂起,占cpuprocedure Delay(msecs:integer);varFirstTickCount:longint;beginFirstTickCou ...
- nodemon运行 提示错误:无法加载文件 C:\Users\gxf\AppData\Roaming\npm\nodemon.ps1,因为在此系统上禁止运行脚本。
nodemon运行 提示错误:无法加载文件 C:\Users\gxf\AppData\Roaming\npm\nodemon.ps1,因为在此系统上禁止运行脚本. 这是你笔记本禁止运行脚本,解决办法 ...
- rename批量命名命令
参考:http://www.ttlsa.com/linux-command/linux-rename-command-batch-rename/ Linux下rename命令有两种版本一种是C语言版本 ...
- 推荐Pi(π)币,相当于比特币手机挖矿版
我为什么推荐这个? 说实话,之所以发出来还是因为如果用我的邀请码注册,双方的挖矿速度都会增加些,我的邀请码:leneing,有问题可以咨询我. Pi币简介 1.在这里强烈推荐Pi币,相当于比特币手机挖 ...
- springboot备份mysql后发送邮件并删除备份文件,支持win和Linux
首先加入springboot的邮箱依赖 <!--邮箱依赖--> <!-- https://mvnrepository.com/artifact/org.springframework ...