Vue-cli項目中過濾器使用

場景：在頁面顯示的內容，並非我們存入的字段內容，需要進行規律的轉換。

filter 官方文檔：https://cn.vuejs.org/v2/guide/filters.html

在element-ui組件中，使用表格中的字段顯示對應內容，需要使用到的過濾器功能。

<el-table-column prop="dev_status" label="所屬端" width="180"> //如表格中需要用到所屬端的字段，字段在數據庫中存儲是1，2，代表andrid 和ios，在顯示中需要顯示能看的懂的內容。
    <template slot-scope="scope">  //需要使用template 來實現我要操作的內容   slot-scope 插槽  scope是我當前所選擇的對象，在寫過濾器時，方法中傳入的參數就是這里傳到過去的
        <span>{{scope.row.dev_status | devType}}</span>   // 在vue使用過濾器的方式，是在需要使用的內容后，通過管道符號 ｜ 過濾器的名稱來實現的
    </template>
</el-table-column>

 

在export default 上面，創建個變量

const devices=[
  {type:1,name:"Android"},
  {type:2,name:"IOS"}
]

 

創建filter方法，需要在filters中寫方法，代表這是一個過濾器

filters:{ //過濾器

　　devType(res){ // 傳入當前操作的行對象

　　　　const d = devices.find(obj=> obj.type == res)  find方法遍歷創建的字典，找到對應type，然后返回給過濾器使用

　　　　return d?d.name:null

　　}

}