一、用户管理页面功能form页面编写
新增按钮：
在User.vue中引入element-ui中的dialog组件
<template>
<div class="manage">
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<div class="manage-header">
<el-button @click="dialogVisible = true" type="primary">
+ 新增
</el-button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
dialogVisible:false
}
}
}
</script>
制作新增按钮页面：
通过incline=“true”使属性框横向显示
<el-option label="男" value="1"></el-option>
<el-option label="女" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="出生日期">
<el-date-picker
v-model="form.birth"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="地址">
<el-input placeholder="请输入地址" v-model="form.addr"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<div class="manage-header">
<el-button @click="dialogVisible = true" type="primary">
+ 新增
</el-button>
</div>
</div>
</template>
二、用户管理页面功能form新增功能编写
添加未输入提示功能：
全部提示
rules:{
name:[
{ required:true,message: '请输入姓名' }
],
age:[
{ required:true,message: '请输入年龄' }
],
sex:[
{ required:true,message: '请选择性别' }
],
birth:[
{ required:true,message: '请选择出生日期' }
],
addr:[
{ required:true,message: '请填写地址' }
],
<!-- 用户的表单信息 -->
<el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input placeholder="请输入姓名" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input placeholder="请输入年龄" v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" placeholder="请选择">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="出生日期" prop="birth">
<el-date-picker
v-model="form.birth"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="地址" prop="addr">
<el-input placeholder="请输入地址" v-model="form.addr"></el-input>
</el-form-item>
</el-form>
确定按钮：
对表单数据处理：
校验通过，拿到数据
实现关闭弹窗并清空表单和取消按钮的功能：
取消按钮
完整代码
methods:{
//提交用户表单
submit() {
this.$refs.form.validate((valid) => {
// console.log(valid,'valid')
if(valid){
//后续对表单数据的处理
console.log(this.form,'form')
//清空表单的数据
this.$refs.form.resetFields()
//关闭弹窗
this.dialogVisible = false
}
})
},
//弹窗关闭的时候
handleClose() {
// console.log(this.$refs.form)
this.$refs.form.resetFields()
this.dialogVisible = false
},
cancel() {
this.handleClose()
}
}
三、用户管理页面table数据获取
引入element-ui中的table组件到User.vue中
<template>
<div class="manage">
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="40%"
:before-close="handleClose">
<!-- 用户的表单信息 -->
<el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input placeholder="请输入姓名" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input placeholder="请输入年龄" v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" placeholder="请选择">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="出生日期" prop="birth">
<el-date-picker
v-model="form.birth"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="地址" prop="addr">
<el-input placeholder="请输入地址" v-model="form.addr"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
<div class="manage-header">
<el-button @click="dialogVisible = true" type="primary">
+ 新增
</el-button>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</div>
</template>
在data数据中定义字段
在mockServeData下新建文件user.js（通过mock模拟后端数据）
import Mock from 'mockjs'
//通过mock模拟后端数据
// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"') +
'"}'
)
}
let List = []
const count = 200
for (let i = 0; i < count; i++) {
List.push(
Mock.mock({
id: Mock.Random.guid(),
name: Mock.Random.cname(),
addr: Mock.mock('@county(true)'),
'age|18-60': 1,
birth: Mock.Random.date(),
sex: Mock.Random.integer(0, 1)
})
)
}
export default {
/**
* 获取列表
* 要带参数 name, page, limt; name可以不填, page,limit有默认值。
* @param name, page, limit
* @return {{code: number, count: number, data: *[]}}
*/
getUserList: config => {
const { name, page = 1, limit = 20 } = param2Obj(config.url)
console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
const mockList = List.filter(user => {
if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
return true
})
const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
return {
code: 20000,
count: mockList.length,
list: pageList
}
},
/**
* 增加用户
* @param name, addr, age, birth, sex
* @return {{code: number, data: {message: string}}}
*/
createUser: config => {
const { name, addr, age, birth, sex } = JSON.parse(config.body)
console.log(JSON.parse(config.body))
List.unshift({
id: Mock.Random.guid(),
name: name,
addr: addr,
age: age,
birth: birth,
sex: sex
})
return {
code: 20000,
data: {
message: '添加成功'
}
}
},
/**
* 删除用户
* @param id
* @return {*}
*/
deleteUser: config => {
const { id } = JSON.parse(config.body)
if (!id) {
return {
code: -999,
message: '参数不正确'
}
} else {
List = List.filter(u => u.id !== id)
return {
code: 20000,
message: '删除成功'
}
}
},
/**
* 批量删除
* @param config
* @return {{code: number, data: {message: string}}}
*/
batchremove: config => {
let { ids } = param2Obj(config.url)
ids = ids.split(',')
List = List.filter(u => !ids.includes(u.id))
return {
code: 20000,
data: {
message: '批量删除成功'
}
}
},
/**
* 修改用户
* @param id, name, addr, age, birth, sex
* @return {{code: number, data: {message: string}}}
*/
updateUser: config => {
const { id, name, addr, age, birth, sex } = JSON.parse(config.body)
const sex_num = parseInt(sex)
List.some(u => {
if (u.id === id) {
u.name = name
u.addr = addr
u.age = age
u.birth = birth
u.sex = sex_num
return true
}
})
return {
code: 20000,
data: {
message: '编辑成功'
}
}
}
}
定义接口：在mock.js中
import Mock from 'mockjs'
import homeApi from './mockServeData/home'
import user from './mockServeData/user'
//定义mock请求拦截
Mock.mock('/api/home/getData', homeApi.getStatisticalData)
//用户列表的数据
Mock.mock('/api/user/add','post',user.createUser)
Mock.mock('/api/user/edit','post',user.updateUser)
Mock.mock('/api/user/del','post',user.deleteUser)
Mock.mock('/api/user/getUser',user.getUserList)
定义前端相关api：在api中的index.js中
import http from '../utils/request'
//请求首页数据
export const getData = () => {
//返回一个promise对象
return http.get('/home/getData')
}
export const getUser = (params) => {
//返回用户列表
return http.get('/user/getUser',params)
}
export const addUser = (data) => {
return http.post('/user/add',data)
}
export const editUser = (data) => {
return http.post('/user/edit',data)
}
export const delUser = (data) => {
return http.post('/user/del',data)
}
请求接口：在User.vue中
四、用户管理页面table列表编写
结果并未获取到性别
引入element-ui中自定义列模板
还剩一列操作栏
五、用户管理页面新增编辑提交功能编写
在User.vue中
methods中submit提交表单中判断是新增弹窗还是编辑弹窗
//提交用户表单
submit() {
this.$refs.form.validate((valid) => {
// console.log(valid,'valid')
if(valid){
//后续对表单数据的处理
if (this.modalType === 0) {
addUser(this.form).then(() => {
//重新获取列表的接口
this.getList()
})
} else {
editUser(this.form).then(() => {
//重新获取列表的接口
this.getList()
})
}
//清空表单的数据
this.$refs.form.resetFields()
//关闭弹窗
this.dialogVisible = false
}
})
},
新增按钮
编辑按钮
修改日期显示格式
修改男女显示1和0问题
删除按钮
在element-ui中引入MessageBox 弹框
handleDelete(row) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delUser({id:row.id}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
//重新获取列表的接口
this.getList()
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
新增
编辑
删除
六、用户管理页面剩余功能解决
1.分页功能
调整高度样式
在User.vue中
<style lang="less" scoped>
.manage {
height:90%
}
</style>
将<el-table>标签移出<div>
<div class="manage-header">
<el-button @click="handleAdd" type="primary">
+ 新增
</el-button>
<!-- form搜索区域 -->
</div>
<el-table
height="90%"
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="sex"
label="性别">
<template slot-scope="scope">
<span>{{ scope.row.sex === 1? '男' : '女'}}</span>
</template>
</el-table-column>
<el-table-column
prop="age"
label="年龄">
</el-table-column>
<el-table-column
prop="birth"
label="出生日期">
</el-table-column>
<el-table-column
prop="addr"
label="地址">
</el-table-column>
<el-table-column
prop="sex"
label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
分页组件
绑定total
每页获得20条数据
点击跳转页面
已经获取页码 
在api中的mock.js中
改写成正则表达式
调整样式
<style lang="less" scoped>
.manage {
height:90%;
.common-tabel {
position:relative;
height: calc(100% - 62px);
.pager {
position:absolute;
bottom: 0;
right: 20px;
}
}
}
</style>
二、右侧搜索区域
<!-- form搜索区域 -->
<el-form :inline="true" :model="userForm">
<el-form-item>
<el-input placeholder="请输入名称" v-model="userForm.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
调整布局
扫一扫
546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
