vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue用户管理

Vue用户管理的增删改查功能详解

作者:jasmine_qiqi

这篇文章主要为大家详细介绍了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()
    },

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!  

您可能感兴趣的文章:
阅读全文