element ui中如何自定义sidebar-item

要自定义 `sidebar-item`，需要按照以下步骤进行：

1. 在 `NavMenu` 中定义 `sidebar-item` 的模板，可以使用 `template` 或 `slot`。
2. 在 `sidebar-item` 模板内部添加需要自定义的内容。
3. 使用 `item-scope` 作为 `sidebar-item` 模板的参数，可以获取到该 `sidebar-item` 的数据。
4. 使用 `$scopedSlots` 获取 `sidebar-item` 的插槽，并渲染自定义内容。

以下是自定义 `sidebar-item` 的示例代码：

<template>
  <div>
    <el-nav-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
      <template v-for="(item, index) in menuList">
        <el-submenu v-if="item.children" :index="item.path" :key="index">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </template>
          <el-menu-item v-for="(child, i) in item.children" :index="child.path" :key="i">{{ child.title }}</el-menu-item>
        </el-submenu>
        <el-menu-item v-else :index="item.path" :key="index">
          <!-- 定义 sidebar-item 的模板 -->
          <template v-slot:default="itemScope">
            <div class="sidebar-item">
              <i :class="itemScope.item.icon"></i>
              <!-- 添加自定义内容 -->
              <span>{{ itemScope.item.title }}</span>
              <span class="count">{{ itemScope.item.count }}</span>
            </div>
          </template>
        </el-menu-item>
      </template>
    </el-nav-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'SidebarMenu',
  data() {
    return {
      activeIndex: '',
      menuList: [
        {
          title: '首页',
          path: '/',
          icon: 'iconfont icon-home',
        },
        {
          title: '文章',
          path: '/article',
          icon: 'iconfont icon-article',
          count: 10,
          children: [
            {
              title: '技术',
              path: '/article/tech',
            },
            {
              title: '生活',
              path: '/article/life',
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.activeIndex = this.$route.path;
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      this.$router.push(index);
    },
  },
  computed: {
    ...mapState(['menu']),
  },
};
</script>

<style>
.sidebar-item {
  display: flex;
  align-items: center;
}
.sidebar-item i {
  font-size: 14px;
  margin-right: 10px;
}
.sidebar-item span {
  font-size: 14px;
  margin-right: 10px;
}
.sidebar-item .count {
  background-color: #f56c6c;
  color: #fff;
  font-size: 12px;
  padding: 0 4px;
  border-radius: 8px;
}
</style>

在上面的示例中，我们在 `sidebar-item` 模板中添加了一个计数器，用于显示文章数量。可以看到，我们使用 `itemScope` 获取到了当前 `sidebar-item` 的数据，并使用 `$scopedSlots` 渲染了自定义内容。同时，我们还定义了一些样式，使得自定义内容更加美观。