【测试开发】vue+elementUI 过滤器实现数据转换

需求：

后端传过来的数据中有个字段为状态，为整形类型，现在需要在前端展示，1为在用，0为禁用

 

解决：

Js中加入如下代码（不在export default里面）

 const globalStatus = [{ global_status: 1, global_status_name: '在用' }, { global_status: 0, global_status_name: '禁用' }, ] 

 

export default中加入filters(与data同级)

 

filters: {
   // filters 中 this 指向的不是vue实例, 所有无法直接获取 data 中的数据
   globalStatusFilter(global_status) {
      // 全局的 globalStatus , 返回一个满足条件的对象
      const obj = globalStatus.find(obj => obj.global_status === global_status)
      // 非空返回对应的名称
      return obj ? obj.global_status_name : null
   }
},

 

 

template中加入filter

 

<el-table-column fixed prop="global_status" label="状态" sortable min-width="20%" align="center">
   <template slot-scope="scope">
      <el-tag :type="scope.row.global_status === 1 ? 'success' : 'info'">{{scope.row.global_status | globalStatusFilter}}</el-tag>
   </template>
</el-table-column>