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. 理解Generic.xaml和Themes

    "Generic.xaml"这个名称并非偶然 通过上面的叙述,你可能会有冲动将Generic.xaml中的Style代码剪切出来,粘贴到任何一个我们的控件可以找到的地方,然后把Ge ...

  2. 部门sonarque代码扫描测试服务器docker化

    部门内部的服务器太多了,打算将对应的测试环境docker化. 转成docker后,以后不管是升级调研还是定制化开发测试都方便,就是事情太多,一直没有抽出身来做,今天处理下并把过程记录下来跟大家分享下. ...

  3. python string.py 源码分析 二:capwords

    def capwords(s, sep=None): """capwords(s [,sep]) -> string Split the argument into ...

  4. PHP封装类 【 设置分页 】 !!! 可以直接引用 !!! 都有自己理解的注释,挺详细的,有搜到的朋友可以能帮到你们 【 新手一看练两遍就懂 】

    在网页要显示出的内容,就是客户能看到的东西 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  5. tomcat的缺少tcnative-1.dll的解决(申明:来源于网络)

    tomcat的缺少tcnative-1.dll的解决 地址:http://blog.csdn.net/topwqp/article/details/7713388

  6. 201621123049 《Java程序设计》第1周学习总结

    一. 本周学习总结 JDK,JRE,JVM等基本概念 怎么学好java???不,是怎么才能应用好??? 编程!编程!编程! 思考->设计->解决问题 二. 书面作业 1.虚拟机 1.1 执 ...

  7. CH 1402 - 后缀数组 - [字符串hash]

    题目链接:传送门 描述 后缀数组 (SA) 是一种重要的数据结构,通常使用倍增或者DC3算法实现,这超出了我们的讨论范围. 在本题中,我们希望使用快排.Hash与二分实现一个简单的 $O(n \log ...

  8. MySql数据库笔试题总结

    数据库面试题94577265 1,设有关系EMP(ENO,ENAME,SALARY,DNO),其中各属性的含义依次为职工号.姓名.工资和所在部门号,以及关系DEPT(DNO,DNAME,MANAGER ...

  9. toggle显示与隐藏切换

    jQuery中显示与隐藏切换toggle方法 show与hide是一对互斥的方法.需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法.比如显示的元 ...

  10. 为什么实数系里不存在最小正数?(Why the smallest positive real number doesn't exist in the real number system ?)

    We define the smallest positive real number as the number which is explicitly greater than zero and ...