vue项目之菜单管理项目实现
1.背景
2.菜单导航实现
代码:
<template> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> <el-breadcrumb-item>用户列表列表</el-breadcrumb-item> </el-breadcrumb> </template> <script> export default { name: "User" } </script> <style scoped> </style>
3.实现搜索输入框
代码:
<template> <div> <!-- 导航区域--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> <el-breadcrumb-item>用户列表列表</el-breadcrumb-item> </el-breadcrumb> <!--卡片视图区--> <el-card> <el-row :gutter="20"> <el-col :span="8"> <el-input placeholder="请输入查询的用户名"> <el-button slot="append" icon="el-icon-search"></el-button> </el-input> </el-col> <el-col :span="4"> <el-button type="primary">添加</el-button> </el-col> </el-row> </el-card> </div> </template> <script> export default { name: "User" } </script> <style scoped> </style>
4.简单列表显示
<template> <div> <!-- 导航区域--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> <el-breadcrumb-item>用户列表列表</el-breadcrumb-item> </el-breadcrumb> <!--卡片视图区--> <el-card> <el-row :gutter="20"> <el-col :span="8"> <el-input placeholder="请输入查询的用户名"> <el-button slot="append" icon="el-icon-search"></el-button> </el-input> </el-col> <el-col :span="4"> <el-button type="primary">添加</el-button> </el-col> </el-row> </el-card> <!-- 表格区--> <el-table :data="tableData" stripe border style="width: 100%"> <el-table-column prop="username" label="用户名" ></el-table-column> <el-table-column prop="role_name" label="角色" ></el-table-column> <el-table-column prop="mobile" label="手机" ></el-table-column> <el-table-column prop="email" label="邮箱" ></el-table-column> <el-table-column prop="mg_state" label="状态" ></el-table-column> <el-table-column label="操作" ></el-table-column> </el-table> </div> </template> <script> export default { name: "User", created() { this.getTableData() }, data() { return { // 数据列表 tableData: [], // 总共条数 total:0, // 查询对象 queryObj: { query: '', pagenum: 1, pagesize: 10 } } }, methods: { // 获取列表数据 async getTableData() { const {data: result} = await this.$http.get('users', {params: this.queryObj}) console.log(result) if (result.meta.status !== 200) return this.$message.error(result.meta.msg) this.tableData = result.data.users this.total= result.data.total } } } </script> <style scoped> </style>
5.编号显示
6.状态显示
代码:
<template> <div> <!-- 导航区域--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> <el-breadcrumb-item>用户列表列表</el-breadcrumb-item> </el-breadcrumb> <!--卡片视图区--> <el-card> <el-row :gutter="20"> <el-col :span="8"> <el-input placeholder="请输入查询的用户名"> <el-button slot="append" icon="el-icon-search"></el-button> </el-input> </el-col> <el-col :span="4"> <el-button type="primary">添加</el-button> </el-col> </el-row> </el-card> <!-- 表格区--> <el-table :data="tableData" stripe border style="width: 100%"> <el-table-column label="序号" type="index"></el-table-column> <el-table-column prop="username" label="用户名" ></el-table-column> <el-table-column prop="role_name" label="角色" ></el-table-column> <el-table-column prop="mobile" label="手机" ></el-table-column> <el-table-column prop="email" label="邮箱" ></el-table-column> <el-table-column label="状态" > <template slot-scope="scope"> <el-switch v-model="scope.row.mg_state" > </el-switch> </template> </el-table-column> <el-table-column label="操作" ></el-table-column> </el-table> </div> </template> <script> export default { name: "User", created() { this.getTableData() }, data() { return { // 数据列表 tableData: [], // 总共条数 total:0, // 查询对象 queryObj: { query: '', pagenum: 1, pagesize: 10 } } }, methods: { // 获取列表数据 async getTableData() { const {data: result} = await this.$http.get('users', {params: this.queryObj}) console.log(result) if (result.meta.status !== 200) return this.$message.error(result.meta.msg) this.tableData = result.data.users this.total= result.data.total } } } </script> <style scoped> </style>
7.操作栏按钮显示
8.按钮提示
9.分页实现
代码:
<template> <div> <!-- 导航区域--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> <el-breadcrumb-item>用户列表列表</el-breadcrumb-item> </el-breadcrumb> <!--卡片视图区--> <el-card> <!-- 条件查询--> <el-row :gutter="20"> <el-col :span="8"> <el-input placeholder="请输入查询的用户名"> <el-button slot="append" icon="el-icon-search"></el-button> </el-input> </el-col> <el-col :span="4"> <el-button type="primary">添加</el-button> </el-col> </el-row> <!-- 表格区--> <el-table :data="tableData" stripe border style="width: 100%"> <el-table-column label="序号" type="index"></el-table-column> <el-table-column prop="username" label="用户名"></el-table-column> <el-table-column prop="role_name" label="角色"></el-table-column> <el-table-column prop="mobile" label="手机"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> <el-table-column label="状态"> <template slot-scope="scope"> <el-switch v-model="scope.row.mg_state"> </el-switch> </template> </el-table-column> <el-table-column label="操作"> <el-button type="primary" icon="el-icon-edit" size="mini"></el-button> <el-button type="danger" icon="el-icon-delete" size="mini"></el-button> <!-- 按钮文字提示--> <el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false"> <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button> </el-tooltip> </el-table-column> </el-table> <!-- 分页--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[2, 3, 10, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </el-card> </div> </template> <script> export default { name: "User", created() { this.getTableData() }, data() { return { // 数据列表 tableData: [], // 总共条数 total: 0, // 查询对象 queryObj: { query: '', pagenum: 1, pagesize: 10 } } }, methods: { // 获取列表数据 async getTableData() { const {data: result} = await this.$http.get('users', {params: this.queryObj}) console.log(result) if (result.meta.status !== 200) return this.$message.error(result.meta.msg) this.tableData = result.data.users this.total = result.data.total }, // 每页显示条数改变 handleSizeChange(newSize){ this.queryObj.pagesize=newSize this.getTableData() }, // 当前页改变 handleCurrentChange(newPage){ this.queryObj.pagenum=newPage this.getTableData() } } } </script> <style scoped> </style>
10.高级查询条件实现
1.绑定查询参数
2.点击图标触发事件
3.添加清除数据库按钮
4.清除数据时触发查询
11.状态修改实现
// 状态改变是触发
async changeState(rowObj) {
const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`)
console.log(result)
if (result.meta.status !== 200) {
// 重置状态
rowObj.mg_state = !rowObj.mg_state
// 消息提示
return this.$message.error(result.meta.msg)
}
// 状态修改成功
return this.$message.success('状态修改成功')
}
12.删除实现
1.确认是否删除
2.执行删除
代码：
<template> <div> <!-- 导航区域--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> <el-breadcrumb-item>用户列表列表</el-breadcrumb-item> </el-breadcrumb> <!--卡片视图区--> <el-card> <!-- 条件查询--> <el-row :gutter="20"> <el-col :span="8"> <el-input v-model="queryObj.query" placeholder="请输入查询的用户名" @clear="getTableData" clearable> <el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button> </el-input> </el-col> <el-col :span="4"> <el-button type="primary">添加</el-button> </el-col> </el-row> <!-- 表格区--> <el-table :data="tableData" stripe border style="width: 100%"> <el-table-column label="序号" type="index"></el-table-column> <el-table-column prop="username" label="用户名"></el-table-column> <el-table-column prop="role_name" label="角色"></el-table-column> <el-table-column prop="mobile" label="手机"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> <el-table-column label="状态"> <template slot-scope="scope"> <el-switch v-model="scope.row.mg_state" @change="changeState(scope.row)"> </el-switch> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <!-- 修改--> <el-button type="primary" icon="el-icon-edit" size="mini"></el-button> <!-- 删除--> <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"></el-button> <!-- 按钮文字提示--> <el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false"> <!-- 权限修改--> <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button> </el-tooltip> </template> </el-table-column> </el-table> <!-- 分页--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[2, 3, 10, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </el-card> </div> </template> <script> export default { name: "User", created() { this.getTableData() }, data() { return { // 数据列表 tableData: [], // 总共条数 total: 0, // 查询对象 queryObj: { query: '', pagenum: 1, pagesize: 10 } } }, methods: { // 获取列表数据 async getTableData() { const {data: result} = await this.$http.get('users', {params: this.queryObj}) console.log(result) if (result.meta.status !== 200) return this.$message.error(result.meta.msg) this.tableData = result.data.users this.total = result.data.total }, // 每页显示条数改变 handleSizeChange(newSize) { this.queryObj.pagesize = newSize this.getTableData() }, // 当前页改变 handleCurrentChange(newPage) { this.queryObj.pagenum = newPage this.getTableData() }, // 状态改变是触发 async changeState(rowObj) { const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`) console.log(result) if (result.meta.status !== 200) { // 重置状态 rowObj.mg_state = !rowObj.mg_state // 消息提示 return this.$message.error(result.meta.msg) } // 状态修改成功 return this.$message.success('状态修改成功') }, // 删除用户 async deleteById(id) { // 确认是否删除 const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(err => err); // 如果用户确认删除，则返回值为字符串 confirm // 如果用户取消了删除，则返回值为字符串 cancel if (confirmResult !== 'confirm') return this.$message.error('取消删除') const {data: result} = await this.$http.delete(`users/` + id) console.log(result) if (result.meta.status !== 200) { // 消息提示 return this.$message.error(result.meta.msg) } // 重新查询列表 this.getTableData() // 删除成功 return this.$message.success('删除成功') } } } </script> <style scoped> </style>
13.新增实现
1.弹出新增对话框
2.执行新增
3.回到列表
代码:
<template> <div> <!-- 导航区域--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-item> <el-breadcrumb-item>用户列表列表</el-breadcrumb-item> </el-breadcrumb> <!--卡片视图区--> <el-card> <!-- 条件查询--> <el-row :gutter="20"> <el-col :span="8"> <el-input v-model="queryObj.query" placeholder="请输入查询的用户名" @clear="getTableData" clearable> <el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button> </el-input> </el-col> <el-col :span="4"> <el-button type="primary" @click="addUser">添加</el-button> </el-col> </el-row> <!-- 表格区--> <el-table :data="tableData" stripe border style="width: 100%"> <el-table-column label="序号" type="index"></el-table-column> <el-table-column prop="username" label="用户名"></el-table-column> <el-table-column prop="role_name" label="角色"></el-table-column> <el-table-column prop="mobile" label="手机"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> <el-table-column label="状态"> <template slot-scope="scope"> <el-switch v-model="scope.row.mg_state" @change="changeState(scope.row)"> </el-switch> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <!-- 修改--> <el-button type="primary" icon="el-icon-edit" size="mini"></el-button> <!-- 删除--> <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteById(scope.row.id)"></el-button> <!-- 按钮文字提示--> <el-tooltip class="item" effect="dark" content="权限修改" placement="top" :enterable="false"> <!-- 权限修改--> <el-button type="warning" icon="el-icon-star-off" size="mini"></el-button> </el-tooltip> </template> </el-table-column> </el-table> <!-- 分页--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryObj.pagenum" :page-sizes="[2, 3, 10, 20]" :page-size="queryObj.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </el-card> <!-- 增加用户对话框--> <el-dialog title="新增用户" :visible.sync="dialogVisibleAddUser" width="50%" @close="resetForm('addFormRef')"> <!-- 输入框--> <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="70px"> <!-- 用户名 prop="username" 与表单验证属性对应--> <el-form-item label="用户名" prop="username"> <el-input v-model="addForm.username"></el-input> </el-form-item> <!-- 密码 --> <el-form-item label="密码" prop="password"> <el-input v-model="addForm.password"></el-input> </el-form-item> <!-- 邮箱 --> <el-form-item label="邮箱" prop="email"> <el-input v-model="addForm.email"></el-input> </el-form-item> <!-- 手机 --> <el-form-item label="手机" prop="mobile"> <el-input v-model="addForm.mobile"></el-input> </el-form-item> <!-- 按钮区域 --> <el-form-item> <el-button type="primary" @click="addUserData">新建</el-button> <el-button type="info" @click="dialogVisibleAddUser=false">取消</el-button> </el-form-item> </el-form> </el-dialog> </div> </template> <script> export default { name: "User", created() { this.getTableData() }, data() { return { // 添加用户对象 addForm: { username: '', password: '', email: '', mobile: '' }, // 用户规则 addRules: { username: [ {required: true, message: '请输入用户名称', trigger: 'blur'}, {min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'} ], password: [ {required: true, message: '请输入密码', trigger: 'blur'}, {min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur'} ], email: [ {required: true, message: '请输入邮箱', trigger: 'blur'}, {min: 3, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur'} ], mobile: [ {required: true, message: '请输入手机号', trigger: 'blur'}, {min: 11, max: 11, message: '长度为11位', trigger: 'blur'} ], }, // 是否显示新增对话框 dialogVisibleAddUser: false, // 数据列表 tableData: [], // 总共条数 total: 0, // 查询对象 queryObj: { query: '', pagenum: 1, pagesize: 10 } } }, methods: { // 获取列表数据 async getTableData() { const {data: result} = await this.$http.get('users', {params: this.queryObj}) console.log(result) if (result.meta.status !== 200) return this.$message.error(result.meta.msg) this.tableData = result.data.users this.total = result.data.total }, // 每页显示条数改变 handleSizeChange(newSize) { this.queryObj.pagesize = newSize this.getTableData() }, // 当前页改变 handleCurrentChange(newPage) { this.queryObj.pagenum = newPage this.getTableData() }, // 状态改变是触发 async changeState(rowObj) { const {data: result} = await this.$http.put(`users/${rowObj.id}/state/${rowObj.mg_state}`) console.log(result) if (result.meta.status !== 200) { // 重置状态 rowObj.mg_state = !rowObj.mg_state // 消息提示 return this.$message.error(result.meta.msg) } // 状态修改成功 return this.$message.success('状态修改成功') }, // 删除用户 async deleteById(id) { // 确认是否删除 const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(err => err); // 如果用户确认删除，则返回值为字符串 confirm // 如果用户取消了删除，则返回值为字符串 cancel if (confirmResult !== 'confirm') return this.$message.error('取消删除') const {data: result} = await this.$http.delete(`users/` + id) console.log(result) if (result.meta.status !== 200) { // 消息提示 return this.$message.error(result.meta.msg) } // 重新查询列表 this.getTableData() // 删除成功 return this.$message.success('删除成功') }, // 显示添加用户弹框 addUser() { // 打开弹框 this.dialogVisibleAddUser = true }, // 保存用户数据 addUserData() { // 数据校验 this.$refs.addFormRef.validate(async (valid) => { if (!valid) return ; // 发出请求 let {data: result} = await this.$http.post('users', this.addForm) console.log(result) if (result.meta.status !== 201){ this.$message.error(result.meta.msg) return } this.$message.success("新增成功") // 关闭弹框 this.dialogVisibleAddUser=false // 查询数据 this.getTableData() }) }, // 表单重置 resetForm(formName) { this.$refs[formName].resetFields(); } } } </script> <style scoped> </style>
14.修改实现
完美!
浙公网安备 33010602011771号