脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element-ui表格数据转换

element-ui表格数据转换的示例代码

 更新时间：2018年08月24日 09:44:10   作者：包子源  
这篇文章主要介绍了element-ui表格数据转换的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

业务场景：在后台管理系统表格模块中，我们请求回来的数据类似性别等等，后台给我们返的不是男，或者女，而是给我们返回的是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对应的值就行了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue中实现拖动调整左右两侧div的宽度的示例代码

    vue中实现拖动调整左右两侧div的宽度的示例代码

    这篇文章主要介绍了vue中实现拖动调整左右两侧div的宽度的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 基于vue编写一个月饼连连看游戏

    基于vue编写一个月饼连连看游戏

    中秋节快要到啦,我们一起用Vue创建一个简单的连连看游戏,连连看大家一定都玩过吧,通过消除相同的图案来清理棋盘,小编将一步步引导大家完成整个游戏的制作过程,让我们开始吧,一起为中秋节增添一些互动和娱乐
    2023-09-09
  • 关于vue中根据用户权限动态添加路由的问题

    关于vue中根据用户权限动态添加路由的问题

    每次路由发生变化时都需要调用一次路由守卫，并且store中的数据会在每次刷新的时候清空，因此需要判断store中是否有添加的动态路由，本文给大家分享vue中根据用户权限动态添加路由的问题，感兴趣的朋友一起看看吧
    2021-11-11
  • 前端vue如何根据菜单自动生成路由(动态配置前端路由)

    前端vue如何根据菜单自动生成路由(动态配置前端路由)

    估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单,这篇文章主要给大家介绍了关于前端vue如何根据菜单自动生成路由的相关资料,需要的朋友可以参考下
    2024-04-04
  • Vue3中子组件改变父组件传过来的值(props)的方法小结

    Vue3中子组件改变父组件传过来的值(props)的方法小结

    在 Vue 3 中,子组件改变父组件传过来的值（props）的方法主要有以下几种：通过事件发射、使用 v-model、模拟 .sync 修饰符的功能（Vue 3 中已移除）,以及使用 ref 或 reactive,下面我将结合代码示例和使用场景详细讲解这些方法,需要的朋友可以参考下
    2025-04-04
  • vue-image-crop基于Vue的移动端图片裁剪组件示例

    vue-image-crop基于Vue的移动端图片裁剪组件示例

    这篇文章主要介绍了vue-image-crop基于Vue的移动端图片裁剪组件示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue3使用vuedraggable和grid实现自定义拖拽布局方式

    vue3使用vuedraggable和grid实现自定义拖拽布局方式

    这篇文章主要介绍了vue3使用vuedraggable和grid实现自定义拖拽布局方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue组件选项props实例详解

    Vue组件选项props实例详解

    父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
    2017-08-08
  • vue-cli脚手架的.babelrc文件用法说明

    vue-cli脚手架的.babelrc文件用法说明

    这篇文章主要介绍了vue-cli脚手架的.babelrc文件用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue2安装vue-router报错的解决方法

    vue2安装vue-router报错的解决方法

    vue-router的安装不是理想化的,会出现问题,需要静下心认真研究,熬过去就会懂得更多,这篇文章主要给大家介绍了关于vue2安装vue-router报错的解决方法,需要的朋友可以参考下
    2022-03-03

最新评论