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操作对象数组元素方法详解
Nov 26 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
原生js实现日历效果
2020/03/02 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
Python迭代用法实例教程
2014/09/08 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python递归函数绘制分形树的方法
2018/06/22 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
技校生自我鉴定
2013/12/08 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
tomcat下部署jenkins的方法
2022/05/06 Servers