vue中使用过滤器this为undefined解决方案

业务场景：

全局封装了一个format的时间日期格式化方法，在当前.vue页面通过filters：{}或者Vue.filter定义过滤器，this为undefined

 

---

解决方案：

可以在methods:{ ... }中定义方法，替代filter

      <el-table-column prop="syncRowVersion" :label="l('CreationTime')">
        <template slot-scope="scope">
          <span>{{ formatDate(scope.row.syncRowVersion) }}</span>
        </template>
      </el-table-column>

    formatDate(value) {
      return this.$ux.format.dateTime(value);
    }

 

 

---

补充：

上面的 this.$ux.format.dateTime(value)，是在全局定义的foamat方法并在Vue.prototype中注入

/**
 *
 * 公用的时间日期、价格等格式化方法
 */

import format from "number-format.js";
import moment from "moment";

export default {
  priceFormat: "#,##0.00",
  amountFormat: "#,##0.00",
  moneyFormat: "#,##0",
  costFormat: "#,##0.00",
  qtyFromat: "#,##0",
  currencyFormat: "#,##0.000000",
  weightFormat: "#,##0.0",
  volumeFormat: "#,##0.0",
  dateFormat: "YYYY-MM-DD",
  dateTimeFormat: "YYYY-MM-DD HH:mm:ss",
  elementDateFormat: "yyyy-MM-dd",
  elementDateTimeFormat: "yyyy-MM-dd HH:mm:ss",

  //通用数值格式,用于非price，amount，qty等特殊地方
  numberFormat0: "#,##0",
  numberFormat2: "#,##0.00",

  dateTimebySales(dt, format = "DD/MM/YYYY HH:mm") {
    if (!dt) return "";
    return moment(dt).format(format);
  },
  date(dt, format = "YYYY/MM/DD") {
    if (!dt) return "";
    return moment(dt).format(format);
  },
  dateTime(dt, format = "YYYY/MM/DD HH:mm:ss") {
    if (!dt) return "";
    return moment(dt).format(format);
  },
  price(v) {
    return format(v, this.priceFormat);
  },
  cost(v) {
    return format(v, this.costFormat);
  },

  amount(v) {
    return format(v, this.amountFormat);
  },
  qty(v) {
    return format(v, this.qtyFromat);
  },

  columnFormatter(type) {
    let thiz = this;
    switch (type) {
      case "date":
        return function (row, column, cellValue, index) {
          return thiz.date(cellValue);
        };
      case "dateTime":
        return function (row, column, cellValue, index) {
          return thiz.dateTime(cellValue);
        };
      case "price":
        return function (row, column, cellValue, index) {
          return thiz.price(cellValue);
        };
      case "amount":
        return function (row, column, cellValue, index) {
          return thiz.amount(cellValue);
        };
      case "qty":
        return function (row, column, cellValue, index) {
          return thiz.qty(cellValue);
        };
      case "cost":
        return function (row, column, cellValue, index) {
          return thiz.cost(cellValue);
        };
    }
  },
};

 

---