Vue「過濾器」的使用，自定義過濾器 filters （Vue的過濾器filters在Element表格el-table中的應用 ）

一、Vue過濾器filters的優點和使用場景

1. 優點：

• filters不會修改數據，只是改變用戶看到的輸出（效果）

（計算屬性 computed ，方法 methods 都是通過修改數據來處理數據格式的輸出顯示）。

2. 使用場景：

• 需要格式化數據的情況，比如我們需要處理 時間、價格等數據格式的輸出 / 顯示。
• 比如後端給你返回一個 年月日的日期字符串，前端需要展示爲 多少天前 的數據格式，此時就可以用我們的fliters過濾器來處理數據。

二、Vue過濾器filters使用方法 （Vue 中使用「過濾器」filters）

過濾器用在 插值表達式 {{ }} 和 v-bind 表達式 中，然後由管道操作符“ | ”進行指示。

過濾器是一個函數，它會把表達式 中的值始終當作函數的第一個參數。

三、 過濾器的定義方式

①. 本地過濾器： 把過濾器定義在當前使用的組件內。我們利用過濾器來修改需要輸出的數據格式。

示例如下：

<template>
    <div>
       <ul v-for="item in products" :key="item.id" class="product-ul">
           <li>商品名稱：{{item.name}}</li>
           <li>商品價格：{{item.price | filterPrice}}</li>
           <li>商品詳情：<a v-bind:href="item.detail | filterURL">查看詳情</a></li>
       </ul>
    </div>
</template>
<script>
export default {
  data () {
    return {
      products: [
        { name: 'cpu', price: 25, detail: 'cpu' },
        { name: '硬盤', price: '', detail: 'ying' }
      ]
    }
  },
  filters: {
    filterPrice (price) {
      return price ? ('$' + price) : '--'
    },
    filterURL (val) {
      return val ? ('https://baidu.com/' + val) : '#'
    }
  }
}
</script>
<style lang="scss">
    .product-ul{
        border: 1px solid #eee;
        width: 500px;
        li{
            display: inline-block;
            padding: 10px;
            margin-bottom: 15px;
        }
    }
</style>

②. 全局過濾器： 注意，使用全局過濾器時，必須要在 Vue 的實例之前。

示例如下（上面的處理價格的過濾器寫法如下）：

Vue.filter("filterPrice", function (price) {
  return price?("$" + price):'--'
});

new Vue({
 //...
})

如，將上面的本地（局部）過濾器修改爲全局過濾器的寫法：

在項目的src文件夾下的 main.js 添加如下兩個過濾器，注意要將其寫在new Vue(...)
之前

Vue.filter('filterPrice', function (price) {
  return price ? ('$' + price) : '--'
})

Vue.filter('filterURL', function(val){
  return val ? ('https://baidu.com/' + val) : '#'
}) 

在組件中即可直接使用在main.js中定義的過濾器：

<template>
    <div>
       <ul v-for="item in products" :key="item.id" class="product-ul">
           <li>商品名稱：{{item.name}}</li>
           <li>商品價格：{{item.price|filterPrice}}</li>
           <li>商品詳情：<a :href="item.detail|filterURL">查看詳情</a></li>
       </ul>
    </div>
</template>
<script>
export default {
  data () {
    return {
      products: [
        { name: 'cpu', price: 25, detail: 'cpu' },
        { name: '硬盤', price: '', detail: 'ying' }
      ]
    }
  }
}
</script>
<style lang="scss">
    .product-ul{
        border: 1px solid #eee;
        width: 500px;
        li{
            display: inline-block;
            padding: 10px;
            margin-bottom: 15px;
        }
    }
</style>

四、 過濾器參數

①. 過濾器是一個函數，它會把表達式 中的值始終當作函數的第一個參數。

②. 可以給這個過濾器函數傳入額外的參數 。

以全局過濾器寫法爲例， 寫法如下：

Vue.filter('filterPrice', function (price, param) {
  return price ? (param + price) : '--'
})

在插值表達式使用該過濾器filterPrice，使用的時候，傳入參數 $ ， 達到和上面相同的效果：

 {{ price| filterPrice( '$') }}
 
 這裏 自動 將price作爲filter函數filterPrice的第一個參數，將 ' $  '作爲它的第二個參數。

③.「過濾器」可以進行串聯使用。

 {{ data | filterA | filterB }}

串聯使用時，會把第一個產生的結果，作爲參數傳遞給第二個過濾器使用，以此類推。

以全局過濾器寫法爲例， 寫法如下：

Vue.filter('filterPriceA', function (price) {
  return price || false
})

Vue.filter('filterPriceB', function (price) {
  return  price ? ( ' $ '+ price) : '--'
})
在插值表達式使用該過濾器filterPriceA和filterPriceB，達到和上面相同的效果filterPrice一樣的效果
（這個例子的串聯使用似乎並沒有什麼意義，這裏只是爲了寫示例）：

{{price | filterPriceA |  filterPriceB}}
 
 這裏 自動 將price作爲filter函數filterPriceA的參數，filterPriceA執行完成後將它的返回結果傳給了 filterPriceB 這個過濾器。並將最後結果返回給這個插值表達式。

五、filters在el-table中使用示例

注意：

1. 在需要轉換格式的地方，要用到Table的自定義列模板;
2. 在寫自定義列模板的時候，<template>中的 slot-scope="scope"必不可少，雙括號中的scope.row.createTime 表示拿到當前行的對象的createTime屬性的值。
3. dayjs 是處理時間的一款插件，項目中已通過 yarn add dayjs 安裝，關於時間插件dayjs的用法可參考博客：

<template>
    <div>

        <el-table :data="myArray" border style="width:401px;">
            <el-table-column  width="200" align="center"  prop="title" label="標題"></el-table-column>
            <el-table-column  width="200" align="center" prop="createTime" label="發表於">
                <template slot-scope="scope">
                    {{scope.row.createTime|convertDate}} 天前
                </template>
            </el-table-column>
        </el-table>
          <!--  這裏 {{createTime | convertDate }}  相當於，createTime作爲一個參數傳給了在過濾器filters中的函數convertDate ;
                el-table表格可自定義列模板， scope.row.createTime 表示拿到當前行的對象的createTime屬性的值 -->
    </div>
</template>
<script>
// dayjs是處理時間的一款插件，項目中已通過 yarn add dayjs 安裝，關於時間插件dayjs的用法可參考：https://blog.csdn.net/ddx2019/article/details/102535557
import dayjs from 'dayjs'
export default {
  data () {
    return {
      myArray: [
        {
          createTime: '2019-03-07 09:24:48',
          title: '文章-1'
        },
        {
          createTime: '2019-05-05 09:48:33',
          title: '文章-2'
        }
      ]
    }
  },
  filters: {
    convertDate (date) { // 這裏接收的date是上面傳過來的createTime,
      const curDate = dayjs(new Date()) // 當前時間轉爲dayjs的對象
      const createDate = dayjs(date) // 將createTime轉爲dayjs時間對象
      const diffDay = curDate.diff(createDate, 'day') // 時間差； dayjs的diff方法計算時間差，'day',相差的天數
      return diffDay
    }
  }
}
</script>

更多用法，參考vue官網

參考的博客鏈接：https://juejin.im/post/5c8607aee51d45425906c8a9