瞭解遞迴元件

元件是可以在它們自己的模板中呼叫自身的。不過它們只能通過 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>