Yi.Vue2.x.Vuetify/src/views/AdmRoleMenu.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
  <v-row>
    <v-col cols="12">
      <material-card color="primary" icon="mdi-account-outline">
        <template #title>
          角色菜单分配管理 —
          <small class="text-body-1"
            >你可以在这里多角色分配多菜单/选中一个可查看</small
          >
        </template>
        <v-divider></v-divider>
        <app-btn dark class="ma-4" @click="showAll"> 展开全部</app-btn>
        <app-btn class="my-4 mr-4" @click="setMenu">确定分配</app-btn>

        <app-btn class="my-4" color="secondary" @click="clear"
          >清空选择</app-btn
        ></material-card
      >
    </v-col>

    <v-col cols="12" md="4" lg="4">
      <v-card class="mx-auto" width="100%">
        <v-treeview
          selectable
          :items="RoleItems"
          v-model="selectionRole"
          return-object
          open-all
          hoverable
          item-text="roleName"
        >
        </v-treeview>
      </v-card>
    </v-col>

    <v-col cols="12" md="8" lg="8">
      <v-card class="mx-auto" width="100%">
        <v-treeview
          ref="tree"
          open-on-click
          selectable
          :items="Menuitems"
          selection-type="independent"
          v-model="selectionMenu"
          return-object
          open-all
          hoverable
          item-text="menuName"
        >
                <template v-slot:prepend="{ item }">
      <v-icon>
        {{ item.menuIcon }}
      </v-icon>
    </template>
          <template v-slot:append="{ item }">
              <app-btn v-if="item.menuType==0">路由:{{ item.router }}</app-btn>
            <app-btn v-if="item.menuType==1" color="secondary">权限:{{ item.permissionCode }}</app-btn>
          </template>
        </v-treeview>
      </v-card></v-col