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 相关文章推荐
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
神族 Protoss 历史背景
2020/03/14 星际争霸
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP自定义错误用法示例
2016/09/28 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Python去除字符串两端空格的方法
2015/05/21 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
中国文明网签名寄语
2014/01/18 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
仲裁协议书
2014/09/26 职场文书
小学老师对学生的评语
2014/12/29 职场文书
赢在执行观后感
2015/06/16 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL