validator-->函数(规则 回调函数)
var checkEmail=(rule,value,callback)=>{
//验证邮箱的正则表达式
const regEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if(regEmail.test(value)){
//合法邮箱
return callback()
}
//出错了
callback(new Error('请输入合法的邮箱'))
}
var checkMobile=(rule,value,callback)=>{
//验证手机号的正则表达式
const regEmail=/^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if(regEmail.test(value)){
//合法手机号
return callback()
}
//出错了
callback(new Error('请输入合法的手机号'))
}
email:[
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{validator:checkEmail,trigger: 'blur'}
],
mobile:[
{ required: true, message: '请输入电话',trigger: 'blur' },
{validator:checkMobile,trigger: 'blur'}
]
<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 class="box-card">
<!-- 搜索和添加区域 -->
<el-row :gutter="20">
<el-col :span="7">
<div>
<el-input placeholder="请输入内容" v-model="queryInfo.query"
clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search"
@click="getUserList"></el-button>
</el-input>
</div>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
</el-col>
</el-row>
<!-- 用户列表区域 -->
<!-- data指定数据源 stripe斑马 border边框-->
<el-table border :data="userList" stripe>
<!-- 索引列 -->
<el-table-column type="index" label="#"></el-table-column>
<!-- prop是data数组中的数据 -->
<el-table-column label="姓名" prop="username"> </el-table-column>
<el-table-column label="邮箱" prop="email"> </el-table-column>
<el-table-column label="电话" prop="mobile"> </el-table-column>
<el-table-column label="角色" prop="role_name"> </el-table-column>
<el-table-column label="状态">
<!-- 作用域插槽 slot-scope获取子组件的slot引用scope引用变量名 具有所有sloat属性 作用域插槽会覆盖prop -->
<template slot-scope="scope">
<!-- 将拿到的数据渲染 -->
<el-switch @change="userStateChanged(scope.row)"
v-model=scope.row.mg_state>
</el-switch>
</template>
</el-table-column>
<!-- 为了让一行可以放下3个按钮width -->
<el-table-column label="操作" width="180px">
<!-- 作用域插槽 -->
<template slot-scope="scope">
<!-- scope.row将拿到的数据渲染 -->
<!-- 修改按钮 -->
<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 effect="dark" content="分配角色" placement="top"
:enterable="false">
<el-button type="warning" icon="el-icon-setting"
size="mini"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页区域 -->
<!-- current-page当前页码数 page-size当前每页显示多少条数据 layout 展示菜单项-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 2, 5, 10]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
<!-- 添加用户 的对话框-->
<el-dialog
title="提示"
:visible.sync="addDialogVisible"
width="50%">
<!-- 内容主题区域 -->
<el-form :model="addFrom" :rules="addFromRules" ref="addFromRef"
label-width="70px" status-icon>
<el-form-item label="用户名" prop="username">
<el-input v-model="addFrom.username"></el-input>
</el-form-item>
</el-form>
<el-form :model="addFrom" :rules="addFromRules" ref="addFromRef"
label-width="70px" status-icon>
<el-form-item label="密码" prop="password">
<el-input v-model="addFrom.password"></el-input>
</el-form-item>
</el-form>
<el-form :model="addFrom" :rules="addFromRules" ref="addFromRef"
label-width="70px" status-icon>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addFrom.email"></el-input>
</el-form-item>
</el-form>
<el-form :model="addFrom" :rules="addFromRules" ref="addFromRef"
label-width="70px" status-icon>
<el-form-item label="电话" prop="mobile">
<el-input v-model="addFrom.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<!-- 底部按钮区域 取消按钮的时候隐藏对话框 -->
<el-button @click="addDialogVisible= false">取 消</el-button>
<el-button type="primary" @click="addDialogVisible= false">确
定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default{
data() {
var checkEmail=(rule,value,callback)=>{
//验证邮箱的正则表达式
const regEmail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if(regEmail.test(value)){
//合法邮箱
return callback()
}
//出错了
callback(new Error('请输入合法的邮箱'))
}
var checkMobile=(rule,value,callback)=>{
//验证手机号的正则表达式
const regEmail=/^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if(regEmail.test(value)){
//合法手机号
return callback()
}
//出错了
callback(new Error('请输入合法的手机号'))
}
return {
// 获取用户列表的参数
queryInfo:{
query:'',//查询参数 可以为空
pagenum:1,//当前页码 不能为空
pagesize:2// 每页显示条数 不能为空
},
userList:[],//所有数据列表
total:0,//总数据条数
addDialogVisible:false,//控制添加用户对话框的隐藏 false
addFrom:{//添加用户的表单数据
username:'',
password:'',
email:'',
mobile:''
},
addFromRules:{//添加表单验证规则对象
username:[
{ required: true, message: '请输入用户', trigger: 'blur' },
{ min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }
],
password:[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '密码长度在 6 到 15 个字符', trigger: 'blur' }
],
email:[
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{validator:checkEmail,trigger: 'blur'}
],
mobile:[
{ required: true, message: '请输入电话',trigger: 'blur' },
{validator:checkMobile,trigger: 'blur'}
]
}
}
},
created() {
//在创建的时候获取用户列表数据 调用函数
this.getUserList()
},
methods: {
async getUserList(){
//get请求-写在data中
const{data:res}= await this.$http.get('users',{params:this.queryInfo})
//console.log(res)//测试
if(res.meta.status!==200) return this.$message.error('获取用户列表数据失败')
this.userList=res.data.users
this.total=res.data.total
},
handleSizeChange(val) { //切换每页显示条触发 拿到最新的
this.queryInfo.pagesize=val
this.getUserList()//并且重新发送数据请求
},
handleCurrentChange(val) {//页码值改变的事件
this.queryInfo.pagenum=val
this.getUserList()//并且重新发送数据请求
},
async userStateChanged(userinfo){//监听switch状态的改变
//console.log(userinfo) //测试
//模板字符串 动态拼接
const {data:res}= await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
if(res.meta.status!==200) {
return this.$message.error('更新用户状态失败')
//并且将页面已经变化的数据重置回去
userinfo.mg_state=!userinfo.mg_state
}
this.$message.success('更新用户状态成功')
}
},
}
</script>
<style lang="less" scoped>
</style>