一、全局過濾器1、創(chuàng)建filter.js文件,統(tǒng)一集中管理; 代碼示例,根據(jù)參數(shù)0和1返回狀態(tài)值 export function lockState(val) { return val==0 ? "未鎖定" : "鎖定"; } 2、main.js引入過濾器全局變量import * as filters from './filters' // global filters Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) 3、vue視圖文件使用<el-table-column prop="isLock" label="鎖定狀態(tài)"> <template slot-scope="scope"> <span > {{scope.row.isLock | lockState}} </span> </template> </el-table-column> 二、局部過濾器在組件中定義,與data、created、method同級 filters:{ filter1:function(value){ return value.chartAt(0).toUpperCase()+value.slice(1) } } 三、多個過濾器級聯(lián) 實際工作中,可以依次使用兩個或多個過濾器,每個過濾器參數(shù)為上一個過濾器結(jié)果。 <div> {{ message | filter1 | filter2 }} </div> |
|