vue+element ui 實現菜單無限極菜單

了解遞歸組件

組件是可以在它們自己的模板中調用自身的。不過它們只能通過 name 選項來做這件事。

把下面的數據遞歸循環

簡單的遞歸組件

復雜一些的數據

無限極菜單遞歸組件的封裝

代碼

<template>
  <div>
      <div v-for="(value,index) in menuData" :key="index">
        <el-submenu index="value.id" v-if="value.node">
          <template slot="title">
            <i class="el-icon-message"></i>
            <span slot="title">{{ value.menu_name }}</span>
          </template>
          <MenuTree :menuData="value.node"></MenuTree>
        </el-submenu>
        <el-menu-item index="value.id" v-else>
          <i class="el-icon-message"></i>
          <span slot="title">{{ value.menu_name }}</span>
        </el-menu-item>
      </div>
  </div>
</template>

<script>
export default {
  props: ["menuData"],
  name: "MenuTree",
  data() {
    return {
      menuData: [
        {
          id: 1,
          parent_id: 0,
          menu_name: "第一級菜單 1",
          sorting: 0,
          node: [
            {
              id: 2,
              parent_id: 1,
              menu_name: "第二級菜單 1-1",
              sorting: 0,
              node: [
                {
                  id: 3,
                  parent_id: 2,
                  menu_name: "第三級菜單 1-1-1",
                  sorting: 1,
                },
              ],
            },
          ],
        },
        {
          id: 4,
          parent_id: 0,
          menu_name: "第一級菜單 2",
          sorting: 0,
          node: [
            {
              id: 5,
              parent_id: 4,
              menu_name: "第二級菜單 2-1",
              sorting: 0,
            },
          ],
        },
      ],
    };
  },
};
</script>