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格式化数据的更多相关文章

  1. element table 组件内容换行方案

    element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略.pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> 标 ...

  2. Vue. 之 Element table 单元格内容隐藏

    Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...

  3. Vue. 之 Element table 高度自适应

    Vue. 之 Element table 高度自适应 使用vue创建table后,其高度自适应浏览器高度. 在创建的 el-table 中添加:height属性,其值为一个变量(tableHeight ...

  4. vue+element table的弹窗组件

    在处理表格编辑相关的需求,是需要做一个弹框进行保存的:或者查看表格数据的详细信息时,也是需要做弹窗: 当然 ,这是类似于这样的 ,当然 element 已经帮我们做好 弹窗这一块 主要 我想记录的是 ...

  5. vue+element 表格formatter数据格式化并且插入html标签

    前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...

  6. vue+ element table如何给指定的单元格添加点击事件?

    今天使用vue,以及element-ui这个框架时,发现业务需要在表格里加一个连接跳转,当时立刻打开element的官网,进行查看http://element-cn.eleme.io/#/zh-CN/ ...

  7. element table 二次封装 父子组件传值 组件通信

    新建一个组件(即子组件)table.vue 子组件编辑内容如下图所示 子组件通过props获取父组件传递过来的参数,如下图所示,type指明传递到子组件的数据类型,default指定默认值,一般不给 ...

  8. Element table使用技巧详解

    1.控制table某些行数不显示 下载附件的需求,有些行有附件,有些没有,所以需要过滤,重点是:Array.filter()使用 <el-card :body-style="{ pad ...

  9. element table固定表头,表的高度自适应解决方法

    主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...

  10. element table切换分页不勾选的自带方法

    场景一:没有回显勾选的情况 table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true <template> <el-table v- ...

随机推荐

  1. jstat 简介

      1. jstat -gc pid 可以显示gc的信息,查看gc的次数,及时间. 其中最后五项,分别是young gc的次数,young gc的时间,full gc的次数,full gc的时间,gc ...

  2. linux远程安装和使用

    Putty:一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件,体积小.完全免费.使用方便快捷,基本的功能都有.有点不好的地方:在一界面上一次只能打开一个窗口,对于快速查看和操作不太 ...

  3. 7.16顺便贴一下 pep8的标准

    PEP8 Python 编码规范 一 代码编排 1 缩进.4个空格的缩进(编辑器都可以完成此功能),不使用Tap,更不能混合使用Tap和空格. 2 每行最大长度79,换行可以使用反斜杠,最好使用圆括号 ...

  4. pycharm平台下的Django教程(转)

    本文面向:有python基础,刚接触web框架的初学者. 环境:windows7   python3.5.1  pycharm专业版  Django 1.10版 pip3 一.Django简介 百度百 ...

  5. dts的pci模块中bus-range和ranges

    bus-range = <2 3>;       该设备(一般为RC)下的pci总线号范围 ranges = <0x2000000 0x0 0xc0000000 0 0xc00000 ...

  6. poj3376 Finding Palindromes【exKMP】【Trie】

    Finding Palindromes Time Limit: 10000MS   Memory Limit: 262144K Total Submissions:4710   Accepted: 8 ...

  7. 深度学习模型stacking模型融合python代码,看了你就会使

    话不多说,直接上代码 def stacking_first(train, train_y, test): savepath = './stack_op{}_dt{}_tfidf{}/'.format( ...

  8. 【模板】HDU 1541 树状数组

    http://acm.hdu.edu.cn/showproblem.php?pid=1541 题意:给你一堆点,每个点右一个level,为其右下方所有点的数量之和,求各个level包含的点数. 题解: ...

  9. Spring Boot引起的“堆外内存泄漏”排查及经验总结

    小结: 检索词:C++内存分配器.jvm内存模型.gdb.内存泄露 https://tech.meituan.com/2019/01/03/spring-boot-native-memory-leak ...

  10. 2012年蓝桥杯省赛A组c++第2题(暴力求解古堡算式)

    /* 古堡算式 福尔摩斯到某古堡探险,看到门上写着一个奇怪的算式: ABCDE * ? = EDCBA 他对华生说:“ABCDE应该代表不同的数字,问号也代表某个数字!” 华生:“我猜也是!” 于是, ...