1、向api请求发出查询用户列表数据,渲染表单数据
1、定义查询参数列表对象queryInfo:{}
queryInfo: { query: '', // 查询 pagenum: 1, // 当前页数 pagesize: 2,// 当前每页显示多少条数据 }
2、定义userList:[]
数组,和total
整数,来存放查询后的用户数据
userList: [], total: 0,
3、定义getUserList()函数,通过向api发出get请求获取用户数据,返回{ data: res }
结果,通过res.meta.status
判断是否查询成功,成功之后,把res.data.users
用户数据传给userList:[]
数组,把res.data.total
查询总数传给total
整数
async getUserList() { const { 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) },
4、注意,在html渲染前就要启动getUserList()
方法
created() {this.getUserList()}
5、最后,通过:data="userList"
动态绑定数据源,prop="username"
绑定数据中的字段名,即可渲染table
表单
<el-table :data="userList" border stripe> <el-table-column type="index"></el-table-column> <el-tableColumn label="姓名" prop="username"></el-tableColumn> <el-tableColumn label="邮箱" prop="email"></el-tableColumn> <el-tableColumn label="电话" prop="mobile"></el-tableColumn> <el-tableColumn label="角色" prop="role_name"></el-tableColumn> <el-tableColumn label="状态"> </el-tableColumn> <el-tableColumn label="操作" width="180px"> </el-tableColumn> </el-table>
2、通过v-model绑定查询数据,进行表单信息查询
1、在input
输入框中通过v-model
绑定已经定义好的queryInfo
对象的query
属性,用来传参
<el-input placeholder="请输入内容" v-model="queryInfo.query"></el-input>
2、在button
按钮中通过@click
绑定已经定义好的getUserList
方法,来查询用户信息
<el-button slot="append" icon="el-icon-search" @click="getUserList" ></el-button>
3、在input
输入框中添加clearable
属性,用来清除查询数据,再通过@clear="getUserList"
,清除数据之后,绑定getUserList
方法重新查询数据
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
3、通过改变布尔值,来控制打开取消添加用户对话框
1、定义addDialogVisible
布尔值来控制添加用户对话框的显示与隐藏,默认为false,不打开;true为打开
addDialogVisible: false
2、在button
按钮中绑定@click="addDialogVisible = true"
,把addDialogVisible
变为true,打开添加用户对话框
<el-button type="primary" @click="addDialogVisible = true" >添加用户</el-button >
3、在dialog
对话框中通过:visible.sync="addDialogVisible"
监听addDialogVisible
布尔值是否为true,打开添加用户对话框,为false,关闭用户对话框
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%"></el-dialog>
4、在dialog
对话框中的取消按钮中绑定@click="addDialogVisible = false"
,关闭用户对话框
<el-button @click="addDialogVisible = false">取 消</el-button>
4、通过动态绑定current-page和page-size,再绑定触发事件,查询指定多少条数据,进行数据分页
1、通过:current-page="queryInfo.pagenum"
、:page-size="queryInfo.pagesize"
和:total="total"
动态绑定current-page页条数、page-size页码和total查询页数
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" > </el-pagination>
2、定义handleSizeChange(newSize)
和handleCurrentChange(newPage)
方法来监听页条数和页码
// 监听pageSize改变的事件 handleSizeChange(newSize) { this.queryInfo.pagesize = newSize this.getUserList() }, // 监听page页码值改变的事件 handleCurrentChange(newPage) { this.queryInfo.pagenum = newPage this.getUserList() },
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注阿兔在线工具的更多内容!