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实现的分页函数
Dec 22 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
JavaScript File分段上传
Mar 10 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
Node.js实现文件上传
Jul 05 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
js调用刷新界面的几种方式
May 03 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
vue项目在线上服务器访问失败原因分析
Aug 14 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的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
详解javascript遍历方式
2015/11/11 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python 构造三维全零数组的方法
2018/11/12 Python
python按比例随机切分数据的实现
2019/07/11 Python
200行python代码实现2048游戏
2019/07/17 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
python定义类的简单用法
2020/07/24 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
大学自主招生自荐信范文
2014/02/26 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
2015新学期开学寄语
2015/02/26 职场文书
员工家属慰问信
2015/03/24 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
水知道答案观后感
2015/06/08 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python
MySQL数据管理操作示例讲解
2022/12/24 MySQL