【測試開發】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>