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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
微信小程序实现图片压缩
Dec 03 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 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读取MySQL数据代码
2008/06/05 PHP
php调用c接口无错版介绍
2014/03/11 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
php7 新增功能实例总结
2020/05/25 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
python k-近邻算法实例分享
2014/06/11 Python
python之wxPython应用实例
2014/09/28 Python
浅析Python中signal包的使用
2015/11/13 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
python matplotlib库的基本使用
2020/09/23 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
超市实习总结自我鉴定
2013/09/19 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
银行自荐信范文
2015/03/25 职场文书
三八节活动主持词
2015/07/04 职场文书
活动新闻稿范文
2015/07/17 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python