vue 過濾器使用的傳參說明

在table中，需要對obj的數據類型進行文字轉換，例如后台接口返回的姓別值：1，2。其中需要頁面根據字典需要把1=》男，2=》女進行轉換。

以前的習慣是每一個過濾方法都寫一個方法進行轉換，例如：

　　頁面代碼：

 <el-table-column width="200px"align="left" label="性別">
    <template slot-scope="scope">
        <span>{{scope.row.sex | filterSex }}</span>
    </template>
</el-table-column>    

其中，過濾器方法：　

　

 

后面發現只需要寫一個過濾器即可，需要傳入需要轉換的值，以及用於獲取轉換的字典項的vuex的getter即可。

錯誤寫法：

以下的錯誤寫法，發現我在filterSex方法中接收到的數據都是sex的value值，而接收不到sexGetter的值。

 <el-table-column width="200px"align="left" label="性別">
    <template slot-scope="scope">
        <span>{{scope.row.sex | filterFieldFun（scope.row.sex, 'sexGetter'） }}</span>
    </template>
</el-table-column>    

　　

原因：

　　經過查看官網，https://cn.vuejs.org/v2/guide/filters.html得知：需要過濾的值不需要再過濾器方法中傳遞，在接收的時候，已經默認方法值第一個參數就是需要過濾的值。因此正確寫法是：

 <el-table-column width="200px"align="left" label="性別">
    <template slot-scope="scope">
        <span>{{scope.row.sex | filterFieldFun（'sexGetter'） }}</span>
    </template>
</el-table-column>  

　　這樣方法接收到scope.row.sex的值和‘sexGetter'

 

 

　　關於過濾器的官網截圖說明：