Vue filter filter and its application in table

Usage:

//  In double curly braces 
{{ isActive | isActiveFitlter}}

//  In v-bind  Medium 
<div v-bind:id=" isActive | isActiveFitlter"></div>

1. Define native Filter in component

filters:{
  isActiveFitlter : (value)=>{
     return value===1?' Activate ':' Freeze '
  }
}

2. Define global filters before creating an Vue instance

Vue.filter('isActiveFitlter', (value)=>{
   return value === 1?' Activate ':' Freeze '
})
new Vue({
 // ...
})

3. Global Filter

1. Customize 1 js file, which can be placed in common folder

//filters.js
let isActiveFitlter = value => {
  return value===1?' Activate ':' Freeze '
}
export { isActiveFitlter }

2. main. js is introduced into filters. js

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

3. Use in the component

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

Note:

Use in table requires the help of slots

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

Additional knowledge: vue filters array data to control whether a row 1 of el-table is displayed

Scenario: The data found out for the first time is received by list. Then I use the data in list for the second time, but I want to filter out the information of a selected user. At this time, I use filter function to filter list. It's simple. Take a note.

<el-dialog title=" Cloning rule " :visible.sync="cloneDialogVisible" width="600px">
   <el-table
    v-loading="listLoading"
    :data="list2" // Is bound to list2
    element-loading-text="Loading"
    empty-text=" There is no data "
    border
    fit
    stripe
    :row-key="getRowKey"
    @selection-change="handleSelectionChange"
>

// Filter data code 
showCloneRuleslView(user_id) {
    this.SourceUserId = parseInt(user_id)
    //filter Filter function uses 
    this.list2 = this.list.filter((data) => {
    // Filter out SourceUserId This data 
     return data.user_id !== this.SourceUserId
    })
    this.cloneDialogVisible = true
    console.log(this.SourceUserId)
  },