Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

用户管理路由设置

在 router.js 中设置用户管理界面的路由，代码如下：

// 需要权限判断展示的路由
export const permissionRouter = [{
	path: "/system",
	component: Layout,
	name: "System",
	meta: {
		title: "系统管理",
		icon: "el-icon-success",
		roles: ['admin', 'user']//菜单权限设置
	},
	children: [
		{
			path: "user",
			name: "User",
			component: User,
			meta: {
				title: "用户管理",
				icon: "el-icon-goods",
				roles: ['admin', 'user']//菜单权限设置
			},
		},
	]
}]

界面实现

在 src/views 目录下新建 system 文件夹，在 system 下新建 user 文件夹，再在 user 下新建 index.vue 文件（文件的目录要与路由中的配置保持一致，否则会找不到文件）。

<template>
  <div class="user-container">
    <!-- 操作 -->
    <el-row :gutter="20">
      <el-col :span="5">
        <el-button type="danger" icon="el-icon-delete" @click="batchdel()"
          >批量删除</el-button
        >
      </el-col>
      <el-col :span="9">
        <el-input v-model="search.name" placeholder="请输入账号查找"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="searchData()">查询</el-button>
        <el-tooltip
          class="item"
          effect="dark"
          content="添加数据"
          placement="top-start"
        >
          <el-button type="primary" @click="showDialog = true">添加</el-button>
        </el-tooltip>
      </el-col>
    </el-row>

    <!-- 表格数据 -->
    <el-table
      :data="tableData"
      style="width: 100%;margin: 20px;"
      stripe
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column align="center" label="序号" width="60">
        <template slot-scope="scope">
          {{ scope.$index + addIndex }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="ID" prop="id">
      </el-table-column>
      <el-table-column align="center" label="账号" prop="username">
      </el-table-column>
      <el-table-column align="center" label="密码" prop="password">
      </el-table-column>
      <el-table-column
        align="center"
        label="状态"
        prop="deleted"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.deleted == 0">正常</el-tag>
          <el-tag type="danger" v-else-if="scope.row.deleted == 1">禁用中</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.row.id)">编辑</el-button>
          <el-button v-if="scope.row.deleted==='0'" size="mini" type="danger" @click="handleDisable(scope.row.id)">禁用</el-button>
          <el-button v-if="scope.row.deleted==='1'" size="mini" type="success" @click="handleEnable(scope.row.id)">启用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <el-pagination
      @current-change="currentChange"
      :current-page.sync="query.current"
      :page-size="query.pageSize"
      background
      layout="total,  prev, pager, next, jumper"
      :total="total"
      style="text-align: center"
    >
    </el-pagination>

    <!-- 弹框 -->
    <el-dialog 
      :title="getTitle" 
      :visible.sync="showDialog"
      :close-on-click-modal="false"
    >
      <el-form
        ref="userForm"
        :model="userForm"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="状态" prop="deleted">
          <el-select
            v-model="userForm.deleted"
            placeholder="请选择状态"
            style="width:100%"
          >
            <el-option label="启用" :value="0" />
            <el-option label="禁用" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="closeDialog()">取消</el-button>
        <el-button v-if="getUserId" type="primary" @click="update('userForm')">更新</el-button>
        <el-button v-else type="primary" @click="save('userForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "User",
  data() {
    return {
      //查询项
      search: {
        name: "",
      },

      // 表格
      tableData: [], // 数据
      addIndex: 1, // 序号
      selectedrow: [], //全选

      //页码
      query: {
        pageSize: 3,
        current: 1,
        username: "",
      },
      total: 0,

      // 新增/编辑弹框
      showDialog: false,
      userForm:{
        id:'',
        username:'',
        password:'',
        deleted: 0
      },
      // 表单验证
      rules:{
        username: [
          { required: true, message: '账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        deleted:[
          { required: true, message: '状态不能为空', trigger: 'change' }
        ],
      }
    };
  },
  computed: {
    // 弹框标题
    getTitle: function() {
      if (this.userForm.id !== '') {
        return '修改用户信息'
      } else {
        return '添加用户信息'
      }
    },
    // 展示的按钮
    getUserId: function() {
      if (this.userForm.id !== '') {
        return true
      } else {
        return false
      }
    }
  },
  created() {
    this.list();
  },
  methods:{
  	// 页码跳转
    currentChange() {
      this.list();
    },
  },
  };
</script>