1.概述
一般来说,对于新增用户主要是有两种方式,第一种:点击新增用户切换到一个新的页面;第二种:弹出一个element-ui的模态框,这里我们采用第二种方式。 本节的目的,只是记录弹出的窗口!!!!具体设置请看下一节
2.流程概括
element-ui选择模态框——Dialog对话框 复制代码到div中任意位置 element.js中添加属性Dialog 修改显示名称addDialogVision data中设置属性addDialogVision默认为false 把内容中替换成form表单 修改ref和model属性名,并且修改下文的绑定
3.效果展示
4.代码展示
@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pnum" :page-sizes="[1,2,5,10]" :page-size="queryInfo.psize" layout="total, sizes, prev, pager, next, jumper" :total="total">
:before-close="handleClose">
export default {
data () {
return {
userList : [],
// 用于传递页码和每页的条数,控制搜索条件
queryInfo: {
// 默认值
name:'',
pnum: 1,
psize: 2
},
// 用于统计总共有几条数据
total: 0,
addDialogVisible:false,
addForm:{}
}
},
// 创建时进行的操作
created(){
this.getUserList()
},
// 异步操作转同步:因为加载到这个页面时候就必须加载此数据
methods: {
async getUserList(){
// 发送请求到后端:当时定义的请求方式是put,定义的地址是/user_list, 传递第几页第几条
const { data : res } = await this.$axios.get('/api/user/user_list', { params: this.queryInfo })
// 避免报错
if(res.status != 200) return this.$msg.error(res.msg)
console.log(res.data);
this.total = res.data.totalPage
this.userList = res.data.users
},
// 改变每页显示多少条数据
handleSizeChange(val) {
this.queryInfo.psize = val
// 一定记得改变完要调用方法
this.getUserList()
},
// 改变展示哪一页
handleCurrentChange(val) {
this.queryInfo.pnum = val
this.getUserList()
},
searchUser(){
this.queryInfo.pnum = 1
this.getUserList()
}
}
}
.el-table{
margin-top: 10px;
}
推荐链接
发表评论