Vue -- filter 过滤器、以及在table中的使用

使用方法：

// 双花括号中
{{ isActive | isActiveFitlter}}

// 在v-bind 中
<div v-bind:id=" isActive | isActiveFitlter"></div>

一、组件中定义本地 Filter

filters:{
    isActiveFitlter : (value)=>{
         return value===1?'激活':'冻结'
    }
}

二、创建Vue实例前定义全局过滤器

Vue.filter('isActiveFitlter', (value)=>{
     return value === 1?'激活':'冻结'
})
new Vue({
  // ...
})

三、全局 Filter

1、自定义一个js文件，可以放在common文件夹中

//filters.js
let isActiveFitlter = value => {
    return value===1?'激活':'冻结'
}
export { isActiveFitlter }

2、main.js 引入 filters.js

import * as filters from './assets/common/filters'
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

3、组件中使用

<span> {{ isActive | isActiveFitlter }} </span>

注意：

在table中使用需要借助 插槽

<el-table-column prop="isActive" label="状态">
     <template slot-scope="scope">
          {{scope.row.isActive | isActiveFitlter}}
     </template>
</el-table-column>