vue实现添加用户和删除用户,vue.js增删改查案例
本文主要详细介绍了Vue用户管理的添加、删除和检查功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.请求api发送查询用户列表数据，呈现表单数据2。用v-model绑定查询数据查询表单信息3。更改布尔值以控制取消添加用户4对话框的打开。将触发事件与当前页面和页面大小动态绑定，查询指定了多少条数据，并按页面汇总数据。
1、向api请求发出查询用户列表数据，渲染表单数据
1.定义查询参数列表对象queryInfo:{}
查询信息：{
查询： ，//查询
枚举：1，//当前页数
Pagesize: 2，//当前每页显示多少条数据？
}
2.定义userList:[] array和total integer来存储查询到的用户数据。
用户列表：[]，
总计：0，
3.定义getUserList()函数，通过向api发送get请求获取用户数据，返回{data: res}的结果，通过res.meta.status判断查询是否成功，成功后将res.data.users的用户数据发送到userList:[]数组，将res.data.total的查询总数发送到total整数。
异步getUserList() {
const { data: res }=等待此消息。$http.get(users ，{
params: this.queryInfo，
})
if (res.meta.status！==200)还这个。$ message.error(数据采集失败)
this.userList=res.data.users
this . total=RES . datatotal
console.log(res)
},
4.注意，getUserList()方法应该在html呈现之前启动。
created() {this.getUserList()}
5.最后，可以通过将数据源与data=userList 以及数据中的字段名与prop=username 动态绑定来呈现表格表单
el-table :data=userList 边框条带
el表列类型=索引/el表列
El-tableColumn标签=名称属性=用户名/el-tableColumn
El-tableColumn标签=邮箱属性=电子邮件/el-tableColumn
El-tableColumn标签=电话属性=移动/el-tableColumn
El-tableColumn标签= role 属性= role _ name/El-tablecolumn
El-tableColumn标签=状态/el-tableColumn
El-tableColumn标签=操作宽度=180px /el-tableColumn
/el-table
2、通过v-model绑定查询数据，进行表单信息查询
1.在输入输入框中，通过v-model绑定定义的queryInfo对象的查询属性，用于传递参数。
El-input placeholder=请输入内容 v-model= query info . query /El-input
2.通过@click将定义的getUserList方法绑定到按钮button中，以查询用户信息
El-button slot= append icon= El-icon-search @ click= get userlist /El-button
3.在输入输入框中添加clearable属性清除查询数据，然后点击@clear=getUserList 清除数据，再绑定getUserList方法重新查询数据。
El-input placeholder=请输入内容 v-model= query info . query clear @ clear= get userlist
3、通过改变布尔值，来控制打开取消添加用户对话框
1.定义addDialogVisible布尔值来控制添加用户对话框的显示和隐藏。默认值为false，不会打开。真实是开放的。
addDialogVisible: false
2.在按钮中绑定@click=addDialogVisible=true ，将addDialogVisible更改为true，打开添加用户对话框。
El-button type= primary @ click= addDialogVisible=true
添加用户/el按钮
3.在对话框中，通过：visible.sync=addDialogVisible 监控addDialogVisible的布尔值是否为真，打开添加用户对话框，如果为假则关闭用户对话框。
El-dialog title= add user :visible . sync= add dialog visible width= 50% /El-dialog
4.在对话框的取消按钮中绑定@click=addDialogVisible=false 以关闭用户对话框。
El-button @ click= adddialogvisible=false 取消/el-button
4、通过动态绑定current-page和page-size，再绑定触发事件，查询指定多少条数据，进行数据分页
1.通过：current-page= query info . pagenum ，page-size=queryInfo.pagesize 和：total=total 动态绑定当前页面的页数、页面大小的页码和总查询页数
el分页
@size-change=handleSizeChange
@ current-change= handleCurrentChange
:当前页面=查询信息。页面编号
:page-size=[1，5，10，20]
:page-size=queryInfo.pagesize
布局=总计，大小，上一页，分页，下一页，跳转
:total=total
/El-分页
2、定义handleSizeChange(新尺寸)和handleCurrentChange(新页面)方法来监听页条数和页码
//监听页面大小改变的事件
handleSizeChange(newSize) {
这个。查询信息。pagesize=newSize
this.getUserList()
},
//监听页，面，张，版页码值改变的事件
handleCurrentChange(newPage) {
this.queryInfo.pagenum=newPage
this.getUserList()
},
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。