作用:对从数据库中取出的数据进行处理后展示。

示例1:

partner1为从数据库中查询出的展示字段,值为数字id,需要转化成中文名称
partners为全量查询结果,包含了id与中文名称的一一对应关系
getPartnerName为数据处理函数,用以找到与id对应的中文名称
<!-- 伙伴名称 -->
<el-table-column prop="partner1" :formatter="getPartnerName" align="left" show-overflow-tooltip label="伙伴名称" width=""></el-table-column>
getPartnerName(row, col) {
console.log('partners', this.partners)
for (var i in this.partners) {
if (this.partners[i].pid === row.partner1) {
return this.partners[i].shortname
}
}
}

示例2:时间格式化

// 时间格式化
dateFormat (row, column) {
var date = row[column.property]
if (date === undefined) {
return ''
}
return DateTimeFormat(new Date(date), 'yyyy-mm-dd')
}

vue表格之:formatter=fun的更多相关文章

  1. 应用场景:vue表格撤销删除与保存按钮的显隐

    应用场景:vue表格撤销删除与保存按钮的显隐

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

    众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...

  3. Vue表格中时间的处理

    Vue中表格的数据应该来自后台数据库,然后从数据库中读取到的数据,时间格式可能有些不同,我们可以根据实际需要来对这个时间进行转化. 这里介绍一个js库,它提供了强大的日期处理功能,功能强大且只有2k大 ...

  4. vue表格实现固定表头首列

    前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...

  5. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  6. Vue 表格里的下拉列表

    下拉列表column-select.vue组件内容: <template> <div class="column-select-wrapper"> < ...

  7. vue 表格导出excel

    首先要install两个依赖, 1 npm install -S file-saver xlsx 2  npm install -D script-loader 在项目src目录下新建一个文件夹ven ...

  8. Vue 表格内容根据后台返回状态位填充文字

    本文地址:http://www.cnblogs.com/veinyin/p/8534365.html  Vue 做表格时我们常用的就是 v-for ,直接把 prop 绑定上去,但是如果表格内容需要我 ...

  9. vue表格中显示金额格式化与保存时格式化为数字并校验!

    最近项目中遇到了成本计算的,需要显示金额,保存一下,以后方便直接拿来用! 一 数字转金额格式显示 //数字转金额格式 format:function(s){ if(/[^0-9\.]/.test(s) ...

随机推荐

  1. static/extern&const个人理解

    //const仅仅用来修饰右边的变量(基本数据变量p,指针变量*p) static NSString *const keyA = @"keyA"; static NSString ...

  2. Python|读、写Excel文件(三种模块三种方式)

    python读写excel的方式有很多,不同的模块在读写的讲法上稍有区别: 用xlrd和xlwt进行excel读写: 用openpyxl进行excel读写: 用pandas进行excel读写: imp ...

  3. 解决Keep-Alive 和 Close 不能使用此属性设置

    http://www.hejingzong.cn/blog/viewblog_86.aspx Keep-Alive 和 Close 不能使用此属性设置 public static void SetHe ...

  4. BCZM : 1.6

    https://blog.csdn.net/kabini/article/details/2311946 题目大意: 水房能容纳饮料的总量是V,有一批饮料,每种饮料单个容量都是2的方幂,每种饮料信息如 ...

  5. css---7自定义字体

    1.Adobe illustrator AI是一种应用于出版.多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的矢量图形处理工具. 该软件主要应用于印刷出版.海报书籍排版.专业插画.多媒体图像处 ...

  6. xkl的各种沙雕低错

    13,特判判掉20分算不算? 12,linux用c++11编译: g++ -std=c++11 -o a a.cpp g++ a.cpp -std=c++11 -o a //g++ a.cpp -st ...

  7. hibernate_01_SSH环境搭建

    1.maven工程pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...

  8. python 集合(set)

    1.集合的创建 集合是一个无序不重复元素的集.基本功能包括关系测试和消除重复元素. 创建集合:大括号或 set() 函数可以用来创建集合.注意:想要创建空集合,你必须使用 set() 而不是 {},后 ...

  9. (转)小白科普, netty 有啥用?

      随着移动互联网的爆发性增长,小明公司的电子商务系统访问量越来越大,由于现有系统是个单体的巨型应用,已经无法满足海量的并发请求,拆分势在必行. 在微服务的大潮之中, 架构师小明把系统拆分成了多个服务 ...

  10. socket远程执行命令

    两个脚本模拟远程执行命令 cmd_server.py import socket import subprocess # 运行系统命令 sk = socket.socket() addess = (' ...