Vue用戶管理的增刪改查功能詳解

更新時間：2022年03月24日 15:44:14 作者：jasmine_qiqi

這篇文章主要為大家詳細介紹了Vue用戶管理的增刪改查功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1、向api請求發(fā)出查詢用戶列表數據，渲染表單數據
2、通過v-model綁定查詢數據，進行表單信息查詢
3、通過改變布爾值，來控制打開取消添加用戶對話框
4、通過動態(tài)綁定current-page和page-size，再綁定觸發(fā)事件，查詢指定多少條數據，進行數據分頁
總結

1、向api請求發(fā)出查詢用戶列表數據，渲染表單數據

1、定義查詢參數列表對象queryInfo:{}

  queryInfo: {
    query: '',  //  查詢
    pagenum: 1, //  當前頁數
    pagesize: 2,//  當前每頁顯示多少條數據
  }

2、定義userList:[]數組，和total整數，來存放查詢后的用戶數據

userList: [],
total: 0,

3、定義getUserList()函數，通過向api發(fā)出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"動態(tài)綁定數據源，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="狀態(tài)"> </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變?yōu)閠rue，打開添加用戶對話框

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

3、在dialog對話框中通過:visible.sync="addDialogVisible"監(jiān)聽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、通過動態(tài)綁定current-page和page-size，再綁定觸發(fā)事件，查詢指定多少條數據，進行數據分頁

1、通過:current-page="queryInfo.pagenum"、:page-size="queryInfo.pagesize"和:total="total"動態(tài)綁定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)方法來監(jiān)聽頁條數和頁碼

// 監(jiān)聽pageSize改變的事件
handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
// 監(jiān)聽page頁碼值改變的事件
handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },