快捷導(dǎo)航

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

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

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

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

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

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

  queryInfo: {
    query: '',  //  查詢
    pagenum: 1, //  當(dāng)前頁數(shù)
    pagesize: 2,//  當(dāng)前每頁顯示多少條數(shù)據(jù)
  }

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

userList: [],
total: 0,

3、定義getUserList()函數(shù)，通過向api發(fā)出get請求獲取用戶數(shù)據(jù)，返回{ data: res }結(jié)果，通過res.meta.status判斷是否查詢成功，成功之后，把res.data.users用戶數(shù)據(jù)傳給userList:[]數(shù)組，把res.data.total查詢總數(shù)傳給total整數(shù)

async getUserList() {
  const { data: res } = await this.$http.get('users', {
    params: this.queryInfo,
  })
  if (res.meta.status !== 200) return this.$message.error('數(shù)據(jù)獲取失敗')
  this.userList = res.data.users
  this.total = res.data.total
  console.log(res)
},

4、注意，在html渲染前就要啟動(dòng)getUserList()方法

  created() {this.getUserList()}

5、最后，通過:data="userList"動(dòng)態(tài)綁定數(shù)據(jù)源，prop="username"綁定數(shù)據(jù)中的字段名，即可渲染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綁定查詢數(shù)據(jù)，進(jìn)行表單信息查詢

1、在input輸入框中通過v-model綁定已經(jīng)定義好的queryInfo對象的query屬性，用來傳參

  <el-input  placeholder="請輸入內(nèi)容"  v-model="queryInfo.query"></el-input>

2、在button按鈕中通過@click綁定已經(jīng)定義好的getUserList方法，來查詢用戶信息

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

3、在input輸入框中添加clearable屬性，用來清除查詢數(shù)據(jù)，再通過@clear="getUserList"，清除數(shù)據(jù)之后，綁定getUserList方法重新查詢數(shù)據(jù)

<el-input  placeholder="請輸入內(nèi)容"   v-model="queryInfo.query"  clearable  @clear="getUserList">

3、通過改變布爾值，來控制打開取消添加用戶對話框

1、定義addDialogVisible布爾值來控制添加用戶對話框的顯示與隱藏，默認(rèn)為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，關(guān)閉用戶對話框

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

4、在dialog對話框中的取消按鈕中綁定@click="addDialogVisible = false"，關(guān)閉用戶對話框

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

4、通過動(dòng)態(tài)綁定current-page和page-size，再綁定觸發(fā)事件，查詢指定多少條數(shù)據(jù)，進(jìn)行數(shù)據(jù)分頁

1、通過:current-page="queryInfo.pagenum"、:page-size="queryInfo.pagesize"和:total="total"動(dòng)態(tài)綁定current-page頁條數(shù)、page-size頁碼和total查詢頁數(shù)

  <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)聽頁條數(shù)和頁碼

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