31、使用el-table组件渲染基本的用户列表
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。
stripe属性可以创建带斑马纹的表格。
border属性可以创建带边框的表格。
<!-- 用户列表区域 -->
<el-table :data="userlist" border stripe>
<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="状态" prop="mg_state"></el-table-column>
<el-table-column label="操作"></el-table-column>
</el-table>
32、添加索引列，并自定义状态列的显示效果
添加索引列只需加type属性即可：
<el-table-column type="index" label="#"></el-table-column>
获取到一行的数据，就能点出状态具体的值，此时就能按需渲染状态的效果。
在状态列放一个模版，加slot-scope属性，scope有个scope.row的属性，代表当前这一行的数据。
在状态这一列，只需要通过作用域插槽，接收了scope，就能通过scope点出row的属性，再点出具体的属性，就能实现我们想要的效果。
自定义状态列的显示效果：
<el-table-column label="状态">
<template slot-scope="scope">
<!-- scope的scope.row的属性，代表当前这一行的数据 -->
<!-- {{scope.row}} -->
<el-switch v-model="scope.row.mg_state"></el-switch>
</template>
</el-table-column>
33、通过作用域插槽渲染操作列
Tooltip 文字提示：常用于展示鼠标 hover 时的提示信息。使用content属性来决定hover时的提示信息。由placement属性决定展示效果。通过设置effect属性来改变主题，默认为dark。
<el-table-column label="操作" width="180px">
<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"></el-button>
<!-- 分配角色按钮 -->
<el-tooltip effect="dark" content="分配角色" placement="top">
<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
</el-tooltip>
</template>
</el-table-column>
34、实现分页效果
<!-- 分页区域 -->
<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>
layout用来指定页面展示哪些功能组件
data() {
return {
// 获取用户列表的参数数据
queryInfo: {
query: '',
// 当前的页数
pagenum: 1,
// 当前每页显示多少条数据
pagesize: 2,
},
userlist:[],
total:0
};
},
methods: {
// 监听 pagesize 改变的事件
handleSizeChange(newSize){
// console.log(newSize);
this.queryInfo.pagesize = newSize;
// 调用函数重新获取数据
this.getUserList();
},
// 监听 页码值 改变的事件
handleCurrentChange(newPage){
// console.log(newPage);
this.queryInfo.pagenum = newPage;
// 调用函数重新获取数据
this.getUserList();
}
},
35、修改用户状态
将用户状态改变，再刷新时，还是会恢复到原来的状态，因为我们只是在前台设置了，但是并没有把这个状态修改同步到数据库中进行保存。
第一步：监听到Switch开关状态的改变，从而获取到最新的状态。
<template slot-scope="scope">
<!-- scope的scope.row的属性，代表当前这一行的数据 -->
<!-- {{scope.row}} -->
<el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)"></el-switch>
</template>
第二步：调用对应的API接口，把最新的状态保存到数据库中。
如果更新失败，就把状态取反，从而保证页面上的状态没有变化。
methods: {
// 监听 switch 开关状态的改变
async userStateChange(userinfo){
console.log(userinfo);
const { data: res } = await this.$http.put(
`users/${userinfo.id}/state/${userinfo.mg_state}`
);
if(res.meta.status !== 200){
userinfo.mg_state = !userinfo.mg_state;
return this.$message.error('更新状态失败！');
}
this.$message.success('更新状态成功^_^！')
}
}
36、实现搜索功能
1、给文本框绑定数据
2、给按钮绑定事件
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
使用clearable属性即可得到一个可清空的输入框。
clear事件：在点击由 clearable 属性生成的清空按钮时触发。
37、渲染添加用户的对话框
给“添加用户”按钮绑定单击事件，就会弹出框了。
<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
<el-dialog title="提示" :visible.sync="addDialogVisible" width="50%">
<!-- 内容主体区 -->
<span>这是一段信息</span>
<!-- 底部按钮区 -->
<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>
data() {
// 控制添加用户对话框的显示与隐藏
addDialogVisible:false
}
38、渲染添加用户的表单
:model数据绑定对象，:rules验证规则对象，ref引用对象。
通过label来指定input框前的文本，prop指定具体的校验规则，并且校验规则要在addFormRules里做具体的定义。
每个item里都会有一个文本输入框，用v-model做数据的双向绑定，绑定到addForm表单数据对象上，之后输入的数据都会自动同步到addForm对象中。
<!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%">
<!-- 内容主体区 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<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>
<!-- 底部按钮区 -->
<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>
return {
// 添加用户的表单数据
addForm:{
username:'',
password:'',
email:'',
mobile:''
},
// 添加表单的验证规则对象
addFormRules:{
username:[
{required: true,
message:'请输入用户名',trigger:'blur'},
{min:3,
max:6,
message:'用户名的长度在3～10个字符之间',
trigger:'blur'}
],
password:[
{required: true,
message:'请输入密码',trigger:'blur'},
{min:3,
max:6,
message:'密码的长度在3～6个字符之间',
trigger:'blur'}
],
email:[
{required: true,
message:'请输入邮箱',trigger:'blur'}
],
mobile:[
{required: true,
message:'请输入手机',trigger:'blur'}
]
}
}
39、自定义邮箱和手机号码的校验规则
先定义一个箭头函数，在具体的校验规则里通过validator来使用刚才自定义的规则。
data()
// 验证邮箱的规则
var checkEmail = (rule, value, cb) =>{
// 验证邮箱的正则表达式
const regEmail = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
if(regEmail.test(value)) {
// 合法的邮箱
return cb();
}
cb(new Error('请输入合法的邮箱!'));
}
// 验证手机号的规则
var checkMobile = (rule, value, cb) =>{
// 验证手机号的正则表达式
const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
if(regMobile.test(value)) {
return cb();
}
cb(new Error('请输入合法的手机号!'));
}
}
return {
email:[
{required: true,
message:'请输入邮箱',trigger:'blur'},
{validator: checkEmail, trigger:'blur'}
],
mobile:[
{required: true,
message:'请输入手机号码',trigger:'blur'},
{validator: checkMobile, trigger:'blur'}
]
}
40、实现添加表单的重置操作
在关闭弹框后需要清空填写的数据，这里需要用到关闭事件。
1、绑定 @close=“addDialogClosed" 进行处理
2、在methods里添加方法
<!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"> </el-dialog>
methods: {
addDialogClosed(){
this.$refs.addFormRef.resetFields();
}
}
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
