vue后端实现三级菜单

Question

如何实现三级菜单啊，后端返回的数据是这样的

 <div class="userTable">
      <el-table ref="multipleTable" :height="tableHeight" :data="listData" row-key="id"
          :tree-props="{ children: 'children' }"  v-loading="listLoading" element-loading-text="loading"
        element-loading-spinner="el-icon-loading" element-loading-background="#fff" style="width: 100%" border
        class="min_table" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
        <el-table-column :label="$t('menuManage.menuName')" show-overflow-tooltip min-width="120" prop="name">
          <!-- <template slot-scope="scope">
            <pre>
            {{ scope.row }}
            </pre>
          </template> -->
        </el-table-column>
        <el-table-column prop="icon" :label="$t('menuManage.menuIcon')" min-width="120" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <i :class="['iconfont', row.icon]" style="font-size: 22px"></i>
          </template>
        </el-table-column>
</el-table>
    </div>

Answer 1

递归数据，循环遍历children