Quasar/Vue全局过滤器如何在q-table的setup脚本和模板中调用

报错原因 #

Vue3 的 setup() 执行阶段没有组件实例上下文，你挂载在 app.config.globalProperties 上的 $filters 仅支持在模板中直接调用，或选项式API中通过 this.$filters 调用，无法在setup中直接获取。

方案1：抽离公共工具函数（最推荐） #

将过滤器逻辑单独抽离为独立工具文件，同时适配全局挂载和setup内调用两种场景：

1. 新建过滤器工具文件 src/utils/filters.js

export const in_k = function (value, avoidSign, decimals=1) {
  value = Math.round(value / 1000 * Math.pow(10, decimals)) / Math.pow(10, decimals);
  return new Intl.NumberFormat("sv-SE", {
      style: "decimal",
      useGrouping: false,
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals,
      signDisplay: value !== 0 && !avoidSign ? "always" : "never",
    }).format(value) + "K";
}

// 统一导出所有过滤器
export default {
  in_k
}

2. 修改原有boot文件，保持全局挂载供模板调用

// src/boot/filters.js
import filters from 'src/utils/filters'

export default ({ app }) => {
  app.config.globalProperties.$filters = filters
}

3. 在页面setup中直接导入需要的过滤器使用即可

import { useStore } from 'vuex'
import { in_k } from 'src/utils/filters'

export default ({
  name: 'PageIndex',
  setup() {
    const $store = useStore();

    let columns = [
      {
        name: 'name',
        required: true,
        label: 'Title',
        align: 'left',
        field: row => row.title,
        format: val => `${val}`,
        sortable: true
      },
      {
        name: 'invested', align: 'right',
        label: 'Invested',
        field: row => (row.invested),
        format: val => `${in_k(val, true)}`,
        sortable: true
      },
    ];

    return {
      columns,
      rows: $store.state.generic_store.data
    }
  }
})

可选优化：如果不想每次使用都手动导入，可以配置unplugin-auto-import插件，将所有过滤器自动注入到所有组件的setup作用域，无需显式import即可调用。

方案2：setup内获取组件实例（不推荐） #

如果不想抽离代码，可通过getCurrentInstance获取组件代理对象，再拿到全局挂载的过滤器：

import { useStore } from 'vuex'
import { getCurrentInstance } from 'vue'

export default ({
  name: 'PageIndex',
  setup() {
    const $store = useStore();
    const { proxy } = getCurrentInstance()
    const $filters = proxy.$filters

    let columns = [
      // 其他列配置不变
      {
        name: 'invested', align: 'right',
        label: 'Invested',
        field: row => (row.invested),
        format: val => `${$filters.in_k(val, true)}`,
        sortable: true
      },
    ];

    return {
      columns,
      rows: $store.state.generic_store.data
    }
  }
})

注意该方法在SSR环境、组件未挂载阶段可能会获取实例失败，不建议作为常规方案使用。

关于管道符|过滤器语法 #

Vue3官方已经移除了模板的管道符过滤器语法，如果你一定要使用该写法，需要引入第三方适配插件或自定义模板编译扩展实现。更建议使用官方推荐的方法调用，避免后续版本兼容性问题。

内容的提问来源于stack exchange，提问作者chrney