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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
javascript中Number的方法小结
Nov 21 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
JQuery animate动画应用示例
May 14 jQuery
详解Vue.js 响应接口
Jul 04 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树的代码,可以嵌套任意层
2006/10/09 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python实现媒体播放器功能
2018/02/11 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
专升本自我鉴定
2013/10/10 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
责任心演讲稿
2014/05/14 职场文书
普通党员个人整改措施
2014/10/27 职场文书
西柏坡导游词
2015/02/05 职场文书
护林员个人总结
2015/03/04 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python
Windows7下FTP搭建图文教程
2022/08/05 Servers