Vue user management (add, delete, modify, check) function summary

1. Send query user list data to api request and render form data

• 1. Define the query parameter list objectqueryInfo:{}

  queryInfo: {
    
    
    query: '',  //  查询
    pagenum: 1, //  当前页数
    pagesize: 2,//  当前每页显示多少条数据
  }

• 2. Define userList:[]arrays and totalintegers to store the user data after the query

userList: [],
total: 0,

3. Define the getUserList() function, obtain user data by sending a get request to the api, return the { data: res }result, and res.meta.statusjudge whether the query is successful. After success, pass the res.data.usersuser data to userList:[]an array, and pass the res.data.totaltotal number of queries to an totalinteger

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)
},

• getUserList()4. Note that the method must be started before html rendering

  created() {
    
    this.getUserList()}

• 5. Finally, by :data="userList"dynamically binding the data source and prop="username"binding the field names in the data, the tableform can be rendered

      <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. Binding query data through v-model to query form information

• 1. In the inputinput box, by v-modelbinding the properties of the defined queryInfoobject , it is queryused to pass parameters

  <el-input  placeholder="请输入内容"  v-model="queryInfo.query"></el-input>

• 2. Query user information by binding a defined method in the buttonbutton@clickgetUserList

 <el-button  slot="append"  icon="el-icon-search"  @click="getUserList" ></el-button> 

• 3. Add properties in the inputinput box to clear the query data, and then pass , after clearing the data, the binding method re-query dataclearable@clear="getUserList"getUserList

<el-input  placeholder="请输入内容"   v-model="queryInfo.query"  clearable  @clear="getUserList">

---

3. By changing the Boolean value, to control the opening and cancellation of the Add User dialog box

• 1. Define a addDialogVisibleboolean value to control the display and hide of the add user dialog box, the default is false, not open; true is open

addDialogVisible: false

• 2. buttonBind in the button @click="addDialogVisible = true", change it addDialogVisibleto true, and open the Add User dialog box

<el-button type="primary" @click="addDialogVisible = true"
            >添加用户</el-button
          >

• 3. In the dialogdialog box, by :visible.sync="addDialogVisible"listening addDialogVisibleto whether the boolean value is true, open the add user dialog box, if it is false, close the user dialog box

<el-dialog  title="添加用户"  :visible.sync="addDialogVisible"  width="50%"></el-dialog>

• 4. dialogBind in the cancel button in the dialog box to @click="addDialogVisible = false"close the user dialog box

<el-button @click="addDialogVisible = false">取 消</el-button>

---

4. By dynamically binding current-page and page-size, and then binding trigger events, query how many pieces of data are specified, and perform data paging

• 1. Bind the current-page page number, page-size page number and total query page number through :current-page="queryInfo.pagenum", :page-size="queryInfo.pagesize"and dynamically:total="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. Definitions handleSizeChange(newSize)and handleCurrentChange(newPage)methods to monitor the number of pages and page numbers

// 监听pageSize改变的事件
handleSizeChange(newSize) {
    
    
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
// 监听page页码值改变的事件
handleCurrentChange(newPage) {
    
    
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },