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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
浅析javascript的return语句
Dec 15 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
JavaScript 如何计算文本的行数的实现
Sep 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三元运算的2种写法代码实例
2014/05/12 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
javascript 闭包
2011/09/15 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python 列表理解及使用方法
2017/10/27 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python xlsxwriter模块的使用
2020/12/24 Python
实用的简历自我评价
2014/03/06 职场文书
银行员工考核评语
2014/12/31 职场文书
财务部会计岗位职责
2015/02/03 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android