VUE使用filters过滤数据/格式化数据

过滤表格数据

使用自己写的过滤函数

• table中
  :data="filterData(tableData,search)"
  在forEach 里面 return 不会终止循环，在some 里面 遇到 return true 就是终止遍历 效率更高
• methods:

    filterData(data,search) {
      var input = searchContent.toLowerCase()
      var items = data;
      var itemsNew;
      if (input) {
        itemsNew = items.filter(function(item) {
          return Object.keys(item).some(function(key1) {
            return String(item[key1])
              .toLowerCase()
              .match(input);
          });
        });
      } else {
        itemsNew = items;
      }
      return itemsNew;
    },

使用VUE的filters

• table中
  :data="tableData|filterData"
  或
  :data="tableData|filterData(search)"
• 申明全局变量that，为了能拿到this.search，在beforeCreate中改变 that = this

import {
  overlayByStation,
  updateOverlayStatus
} from "../../api/api";
let that;
export default {
  name: 'overlayDetails',
  data () {

},
...
  beforeCreate(){
    that = this
  },
  created () {
  ...
  }
...

• 编写过滤函数

  },
  filters:{
  //若直接传递参数应使用filterData(data,search)
    filterData(data) {
    	//若直接传递参数应使用var input = search
	     var input = that.searchContent
	     if(input){
	     	input = input.toLowerCase()
	     }
	     var items = data;
	     var itemsNew;
	     if (input) {
	       itemsNew = items.filter(function(item) {
	         return Object.keys(item).some(function(key1) {
	           return String(item[key1])
	             .toLowerCase()
	             .match(input);
	         });
	       });
	     } else {
	       itemsNew = items;
	     }
	     return itemsNew;
	   }
  },
  methods: {
  ···
  }

使用filters格式化数据

• 安装moment：
  npm install moment
• import
  import Moment from 'moment'

格式化之前
Wed Dec 01 2021 13:53:44 GMT+0800 (中国标准时间)

• 格式化

<span> {{mytime|format}} </span>

2021-12-01 13:53:44

• fliters:

  filters:{
    format(data){
      return Moment(data).format('YYYY-MM-DD HH:mm:ss')
    },
    ···
  }