vue.js-过滤器 filters使用详细示例

Posted 2020-12-03 玄机

什么也不说了，直接上干货：

   1.首先，获取后台数据到页面，并调用过滤器

在<script>中添加

onRefreshItems (currentPage, perPage) {
  if (this.dataUrl) {
    this.$http.get(this.dataUrl, {params: {page: currentPage, size: perPage}}).then(res => {
      let labels = []
      for (var i = 0; i < res.data.length; i++) {
        let item = res.data[i]
        item.status = report.formatStatus(item.status)
        labels.push(item)
      }
      this.items = labels
    })
  }
},

2.添加过滤器，在<script>中添加

filters: {
  formatStatus (status) {
    return report.formatStatus(status)
  }
}

3.编写js文件（report.js）

export default {
  formatStatus (status) {
    if (status === ‘TO_BE_PUT_INTO_STORAGE‘) {
      status = ‘未入库‘
    } else if (status === ‘PARTIAL_ARRIVAL‘) {
      status = ‘月台部分收货‘
    } else if (status === ‘WAREHOUSING_COMPLETION‘) {
      status = ‘已全部入库‘
    } else if (status === ‘‘) {
      status = ‘‘
    }
    return status
  }
}

4.引入

import report from ‘@/components/Table/report.js‘

如有错误欢迎留言指点，谢谢