Vue用户管理的增删改查功能详解
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()
},
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
vue demi支持sfc方式的vue2vue3通用库开发详解
这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家详细介绍了vue使用ECharts实现折线图和饼图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了Vue页面手动刷新,实现导航栏激活项还原到初始状态，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家介绍了Vue返回值动态生成表单及提交数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了VUE预渲染及遇到的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了详解vue2.0 不同屏幕适配及px与rem转换问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue3子组件数据无法更新问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue服务端渲染实践之Web应用首屏耗时最优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要为大家介绍了Element-ui Image图片按需引入大图预览实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了vue-froala-wysiwyg 富文本编辑器功能，分步骤给大家介绍了vue3.中如何安装使用froala,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
最新评论