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

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

业务场景:

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

20210527153548522.png

20210527153548522.png

解决方案:

可以在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);
        };
    }
  },
};

20210527153548522.png

相关文章
|
27天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
80 7
|
1月前
|
JavaScript
Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题
Vue启动时报错的解决方案,以及解决相同路径跳转报错的问题
224 0
|
3月前
|
JavaScript
Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)
这篇文章介绍了Vue中过滤器(filters)的概念、使用方式和代码实现,通过实例演示了如何对显示数据进行格式化处理。
|
3月前
|
JavaScript
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
VUE——filemanager-webpack-plugin报错TypeError: Cannot read property 'isFile' of undefined
70 0
|
3月前
|
前端开发 JavaScript
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
VUE——Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
55 0
|
4月前
|
Web App开发 JavaScript
vue报错【解决方案】 [Violation] Added non-passive event listener to a scroll-blocking <some> event.
vue报错【解决方案】 [Violation] Added non-passive event listener to a scroll-blocking <some> event.
442 0
|
4月前
|
JavaScript
【vue】过滤器 KB,MB单位转换(Vue)
【vue】过滤器 KB,MB单位转换(Vue)
42 0
|
4月前
|
JavaScript
vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动
vue【解决方案】页面/路由跳转后,滚动条消失,页面无法滚动
185 0
|
4月前
|
JavaScript
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
【奇葩问题】vue 多个el-drawer 嵌套遮罩混乱问题解决方案,vue在<el-drawer>中嵌套<el-drawer>时遮罩bug 为了解决问题自己封装了一个简易的抽屉组件
299 0
|
4月前
|
JavaScript 定位技术
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
vue 百度地图开发【教程】1. 绘制百度地图(不使用 vue-baidu-map,解决 BMap is undefined)
406 0