VUE-Element組件（三）VUE分頁

效果圖：

1、頁面：

<template>

  <div class="app-container">
    <el-row class="location-query">
      <el-button type="primary" icon="el-icon-search" @click="fetchData()">查詢</el-button>
    </el-row>
    <el-row class='query-id'>
      <el-input  v-model="pageParam.nickName" placeholder="請輸入暱稱"  @keyup.enter.native="fetchData()"></el-input>
    </el-row>

    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加載中" border fit highlight-current-row>
     
      <el-table-column label="用戶名" min-width="22" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>

      <el-table-column label="暱稱" min-width="18" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.userNickName}}
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="60" align="center">
        <template slot-scope="scope">
        
          <el-button type="danger" size="mini" round @click="deleteProcess(scope.row.id)">刪除</el-button>
          <el-button type="primary" size="mini" round @click="viewSql(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 修改開始 -->
    <el-dialog title="修改用戶信息" :visible.sync="updateView">
      <el-form ref="updateUserDetail" :model="updateProcessDetail" label-width="100px">
        <el-form-item label="用戶賬號">
          <el-input v-model="updateProcessDetail.userName"></el-input>
        </el-form-item>
        <el-form-item label="暱稱">
          <el-input v-model="updateProcessDetail.userNickName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="updateProcess">修改</el-button>
          <el-button @click="updateView=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--修改結束-->




    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParam.pageIndex" :page-sizes="pageSizes" :page-size="pageParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { parseTime } from '../../utils/index.js'

import { getPagerUser } from '@/api/user'
import qs from 'qs'
export default {
  data() {
    return {
    
      // 執行
      reTryView: false,
      // 編輯
      updateView: false,
      updateProcessDetail: {
        id: '',
        name: '',
        displayName: '',
        job: { cronExpression: '', startTime: '', endTime: '' },
        nodeDetails: []
      },

      list: [],
      listLoading: true, // true
      pageSizes: [5, 10, 15],
      total: 0,
      pageParam: {
        pageIndex: 1,
        pageSize: 5,
        nickName:''
      }
    }
  },
  created() {
    this.fetchData()
  },

  filters: {
    parseTime(time) {
      var date = new Date(time)
      return parseTime(date)
    }
  },
  methods: {
   
    handleChange(value) {
      console.log(value)
    },
    // 取消
    calcelSql() {
      this.isSqlView = false
      this.currNodeIndex = 0
    },

    
    fetchData() {
      this.getList()
    },

    handleSizeChange(val) {
      this.pageParam.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageParam.pageIndex = val
      this.getList()
    },
    suspend(jobId) {
      suspend(jobId).then(res => {
        this.getList()
      })
    },
    reStart(jobId) {
      reStart(jobId).then(res => {
        this.getList()
      })
    },
    getList() {
       
      getPagerUser(this.pageParam)
        .then(res => {
          this.listLoading = false
          if (res.data !== null) {
            this.list = res.data.list
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    /**
         * 取消任務重試看板
         */
    cancelRetry() {
      this.reTryView = false
      this.isPartView = false
    },
    /**
         * 任務重試看板
         */
    viewReTryNodes(processId) {
      this.reTryView = true
      this.currentProcessId = processId
      // 獲取節點
      getTaskNodes(processId).then(res => {
        if (res.code === 200) {
          this.dateParts = res.data
          this.isPartView = true
         
        }
      })
    },
    /**
         刪除任務 */
    deleteProcess(processId) {
      this.$confirm('確認刪除？')
        .then(_ => {
          deleteProcess(processId)
            .then(res => {
              if (res.code === 200) {
                this.message('刪除成功')
                this.getList()
              } else {
                this.message(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
        .catch(_ => {})
    },
    /**
         * 任務重試
         */
    taskRetry() {
      this.reTryView = false
      taskRetry(
        this.currentProcessId,
        this.dateParts,
        this.datePartsMap
      ).then(res => {
        if (res.code === 200) {
          this.message('任務重試成功')
        } else {
          this.message(res.msg)
        }
      })
    },

    // 打開編輯頁面
    getUpdateViw(processId) {
      getProcessDetail(processId)
        .then(res => {
          if (res.code === 200) {
            this.updateView = true
            this.updateProcessDetail = res.data

            this.updateProcessDetail.job.startTime = parseTime(
              this.updateProcessDetail.job.startTime
            )
            this.updateProcessDetail.job.endTime = parseTime(
              this.updateProcessDetail.job.endTime
            )
          } else {
            this.message(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

 
   
    // 編輯
    updateProcess() {
      updateProcess(this.updateProcessDetail)
        .then(res => {
          if (res.code === 200) {
            this.message('修改成功')
          } else {
            this.message('修改失敗')
          }
        })
        .catch(err => {
          console.log(err)
        })
      this.updateView = false
    },
    // 打開節點編輯頁面
    nodeDetailInfo(index) {
      this.nodeDetailView = true
      this.currentNode = this.updateProcessDetail.nodeDetails[index]
    },
    message(msg) {
      this.$message({
        type: 'warning',
        message: msg
      })
    }
  }
}
</script>

<style>
.product-new {
    float: left;
    margin-bottom: 15px;
}
.product {
    margin-left: 2%;
    float: left;
}
.product-query {
    float: right;
}
.block {
    margin-bottom: 20px;
    margin-top: 20px;
    float: right;
}
.product-create {
    width: 50%;
    margin-left: 25%;
}
.row-text {
    margin-bottom: 15px;
}
.product-text {
    margin-top: 10px;
    width: 30%;
    float: left;
}
.product-title {
    width: 70%;
    float: left;
}
.query-role,.location-query{
  float: right;
 margin-left: 30px;
}
.query-startTime,.query-endTime,.query-id,.position-status{
    float: right;
    margin-left: 20px;
}
</style>

2、api:

export function getPagerUser(userQuery) {
  return request({
    url: '/user/getPagerUser',
    method: 'post',
    data:userQuery
  })
}