因为vue3.0不再支持局部过滤器属性,笔者参考这篇文章总结出下面的用法

vue3.0中为啥要删除过滤器功能,因为功能重复吧? - 知乎

1、首先定义一个filter.ts文件

import { computed } from 'vue'

export default function () {
  const getSystemUserStatus = computed(() => {
    // 这里需要用一个函数来返回,好像是用到了闭包的概念,这里我不太理解这种写法
    return function(status: number) {
      console.log(status, '123')
      switch(status) {
        case 100:
          return '使用中';
        case 200:
          return '禁用中';
        case 201:
          return '冻结中';
      }
    }
  })
  return {
    getSystemUserStatus
  }
}

2、在对应的vue文件中进行引入。

<template>
  <div class="rolesManagement">
    {{ getSystemUserStatus(100) }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import AccountManagementFilter from '@/filter/account-management-filter'

export default defineComponent({
  name: 'AAA',
  setup() {
    const { getSystemUserStatus } = AccountManagementFilter()
    return {
      getSystemUserStatus
    }
  },
})
</script>

 

Logo

前往低代码交流专区

更多推荐