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ボタンをバインドし、 true@click="addDialogVisible = true"に変更しaddDialogVisibleて、[ユーザーの追加]ダイアログボックスを開きます。

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

• 3.dialogダイアログボックスで、ブール値がtrueかどうかを:visible.sync="addDialogVisible"リッスンaddDialogVisibleして、[ユーザーの追加]ダイアログボックスを開きます。falseの場合は、ユーザーダイアログボックスを閉じます。

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

• 4.dialogダイアログボックスのキャンセルボタンでバインドして@click="addDialogVisible = false"、ユーザーダイアログボックスを閉じます

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

---

4.現在のページとページサイズを動的にバインドしてからトリガーイベントをバインドすることにより、指定されているデータの数を照会し、データページングを実行します

• 1.現在のページのページ番号、ページサイズのページ番号、および合計クエリページ番号をを介し:current-page="queryInfo.pagenum"て動的にバインド:page-size="queryInfo.pagesize"します: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.ページ数とページ番号を監視するための定義handleSizeChange(newSize)と方法handleCurrentChange(newPage)

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