vue表格之:formatter=fun
作用:对从数据库中取出的数据进行处理后展示。
示例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的更多相关文章
- 应用场景:vue表格撤销删除与保存按钮的显隐
应用场景:vue表格撤销删除与保存按钮的显隐
- Vue表格中,对数据进行转换、处理
众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...
- Vue表格中时间的处理
Vue中表格的数据应该来自后台数据库,然后从数据库中读取到的数据,时间格式可能有些不同,我们可以根据实际需要来对这个时间进行转化. 这里介绍一个js库,它提供了强大的日期处理功能,功能强大且只有2k大 ...
- vue表格实现固定表头首列
前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- Vue 表格里的下拉列表
下拉列表column-select.vue组件内容: <template> <div class="column-select-wrapper"> < ...
- vue 表格导出excel
首先要install两个依赖, 1 npm install -S file-saver xlsx 2 npm install -D script-loader 在项目src目录下新建一个文件夹ven ...
- Vue 表格内容根据后台返回状态位填充文字
本文地址:http://www.cnblogs.com/veinyin/p/8534365.html Vue 做表格时我们常用的就是 v-for ,直接把 prop 绑定上去,但是如果表格内容需要我 ...
- vue表格中显示金额格式化与保存时格式化为数字并校验!
最近项目中遇到了成本计算的,需要显示金额,保存一下,以后方便直接拿来用! 一 数字转金额格式显示 //数字转金额格式 format:function(s){ if(/[^0-9\.]/.test(s) ...
随机推荐
- scala入门基础学习
1.Scala基础语法 区分大小写 类名 - 对于所有的类名的第一个字母要大写.如果需要使用几个单词来构成一个类的名称,每个单词的第一个字母要大写. 方法名称 - 所有的方法名称的第一个字母用小写. ...
- 【学术篇】SDOI2009 最优图像
又是一道辣鸡卡常数题…. luogu上有些题的时限还是有毒的… 最后也只能靠O2过掉了… 不过给我原题当时的2s我随便过给你看嘛, 哪怕评测姬慢50%都没关系的.. 贴一下codevs的截图… 你看最 ...
- 当对象转换成JSON的时候处理时间格式
/// <summary> /// 格式化日期 /// </summary> /// <param name="foramt">格式化规则< ...
- JS去除字符串拼接末尾的符号(逗号)
前言:在JS中,有时需要进行字符串的拼接,而拼接的字符串以某种符号分隔,在拼接好的字符串末尾会多出一个分隔符,这时我们可以采取以下几种方法来去除末尾的分隔符. 方法一:使用substring() 和 ...
- Algo: Basic
1. 二维数组的查找 2. 替换空格 3. 从尾到头打印链表 4. 重建二叉树 5. 用两个栈实现队列 6. 旋转数组的最小数字 7. 斐波那契数列 8. 跳台阶 9. 变态跳台阶 10. 矩阵覆盖 ...
- css---8 过渡属性刨析
1. transition-property 默认值为 all,表示所有可被动画的属性都表现出过渡动 可以指定多个 property 属性值: none 没有过渡动画. all 所有可被动 ...
- 93. 复原IP地址
题目描述: 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255.11.135&q ...
- kmp变形,带通配符的kmp——华科校赛E 好题
https://blog.csdn.net/a302549450/article/details/80948741?tdsourcetag=s_pctim_aiomsg 上面是题解的链接.., 其实和 ...
- hadoop镜像文件和编辑日志文件
镜像文件和编辑日志文件 1)概念 namenode被格式化之后,将在/opt/module/hadoop-2.7.2/data/tmp/dfs/name/current目录中产生如下文件 edits_ ...
- CF459E Pashmak and Graph (Dag dp)
传送门 解题思路 \(dag\)上\(dp\),首先要按照边权排序,然后图都不用建直接\(dp\)就行了.注意边权相等的要一起处理,具体来讲就是要开一个辅助数组\(g[i]\),来避免同层转移. 代码 ...