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: "编辑用户" },
      },
    ],
  },
];

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

export default router;

新建 src/views/users/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 slot-scope="scope">
        <span>{
  { scope.row.title }}</span>
      </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="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
     
  data() {
     
    return {
     
      tableData: [
        {
     
          id:</