Vue3 ElementPlus 的 table 中使用过滤器

先附上官网 过滤器 | Vue.js (vuejs.org)

参考javascript - How to filter items in Vue 3？ - Stack Overflow

情景：根据不同数字去渲染出不同的描述性文字；而不是只显示让用户无法理解的数字。

以下代码后端bookType属性返回数字1、2、3、4，效果如图

    <el-table-column prop="bookType" label="图书类型" width="100">
    </el-table-column>

此时，我们需要根据这些数字去重新渲染出描述性文字；

我们就需要用到 ElementPlus的作用域插槽 和 Vue3中的过滤器；

注意！Vue3中过滤使用 方法 或者 计算属性 ！

template代码如下：

    <el-table-column prop="bookType" label="图书类型" width="100">
      <template #default="scope">
        <span>{{ booktypefilter(scope.row.bookType) }}</span>
      </template>
    </el-table-column>

解释： 

 1.添加作用域插槽 <template #default="scope"></template>

 2.使用 booktypefilter(scope.row.bookType)方法 ；scope.row.bookType是原始数据，bookType就是el-table-column的prop属性获取到的数据。

script代码如下：（使用的是script setup）

<script setup>
import { ref } from 'vue'

const bookTypeOptions = ref([
  { type: '1', info: '编程类' },
  { type: '2', info: '前端类' },
  { type: '3', info: '设计类' },
  { type: '4', info: '移动开发类' }
])

const booktypefilter = (type) => {
  const obj = bookTypeOptions.value.find((o) => o.type === type)
  return obj ? obj.info : null
}
</script>

解释：

1.自己定义数字分别对应的描述性文字。

2.使用booktypefilter方法过滤；

   booktypefilter方法内使用数组的find方法；

   首先根据传入的数字找到要查找的对象obj，如果obj对象存在就返回它的info值，也就是对应的描述性文字。

效果如图：