vue3 element-plus 菜单增加待审批数量

在 Vue3 中使用 Element Plus 的菜单组件，如果你想要增加每个菜单项的待审批数量信息，你可以这样做：

1. 首先，在你的 `menu-item` 组件内部添加一个计算属性（computed property），用于计算当前菜单项的待审批数量。假设你有一个数据字段 `permissions` 存储每个菜单项的权限状态，其中包含一个 `pendingCount` 字段表示待审批的数量。

<template>
  <el-menu-item :key="permission.id">
    <!-- 菜单项其他内容 -->
    <span>【{{ permission.name }}】 待审批数量: {{ pendingCount }}</span>
  </el-menu-item>
</template>

<script setup>
import { ref } from 'vue';
const permissions = ref([{ id: 1, name: '菜单1', pendingCount: 5 }]);
const itemPermission = permissions.value.find((p) => p.id === this.$route.meta.permId); // 假设meta里有对应id的待审批数量

// 计算待审批数量
const getPendingCount = () => {
  return itemPermission?.pendingCount || 0;
};

const pendingCount = computed(() => getPendingCount());
</script>

2. 如果你有多个菜单，需要动态获取每个菜单项的待审批数量，可以在 `Menu` 或者更高层的组件上遍历 `permissions` 数组，并传递给子组件。

<template>
  <el-menu default-active="$route.path" router>
    <template v-for="(permission, index) in permissions">
      <menu-item :permission="permission" :key="index"></menu-item>
    </template>
  </el-menu>
</template>

<script>
export default {
  props: ['permissions'],
  components: {
    MenuItem: ({ permission }) => ({
      // 使用上面提到的模板
    })
  }
};
</script>