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 相关文章推荐
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 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
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python实现多层感知器
2019/01/18 Python
Python读写文件基础知识点
2019/06/10 Python
python3多线程知识点总结
2019/09/26 Python
python如何实现复制目录到指定目录
2020/02/13 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
python实现程序重启和系统重启方式
2020/04/16 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
房产协议书范本2014
2014/09/30 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2015新年寄语大全
2014/12/08 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS