功能15：用户管理
功能14：使用本地SVG图标库
功能13：侧边栏加入Logo
功能12：折叠/展开侧边栏
功能11：实现面包屑功能
功能10：添加首页菜单项
功能9：退出登录功能
功能8：页面权限控制
功能7：路由全局前置守卫
功能6：动态添加路由记录
功能5：侧边栏菜单动态显示
功能4：首页使用Layout布局
功能3：点击登录按钮实现页面跳转
功能2：静态登录界面
功能1：创建前端项目
前言
只完成页面的静态展示。按钮的功能大多数都涉及和后端交互，待后续接入后端再实现。
一.操作步骤
1.用户管理页面
新建文件src\views\system\user\index.vue
<template><div class="app-container"><el-row :gutter="20"><splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme"><!--部门数据--><pane size="16"><el-col><div class="head-container"><el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search"style="margin-bottom: 20px" /></div><div class="head-container"><el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }":expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id"highlight-current default-expand-all @node-click="handleNodeClick" /></div></el-col></pane><!--用户数据--><pane size="84"><el-col><el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="用户名称" prop="userName"><el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"@keyup.enter="handleQuery" /></el-form-item><el-form-item label="手机号码" prop="phonenumber"><el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px"@keyup.enter="handleQuery" /></el-form-item><el-form-item label="状态" prop="status"><el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px"><el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label":value="dict.value" /></el-select></el-form-item><el-form-item label="创建时间" style="width: 308px"><el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button><el-button icon="Refresh" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="primary" plain icon="Plus" @click="handleAdd"v-hasPermi="['system:user:add']">新增</el-button></el-col><el-col :span="1.5"><el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"v-hasPermi="['system:user:edit']">修改</el-button></el-col><el-col :span="1.5"><el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"v-hasPermi="['system:user:remove']">删除</el-button></el-col><el-col :span="1.5"><el-button type="info" plain icon="Upload" @click="handleImport"v-hasPermi="['system:user:import']">导入</el-button></el-col><el-col :span="1.5"><el-button type="warning" plain icon="Download" @click="handleExport"v-hasPermi="['system:user:export']">导出</el-button></el-col><right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar></el-row><el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="50" align="center" /><el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" /><el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible":show-overflow-tooltip="true" /><el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible":show-overflow-tooltip="true" /><el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible":show-overflow-tooltip="true" /><el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber"v-if="columns[4].visible" width="120" /><el-table-column label="状态" align="center" key="status" v-if="columns[5].visible"><template #default="scope"><el-switch v-model="scope.row.status" active-value="0" inactive-value="1"@change="handleStatusChange(scope.row)"></el-switch></template></el-table-column><el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160"><template #default="scope"><span>{{ parseTime(scope.row.createTime) }}</span></template></el-table-column><el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width"><template #default="scope"><el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1"><el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"v-hasPermi="['system:user:edit']"></el-button></el-tooltip><el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1"><el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"v-hasPermi="['system:user:remove']"></el-button></el-tooltip><el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1"><el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)"v-hasPermi="['system:user:resetPwd']"></el-button></el-tooltip><el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1"><el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)"v-hasPermi="['system:user:edit']"></el-button></el-tooltip></template></el-table-column></el-table><pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"v-model:limit="queryParams.pageSize" @pagination="getList" /></el-col></pane></splitpanes></el-row><!-- 添加或修改用户配置对话框 --><el-dialog :title="title" v-model="open" width="600px" append-to-body><el-form :model="form" :rules="rules" ref="userRef" label-width="80px"><el-row><el-col :span="12"><el-form-item label="用户昵称" prop="nickName"><el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" /></el-form-item></el-col><el-col :span="12"><el-form-item label="归属部门" prop="deptId"><el-tree-select v-model="form.deptId" :data="enabledDeptOptions":props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门"check-strictly /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="手机号码" prop="phonenumber"><el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" /></el-form-item></el-col><el-col :span="12"><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName"><el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" /></el-form-item></el-col><el-col :span="12"><el-form-item v-if="form.userId == undefined" label="用户密码" prop="password"><el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password /></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="用户性别"><el-select v-model="form.sex" placeholder="请选择"><el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label":value="dict.value"></el-option></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="状态"><el-radio-group v-model="form.status"><el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label}}</el-radio></el-radio-group></el-form-item></el-col></el-row><el-row><el-col :span="12"><el-form-item label="岗位"><el-select v-model="form.postIds" multiple placeholder="请选择"><el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId":disabled="item.status == 1"></el-option></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="角色"><el-select v-model="form.roleIds" multiple placeholder="请选择"><el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId":disabled="item.status == 1"></el-option></el-select></el-form-item></el-col></el-row><el-row><el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input></el-form-item></el-col></el-row></el-form><template #footer><div class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></template></el-dialog><!-- 用户导入对话框 --><el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body><el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers":action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading":on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><template #tip><div class="el-upload__tip text-center"><div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据</div><span>仅允许导入xls、xlsx格式文件。</span><el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"@click="importTemplate">下载模板</el-link></div></template></el-upload><template #footer><div class="dialog-footer"><el-button type="primary" @click="submitFileForm">确 定</el-button><el-button @click="upload.open = false">取 消</el-button></div></template></el-dialog></div>
</template><script setup name="User">
import { getToken } from "@/utils/auth";
import useAppStore from '@/stores/app'
import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user";
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import { ref, getCurrentInstance, reactive, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import { parseTime } from '@/utils/ruoyi'const router = useRouter();
const appStore = useAppStore()
const { proxy } = getCurrentInstance();
// const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");
const sys_normal_disable = [{ "value": "1", "label": "正常" }, { "value": "2", "label": "注销" }]
const sys_user_sex = [{ "value": "1", "label": "男" }, { "value": "2", "label": "女" }]
const userList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const deptName = ref("");
const deptOptions = ref(undefined);
const enabledDeptOptions = ref(undefined);
const initPassword = ref(undefined);
const postOptions = ref([]);
const roleOptions = ref([]);
/*** 用户导入参数 */
const upload = reactive({// 是否显示弹出层（用户导入）open: false,// 弹出层标题（用户导入）title: "",// 是否禁用上传isUploading: false,// 是否更新已经存在的用户数据updateSupport: 0,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
});
// 列显隐信息
const columns = ref([{ key: 0, label: `用户编号`, visible: true },{ key: 1, label: `用户名称`, visible: true },{ key: 2, label: `用户昵称`, visible: true },{ key: 3, label: `部门`, visible: true },{ key: 4, label: `手机号码`, visible: true },{ key: 5, label: `状态`, visible: true },{ key: 6, label: `创建时间`, visible: true }
]);const data = reactive({form: {},queryParams: {pageNum: 1,pageSize: 10,userName: undefined,phonenumber: undefined,status: undefined,deptId: undefined},rules: {userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]}
});const { queryParams, form, rules } = toRefs(data);/** 通过条件过滤节点 */
const filterNode = (value, data) => {if (!value) return true;return data.label.indexOf(value) !== -1;
};/** 根据名称筛选部门树 */
watch(deptName, val => {proxy.$refs["deptTreeRef"].filter(val);
});/** 查询用户列表 */
function getList() {loading.value = true;listUser().then(res => {loading.value = false;userList.value = res.rows;total.value = res.total;});
};/** 查询部门下拉树结构 */
function getDeptTree() {deptTreeSelect().then(response => {deptOptions.value = response.data;enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)));});
};/** 过滤禁用的部门 */
function filterDisabledDept(deptList) {return deptList.filter(dept => {if (dept.disabled) {return false;}if (dept.children && dept.children.length) {dept.children = filterDisabledDept(dept.children);}return true;});
};/** 节点单击事件 */
function handleNodeClick(data) {queryParams.value.deptId = data.id;handleQuery();
};/** 搜索按钮操作 */
function handleQuery() {queryParams.value.pageNum = 1;getList();
};/** 重置按钮操作 */
function resetQuery() {dateRange.value = [];// proxy.resetForm("queryRef");proxy.$refs.queryRef.resetFields();queryParams.value.deptId = undefined;proxy.$refs.deptTreeRef.setCurrentKey(null);handleQuery();
};/** 删除按钮操作 */
function handleDelete(row) {const userIds = row.userId || ids.value;proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {return delUser(userIds);}).then(() => {getList();proxy.$modal.msgSuccess("删除成功");}).catch(() => { });
};/** 导出按钮操作 */
function handleExport() {proxy.download("system/user/export", {...queryParams.value,}, `user_${new Date().getTime()}.xlsx`);
};/** 用户状态修改 */
function handleStatusChange(row) {let text = row.status === "0" ? "启用" : "停用";proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {return changeUserStatus(row.userId, row.status);}).then(() => {proxy.$modal.msgSuccess(text + "成功");}).catch(function () {row.status = row.status === "0" ? "1" : "0";});
};/** 更多操作 */
function handleCommand(command, row) {switch (command) {case "handleResetPwd":handleResetPwd(row);break;case "handleAuthRole":handleAuthRole(row);break;default:break;}
};/** 跳转角色分配 */
function handleAuthRole(row) {const userId = row.userId;router.push("/system/user-auth/role/" + userId);
};/** 重置密码按钮操作 */
function handleResetPwd(row) {proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {confirmButtonText: "确定",cancelButtonText: "取消",closeOnClickModal: false,inputPattern: /^.{5,20}$/,inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",inputValidator: (value) => {if (/<|>|"|'|\||\\/.test(value)) {return "不能包含非法字符：< > \" ' \\\ |"}},}).then(({ value }) => {resetUserPwd(row.userId, value).then(response => {proxy.$modal.msgSuccess("修改成功，新密码是：" + value);});}).catch(() => { });
};/** 选择条数 */
function handleSelectionChange(selection) {ids.value = selection.map(item => item.userId);single.value = selection.length != 1;multiple.value = !selection.length;
};/** 导入按钮操作 */
function handleImport() {upload.title = "用户导入";upload.open = true;
};/** 下载模板操作 */
function importTemplate() {proxy.download("system/user/importTemplate", {}, `user_template_${new Date().getTime()}.xlsx`);
};/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {upload.isUploading = true;
};/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {upload.open = false;upload.isUploading = false;proxy.$refs["uploadRef"].handleRemove(file);proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });getList();
};/** 提交上传文件 */
function submitFileForm() {proxy.$refs["uploadRef"].submit();
};/** 重置操作表单 */
function reset() {form.value = {userId: undefined,deptId: undefined,userName: undefined,nickName: undefined,password: undefined,phonenumber: undefined,email: undefined,sex: undefined,status: "0",remark: undefined,postIds: [],roleIds: []};// proxy.resetForm("userRef");proxy.$refs.userRef.resetFields();
};/** 取消按钮 */
function cancel() {open.value = false;reset();
};/** 新增按钮操作 */
function handleAdd() {reset();getUser().then(response => {postOptions.value = response.posts;roleOptions.value = response.roles;open.value = true;title.value = "添加用户";form.value.password = initPassword.value;});
};/** 修改按钮操作 */
function handleUpdate(row) {reset();const userId = row.userId || ids.value;getUser(userId).then(response => {form.value = response.data;postOptions.value = response.posts;roleOptions.value = response.roles;form.value.postIds = response.postIds;form.value.roleIds = response.roleIds;open.value = true;title.value = "修改用户";form.password = "";});
};/** 提交按钮 */
function submitForm() {proxy.$refs["userRef"].validate(valid => {if (valid) {if (form.value.userId != undefined) {updateUser(form.value).then(response => {proxy.$modal.msgSuccess("修改成功");open.value = false;getList();});} else {addUser(form.value).then(response => {proxy.$modal.msgSuccess("新增成功");open.value = false;getList();});}}});
};getDeptTree();
getList();
</script>
2.请求接口
新建文件src\api\system\user.js，封装所有该页面使用到的网络请求接口。暂时模拟一些静态数据。
// 查询用户列表
export function listUser(query) {return new Promise((resolve, reject) => {const resp = {"total": 2,"rows": [{"createBy": "admin","createTime": "2024-11-18 16:45:39","updateBy": null,"updateTime": null,"remark": "管理员","userId": 1,"deptId": 103,"userName": "admin","nickName": "若依","email": "ry@163.com","phonenumber": "15888888888","sex": "1","avatar": "","password": null,"status": "0","delFlag": "0","loginIp": "127.0.0.1","loginDate": "2025-03-18T14:08:24.000+08:00","dept": {"createBy": null,"createTime": null,"updateBy": null,"updateTime": null,"remark": null,"deptId": 103,"parentId": null,"ancestors": null,"deptName": "研发部门","orderNum": null,"leader": "若依","phone": null,"email": null,"status": null,"delFlag": null,"parentName": null,"children": []},"roles": [],"roleIds": null,"postIds": null,"roleId": null,"admin": true},{"createBy": "admin","createTime": "2024-11-18 16:45:39","updateBy": null,"updateTime": null,"remark": "测试员","userId": 2,"deptId": 105,"userName": "ry","nickName": "若依","email": "ry@qq.com","phonenumber": "15666666666","sex": "1","avatar": "","password": null,"status": "0","delFlag": "0","loginIp": "127.0.0.1","loginDate": "2024-11-18T16:45:39.000+08:00","dept": {"createBy": null,"createTime": null,"updateBy": null,"updateTime": null,"remark": null,"deptId": 105,"parentId": null,"ancestors": null,"deptName": "测试部门","orderNum": null,"leader": "若依","phone": null,"email": null,"status": null,"delFlag": null,"parentName": null,"children": []},"roles": [],"roleIds": null,"postIds": null,"roleId": null,"admin": false}],"code": 200,"msg": "查询成功"}resolve(resp); // 状态变为 fulfilled})
}// 查询用户详细
export function getUser(userId) {}// 新增用户
export function addUser(data) {}// 修改用户
export function updateUser(data) {}// 删除用户
export function delUser(userId) {}// 用户密码重置
export function resetUserPwd(userId, password) {const data = {userId,password}}// 用户状态修改
export function changeUserStatus(userId, status) {const data = {userId,status}}// 查询用户个人信息
export function getUserProfile() {}// 修改用户个人信息
export function updateUserProfile(data) {}// 用户密码重置
export function updateUserPwd(oldPassword, newPassword) {const data = {oldPassword,newPassword}}// 用户头像上传
export function uploadAvatar(data) {}// 查询授权角色
export function getAuthRole(userId) {}// 保存授权角色
export function updateAuthRole(data) {}// 查询部门下拉树结构
export function deptTreeSelect() {return new Promise((resolve, reject) => {const resp = {"msg": "操作成功","code": 200,"data": [{"id": 100,"label": "若依科技","disabled": false,"children": [{"id": 101,"label": "深圳总公司","disabled": false,"children": [{"id": 103,"label": "研发部门","disabled": false},{"id": 104,"label": "市场部门","disabled": false},{"id": 105,"label": "测试部门","disabled": false},{"id": 106,"label": "财务部门","disabled": false},{"id": 107,"label": "运维部门","disabled": false}]},{"id": 102,"label": "长沙分公司","disabled": false,"children": [{"id": 108,"label": "市场部门","disabled": false},{"id": 109,"label": "财务部门","disabled": false}]}]}]}resolve(resp); // 状态变为 fulfilled})
}3.安装依赖
splitpanes 是一个用于 创建可拖拽调整大小的面板布局 的 Vue 组件库。
pnpm add splitpanes
4.自定义分页组件
新建文件src\components\Pagination\index.vue
<template><div :class="{ 'hidden': hidden }" class="pagination-container"><el-pagination:background="background"v-model:current-page="currentPage"v-model:page-size="pageSize":layout="layout":page-sizes="pageSizes":pager-count="pagerCount":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template><script setup>
import { computed } from 'vue';
const props = defineProps({total: {required: true,type: Number},page: {type: Number,default: 1},limit: {type: Number,default: 20},pageSizes: {type: Array,default() {return [10, 20, 30, 50]}},// 移动端页码按钮的数量端默认值5pagerCount: {type: Number,default: document.body.clientWidth < 992 ? 5 : 7},layout: {type: String,default: 'total, sizes, prev, pager, next, jumper'},background: {type: Boolean,default: true},hidden: {type: Boolean,default: false}
})const emit = defineEmits();
const currentPage = computed({get() {return props.page},set(val) {emit('update:page', val)}
})
const pageSize = computed({get() {return props.limit},set(val){emit('update:limit', val)}
})
function handleSizeChange(val) {if (currentPage.value * val > props.total) {currentPage.value = 1}emit('pagination', { page: currentPage.value, limit: val })
}
function handleCurrentChange(val) {emit('pagination', { page: val, limit: pageSize.value })
}</script><style scoped>
.pagination-container {background: #fff;padding: 32px 16px;
}
.pagination-container.hidden {display: none;
}
</style>
5.自定义toolbar组件
新建文件src\components\RightToolbar\index.vue
<template><div class="top-right-btn" :style="style"><el-row><el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search"><el-button circle icon="Search" @click="toggleSearch()" /></el-tooltip><el-tooltip class="item" effect="dark" content="刷新" placement="top"><el-button circle icon="Refresh" @click="refresh()" /></el-tooltip><el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns"><el-button circle icon="Menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/><el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'"><el-button circle icon="Menu" /><template #dropdown><el-dropdown-menu><template v-for="item in columns" :key="item.key"><el-dropdown-item><el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" /></el-dropdown-item></template></el-dropdown-menu></template></el-dropdown></el-tooltip></el-row><el-dialog :title="title" v-model="open" append-to-body><el-transfer:titles="['显示', '隐藏']"v-model="value":data="columns"@change="dataChange"></el-transfer></el-dialog></div>
</template><script setup>
import { ref, computed } from 'vue';
const props = defineProps({/* 是否显示检索条件 */showSearch: {type: Boolean,default: true,},/* 显隐列信息 */columns: {type: Array,},/* 是否显示检索图标 */search: {type: Boolean,default: true,},/* 显隐列类型（transfer穿梭框、checkbox复选框） */showColumnsType: {type: String,default: "checkbox",},/* 右外边距 */gutter: {type: Number,default: 10,},
})const emits = defineEmits(['update:showSearch', 'queryTable']);// 显隐数据
const value = ref([]);
// 弹出层标题
const title = ref("显示/隐藏");
// 是否显示弹出层
const open = ref(false);const style = computed(() => {const ret = {};if (props.gutter) {ret.marginRight = `${props.gutter / 2}px`;}return ret;
});// 搜索
function toggleSearch() {emits("update:showSearch", !props.showSearch);
}// 刷新
function refresh() {emits("queryTable");
}// 右侧列表元素变化
function dataChange(data) {for (let item in props.columns) {const key = props.columns[item].key;props.columns[item].visible = !data.includes(key);}
}// 打开显隐列dialog
function showColumn() {open.value = true;
}if (props.showColumnsType == 'transfer') {// 显隐列初始默认隐藏列for (let item in props.columns) {if (props.columns[item].visible === false) {value.value.push(parseInt(item));}}
}// 勾选
function checkboxChange(event, label) {props.columns.filter(item => item.label == label)[0].visible = event;
}</script><style lang='scss' scoped>
:deep(.el-transfer__button) {border-radius: 50%;display: block;margin-left: 0px;
}
:deep(.el-transfer__button:first-child) {margin-bottom: 10px;
}
:deep(.el-dropdown-menu__item) {line-height: 30px;padding: 0 17px;
}
</style>6.自定义指令
新建文件src\directive\permission\hasPermi.js，自定义指令的逻辑。
/*** v-hasPermi 操作权限处理* Copyright (c) 2019 ruoyi*/import useUserStore from '@/stores/user'export default {mounted(el, binding, vnode) {const { value } = bindingconst all_permission = "*:*:*";const permissions = useUserStore().permissionsif (value && value instanceof Array && value.length > 0) {const permissionFlag = valueconst hasPermissions = permissions.some(permission => {return all_permission === permission || permissionFlag.includes(permission)})if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(`请设置操作权限标签值`)}}
}新建文件src\directive\index.js，自定义指令的统一注册。后续如果再增加其他自定义指令，都放在这个地方统一管理。
import hasPermi from './permission/hasPermi'export default function directive(app){app.directive('hasPermi', hasPermi)
}
7.在main.js中引用
// 自定义指令
import directive from './directive'
// 分页组件
import Pagination from '@/components/Pagination/index.vue'
// 自定义表格工具组件
import RightToolbar from '@/components/RightToolbar/index.vue'app.component('Pagination', Pagination)
app.component('RightToolbar', RightToolbar)directive(app)
8.userStore
增加一个权限变量permissions，默认具有所有权限。
import { defineStore } from 'pinia'
import { setToken, removeToken } from '@/utils/auth'
import { ref } from 'vue'const useUserStore = defineStore('user', () => {const permissions = ref(['*:*:*'])// 异步操作const login = async () => {await setToken('test-token')}const logout = async () => {await removeToken()}return {permissions,login, logout}
})export default useUserStore
9.工具类
新建文件src\utils\ruoyi.js，将通用的工具函数统一管理。
/*** 通用js方法封装处理* Copyright (c) 2019 ruoyi*/// 日期格式化
export function parseTime(time, pattern) {if (arguments.length === 0 || !time) {return null}const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'let dateif (typeof time === 'object') {date = time} else {if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {time = parseInt(time)} else if (typeof time === 'string') {time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');}if ((typeof time === 'number') && (time.toString().length === 10)) {time = time * 1000}date = new Date(time)}const formatObj = {y: date.getFullYear(),m: date.getMonth() + 1,d: date.getDate(),h: date.getHours(),i: date.getMinutes(),s: date.getSeconds(),a: date.getDay()}const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {let value = formatObj[key]// Note: getDay() returns 0 on Sundayif (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }if (result.length > 0 && value < 10) {value = '0' + value}return value || 0})return time_str
}
二.功能验证
运行项目，浏览器访问http://localhost:5173/system/user
页面正常显示，开发者工具无错误和警告。按钮功能不可用，点击会报错。
三.知识点拓展
一、布局组件
1. el-row 栅格布局容器
<el-row :gutter="20">
• :gutter (Number)
栅格间隔，单位px。控制子el-col之间的左右间距，实际间距 = gutter/2
2. el-col 栅格子元素
<el-col :span="6">
• :span (Number)
栅格占据的列数，总24列。span=6表示占据1/4宽度
• :offset (Number)
栅格左侧的间隔格数
• :xs/sm/md/lg/xl (Number/Object)
响应式布局配置，适应不同屏幕尺寸
二、表单组件
1. el-form 表单容器
<el-form :model="form" :rules="rules" ref="formRef">
• :model (Object)
绑定表单数据对象，必需属性
• :rules (Object)
表单验证规则配置对象
• ref (String)
用于获取表单实例，调用validate等方法
• inline (Boolean)
是否行内表单模式，表单项排列方式
2. el-form-item 表单项
<el-form-item label="用户名" prop="username">
• label (String)
标签文本
• prop (String)
表单域对应的model字段名，用于校验
• required (Boolean)
是否显示必填星号
3. el-input 输入框
<el-input v-model="queryParams.userName"placeholder="请输入"clearableprefix-icon="Search"@keyup.enter="handleQuery"
>
• v-model (String)
双向绑定值
• clearable (Boolean)
是否显示清除按钮
• prefix-icon (String/Component)
输入框头部图标
• show-password (Boolean)
是否显示密码切换按钮
• maxlength (Number)
最大输入长度
三、树形组件
el-tree 树形控件
<el-tree:data="deptOptions":props="treeProps":expand-on-click-node="false":filter-node-method="filterNode"node-key="id"
>
• :data (Array)
树形数据源，需包含children字段
• :props (Object)
配置选项：
{label: 'name', // 显示文本字段children: 'kids' // 子节点字段
}
• node-key (String)
节点唯一标识字段名，必填
• default-expand-all (Boolean)
是否默认展开所有节点
• :filter-node-method (Function)
节点过滤方法，格式：(value, data) => Boolean
四、表格组件
el-table 数据表格
<el-table:data="userList"@selection-change="handleSelection"v-loading="loading"
>
• :data (Array)
表格数据源
• v-loading (Boolean)
加载状态，显示加载动画
• @selection-change (Function)
多选事件，参数为选中行数组
el-table-column 表格列
<el-table-columnprop="username"label="用户名称"width="120":show-overflow-tooltip="true"
>
• prop (String)
对应数据字段名
• label (String)
列标题文本
• width (String/Number)
列宽度（支持’120px’格式）
• :formatter (Function)
格式化函数：(row, column, value) => String
• :show-overflow-tooltip (Boolean)
内容过长时显示Tooltip
五、弹窗组件
el-dialog 对话框
<el-dialog:title="dialogTitle"v-model="dialogVisible"width="600px"append-to-body
>
• v-model (Boolean)
控制对话框显示/隐藏
• width (String)
对话框宽度（支持百分比）
• append-to-body (Boolean)
是否插入至body元素，解决层级问题
• :before-close (Function)
关闭前的回调函数，可阻止关闭
六、分页组件
el-pagination 分页器
<el-pagination:total="total":page-size="pageSize":current-page="currentPage"layout="total, sizes, prev, pager, next"@size-change="handleSizeChange"
>
• layout (String)
组件布局选项，可用元素：
sizes, prev, pager, next, jumper, ->, total, slot
• page-sizes (Array)
每页显示个数选择器的选项设置，如[10, 20]
• background (Boolean)
是否为分页按钮添加背景色
七、上传组件
el-upload 文件上传
<el-upload:action="uploadUrl":limit="1"accept=".xlsx":on-success="handleSuccess"
>
• :action (String)
必选参数，上传地址
• :headers (Object)
设置上传的请求头部
• :data (Object)
上传时附带的额外参数
• :before-upload (Function)
上传前的钩子，返回false可中止上传
• :on-success (Function)
文件上传成功时的钩子
八、导航组件
el-tree-select 树形选择
<el-tree-selectv-model="form.deptId":data="deptOptions"check-strictly
>
• check-strictly (Boolean)
是否父子节点不互相关联
• render-after-expand (Boolean)
是否在展开子节点后渲染内容
• default-expanded-keys (Array)
默认展开的节点的 key 数组
九、特殊属性技巧
-
状态管理
<el-switch v-model="row.status"active-value="0" inactive-value="1" >•
active-value/inactive-value：自定义开关值 -
表格行操作
<template #default="scope"><el-button @click="editRow(scope.row)">• 使用scope.row获取当前行数据
-
表单校验增强
rules: {phone: {pattern: /^1[3-9]\d{9}$/,message: '手机号格式错误'} } -
响应式断点
<el-col :md="{span: 6}" :sm="{span: 12}">• md: ≥992px, sm: ≥768px
-
表格性能优化
<el-table :row-key="row => row.id">• 配合虚拟滚动提升大数据量性能