主要内容简介
1.用户列表获取
2.自定义状态
3.分页
4.搜索
1.用户列表获取
使用异步的方法获取,把条数,页数也重新赋值绑定
created() {
this.getUserList()
},
methods: {
//获取用户列表数据
async getUserList() {
let { data: res } = await this.$http.get('users', {
params: this.queryInfo
})
if (res.meta.status != 200) {
return this.$message.error('获取用户列表失败')
}
this.userlist = res.data.users
this.total = res.data.total //条数
console.log(res)
},
html
table :data="userlist" border stripe>
xxx其它代码table>
2.自定义状态,比如关闭打卡
js上接受一个每一行的数据scope.row: create_time: (...) email:"adsfad@qq.com" id: 500 mg_state: true mobile: "12345678" role_name: "超级管理员" username
如果失败了,立刻取反,不做任何操作
发送两个参数过去,一个id,一个修改的状态,使用``的方式进行拼接
//监听switch开关的状态
async userStateChanged(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("更新用户状态成功")
}
其中这里使用到作用域插槽
<el-table-column label="状态" prop="mg_state">
<template slot-scope="scope"
>
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">el-switch>
template>
el-table-column>
3.分页
<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>
关键是把点击当前的数据,重新赋值,然后重新调用函数
//监听pagesize改变的事件
handleSizeChange(newSize){
console.log(newSize);
this.queryInfo.pagesize=newSize;
this.getUserList()
},
//监听 页码值改变的事件
handleCurrentChange(newPage){
this.queryInfo.pagenum=newPage;
this.getUserList()
},
4.搜索功能
双向绑定数据 v-model="queryInfo.query",
getUserList点击事件(共用一个函数了,因为用例数据的双向绑定)
点击清空:重新刷新页面,回到原来的数据 @clear="getUserList"
<el-row :gutter="20">
<el-col :span="8">
<el-input v-model="queryInfo.query" clearable @clear="getUserList" placeholder="请输入内容">
<el-button @click="getUserList" 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>
平时学习过程记录下来笔记,从b站“_Nenio”这个up上传的视频学习的