CLWY权限管理（三）--- 用户组模块

准备用户组模块

在 src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "@/views/layout/IndexView";

Vue.use(VueRouter);

const routes = [
  {
   
    path: "/",
    component: Layout,
    children: [
      {
   
        path: "",
        component: () => import("@/views/HomeView"),
        meta: {
    title: "首页" },
      },
      {
   
        path: "/users",
        component: () => import("@/views/users/ListView"),
        meta: {
    title: "用户列表" },
      },
      {
   
        path: "/users/create",
        component: () => import("@/views/users/CreateView"),
        meta: {
    title: "新增用户" },
      },
      {
   
        path: "/users/edit/:id",
        component: () => import("@/views/users/EditView"),
        meta: {
    title: "编辑用户" },
      },
      // 用户组
      {
   
        path: "/roles",
        component: () => import("@/views/roles/ListView"),
        meta: {
    title: "用户组列表" },
      },
      {
   
        path: "/roles/create",
        component: () => import("@/views/roles/CreateView"),
        meta: {
    title: "新增用户组" },
      },
      {
   
        path: "/roles/edit/:id",
        component: () => import("@/views/roles/EditView"),
        meta: {
    title: "编辑用户组" },
      },
    ],
  },
];

const router = new VueRouter({
   
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

新建 src/views/roles/ListView.vue

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      label="编号"
      width="80"
      prop="id"
      align="center"
    ></el-table-column>
    <el-table-column
      label="名称"
      width="180"
      prop="name"
      align="center"
    ></el-table-column>
    <el-table-column label="排序" width="120" align="center">
      <template>
        <el-input placeholder="请输入排序" class="sort-input"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="创建日期" width="120" align="center">
      <template slot-scope="scope">
        <span>{
  { scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180" align="center">
      <template slot-scope="scope">
        <el-button size<