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 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
js实现飞机大战小游戏
Aug 26 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php类中private属性继承问题分析
2012/11/01 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
Openlayers实现测量功能
2020/09/25 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
使用tensorflow实现线性svm
2018/09/07 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
水产养殖学应届生求职信
2013/09/29 职场文书
德语专业求职信
2014/03/12 职场文书
明信片寄语大全
2014/04/08 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
美元符号 $
2022/02/17 杂记