element-ui表格数据转换的示例代码


Posted in Javascript onAugust 24, 2018

业务场景:在后台管理系统表格模块中,我们请求回来的数据类似性别等等,后台给我们返的不是男,或者女,而是给我们返回的是0和1,或者是A和B;但是怎么在表格中显示成男和女呢,这里就需要用到数据转换 formatter属性

具体代码如下:

<el-table
 :data="tableData"
 highlight-current-row
 style="width: 100%">
 <el-table-column
  prop="name"
  label="姓名">
 <el-table-column
  prop="authority"
   :formatter="formatRole"
  label="角色">
 </el-table-column>
</el-table>

js部分代码:

methods: {
  //角色转换
  formatRole: function(row, column) {
   return row.authority == 'ROLE_REGISTRAR' ? "教务主任" : row.authority == 'ROLE_GRADE_DIRECTOR' ? "年级主任" : "班主任";
  }
}

参数row就是表格当前行的所有数据

当然我们还可以用来截字符串啊,什么的,方法自己定义,return对应的值就行了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
基于jquery实现五星好评
Nov 18 jQuery
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 #Javascript
vuejs 动态添加input框的实例讲解
Aug 24 #Javascript
vue.js input框之间赋值方法
Aug 24 #Javascript
react build 后打包发布总结
Aug 24 #Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 #Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 #Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 #Javascript
You might like
joomla内置的表单验证功能使用方法
2010/06/11 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
jquery.validate的使用说明介绍
2013/11/12 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
js获取域名的方法
2015/01/27 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python工程师面试题 与Python Web相关
2016/01/14 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python的concat等多种用法详解
2018/11/28 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
党委书记岗位职责
2013/11/24 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
励志演讲稿300字
2014/08/21 职场文书
法人授权委托书样本
2014/09/19 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js