Element-table-formatter格式化数据
1.formatter 用来格式化内容
对table的值进行处理。Function(row, column, cellValue, index){}
使用formatter需要注意以下几点:
①无论formatter出何种形式,格式化出的DOM一定都是被包含在默认的div标签内
②在写formatter函数时要保证有值返回,否则单元格没有内容可展示,所以if的时候别忘了else
③formatter函数不会作用在列属性checkbox为true的单元格上,checkbox列是组件预留的。
<template>
<el-table :data="tableData3" ref="multipleTable">
<el-table-column type="selection" width="" ></el-table-column>
<el-table-column type="index" label="序号" width=""></el-table-column>
<el-table-column prop="sex" label="性别" width="" :formatter="formatSex"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="IsAudit" :formatter="formatterColumn" label="审核状态" ></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData3: [{
id:'',
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
IsAudit:,
sex:''
}, {
id:'',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
IsAudit:,
sex:''
}, {
id:'',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
IsAudit:,
sex:'-1'
}]
}
},
mounted() {
},
methods: {
formatSex: function (row, column, cellValue, index) {
return row.sex == ? '男' : row.sex == ? '女' : '未知';
},
//状态改成汉字
formatterColumn(row, column) {
switch(row.IsAudit){
case :
return '未通过';
break;
case :
return '审核通过';
break;
case :
return '待审核';
break;
case :
return '草稿';
break;
default:
return '未知';
}
}
}
}
</script>
这篇写的不错:https://blog.csdn.net/gao_xu_520/article/details/80049254
Element-table-formatter格式化数据的更多相关文章
- element table 组件内容换行方案
element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略.pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> 标 ...
- Vue. 之 Element table 单元格内容隐藏
Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...
- Vue. 之 Element table 高度自适应
Vue. 之 Element table 高度自适应 使用vue创建table后,其高度自适应浏览器高度. 在创建的 el-table 中添加:height属性,其值为一个变量(tableHeight ...
- vue+element table的弹窗组件
在处理表格编辑相关的需求,是需要做一个弹框进行保存的:或者查看表格数据的详细信息时,也是需要做弹窗: 当然 ,这是类似于这样的 ,当然 element 已经帮我们做好 弹窗这一块 主要 我想记录的是 ...
- vue+element 表格formatter数据格式化并且插入html标签
前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...
- vue+ element table如何给指定的单元格添加点击事件?
今天使用vue,以及element-ui这个框架时,发现业务需要在表格里加一个连接跳转,当时立刻打开element的官网,进行查看http://element-cn.eleme.io/#/zh-CN/ ...
- element table 二次封装 父子组件传值 组件通信
新建一个组件(即子组件)table.vue 子组件编辑内容如下图所示 子组件通过props获取父组件传递过来的参数,如下图所示,type指明传递到子组件的数据类型,default指定默认值,一般不给 ...
- Element table使用技巧详解
1.控制table某些行数不显示 下载附件的需求,有些行有附件,有些没有,所以需要过滤,重点是:Array.filter()使用 <el-card :body-style="{ pad ...
- element table固定表头,表的高度自适应解决方法
主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...
- element table切换分页不勾选的自带方法
场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...
随机推荐
- chrome设置捕获异常时自动暂停js
1. [F12 | 右键审查元素] 打开chrome调试工具 2. 进行如下设置 a. 点击Pause on exceptions b. 选中Pasue On Caught Exceptions 设置 ...
- 从Elasticsearch来看分布式系统架构设计
分布式系统类型多,涉及面非常广,不同类型的系统有不同的特点,批量计算和实时计算就差别非常大.这篇文章中,重点会讨论下分布式数据系统的设计,比如分布式存储系统,分布式搜索系统,分布式分析系统等. 我们先 ...
- Linux驱动技术(三) _DMA编程
DMA即Direct Memory Access,是一种允许外设直接存取内存数据而没有CPU参与的技术,当外设对于该块内存的读写完成之后,DMAC通过中断通知CPU,这种技术多用于对数据量和数据传输速 ...
- ubuntu-16.04更好软件源
author: headsen chen date:2019-03-06 14:01:07 1,修改软件源文件成如下的清华大学的源(亲测可用) root@ubuntu:/var/lib/apt/li ...
- 如何将MP3录音转文字
相信很多人都有电话录音的习惯,因为这样可以记录下很多重要的信息.那么当我们通过录音将一些重要的信息记录下来后,我们应该怎样将这些录音文件转换成文字进行记录呢?下面我们就一起来看一下吧. 操作步骤: 步 ...
- 如何查看目前正在使用的Windows10是哪个版本?
其实相当的简单: win+R 输入winver,就会出现如下图的信息: 就能看到版本信息了
- .NET Core开发日志——Entity Framework与PostgreSQL
Entity Framework在.NET Core中被命名为Entity Framework Core.虽然一般会用于对SQL Server数据库进行数据操作,但其实它还支持其它数据库,这里就以Po ...
- [No0000100]正则表达式匹配解析过程分析(正则表达式匹配原理)&regexbuddy使用&正则优化
常见正则表达式引擎引擎决定了正则表达式匹配方法及内部搜索过程,了解它至关重要的.目前主要流行引擎有:DFA,NFA两种引擎. 引擎 区别点 DFA Deterministic finite autom ...
- GPU安装小结
今天一起安装了4块1080的卡.也算有一些坑吧,记录一下. 1)1080显卡,驱动型号,tensorflow,cuda, cudnn 版本一定要一致.我的清单如下: ################# ...
- 一个按成绩排序SQL的写法问题
测试数据: SQL> select * from sscore; NAME SCORE ---------- ----- aa 99 bb ...