封装el-submenu及在vue中如何使用

最新推荐文章于 2023-10-09 21:29:56 发布

知否灬知否

最新推荐文章于 2023-10-09 21:29:56 发布

阅读量464

点赞数 1

分类专栏：组件库文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51958206/article/details/127052499

版权

组件库专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSDN话题挑战赛第2期
参赛话题：前端技术分享

封装组件

<template>
  <div>
    <template v-for="(value, index) in menuData">
      <el-submenu
        v-if="value.childList.length > '0'"
        :index="value.menu.name"
        :key="index"
      >
        <template slot="title">
          <i class="el-icon-s-tools" />
          <span slot="title">{{ value.menu.name }}</span>
        </template>
        <MenuTree :menu-data="value.childList" />
      </el-submenu>
      <el-menu-item v-else :index="value.menu.path" :key="index">
        <span slot="title">{{ value.menu.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  name: "MenuTree",
  props: ["menuData"],
};
</script>
<style  >
</style>

在页面调用

<template>
  <div>
    <div class="aaa">
      <el-menu
        class="el-menu-vertical-demo"
        background-color="#4A5A74"
        active-text-color="#ffd04b"
        text-color="#fff"
        @select="handleSelect"
        router
      >
        <menuTree :menu-data="list" />
      </el-menu>
    </div>
  </div>
</template>

<script>
import menuTree from "../utils/menu.vue";
export default {
  props: {},
  components: {
    menuTree,
  },
  data() {
    return {
      list: [
        {
          childList: [
            {
              childList: [],
              menu: {
                name: "页面一",
                path: "/nabar/one",
              },
            },
            {
              childList: [],
              menu: {
                name: "页面二",
                path: "/nabar/two",
              },
            },
            {
              childList: [
              {
              childList: [],
              menu: {
                name: "页面3.1",
                path: "/nabar/two",
              },
            },
              ],
              menu: {
                name: "页面三",
                 path: "/nabar/three",
              },
            },
          ],
          menu: {
            createBy: "0-1",
            createTime: 1587605025,
            id: "6d68079a16b94292990f612237bd048e",
            name: "用户管理",
            parentId: "",
            path: "/#",
            updateBy: "0-1",
            updateTime: 1587610117,
          },
        },
      ],
      res: {
        data: {},
      },
    };
  },

  created() {
    // this.list = this.res.data.menuVoList;
  },

  methods: { handleSelect() {} },
};
</script>
<style  scoped>
.aaa {
  width: 400px;
}
</style>