使用 element 和 vue 在前端进行分页

使用的场景：

比如说你调用的是别人的接口，你无法再后端进行分页处理，只能在前端进行分页处理，此domo采用element ui+vue

element UI官网
vue官网

说明：小编采用图文详解，做一个灵魂画家

先使用图片解释，在最后面在上前端代码块（代码注释很全）

最终效果图

步骤一：定义属性

• 在 data() { return { } },中定义出属性如图

步骤二：调用接口

• 调用后台接口查询，查询所有出数据，自定义分页方法，进行前端分页

步骤三：自定义分页的方法

• 自定义分页方法，将数据绑定在resultData.RData2上

自定义里面的数据赋值非常重要！！！
username: this.result[key].username,
password: this.result[key].password

最后步骤table中展示

到这里图文详解就完成了，最后我们直接上代码

<template>
  <el-dialog :visible.sync="dialogShow" :title="dialogTitle" width="60%" top="10vh" @close="clearnning">
    <el-row :gutter="10">
      <el-form ref="parameter" :inline="true" :model="parameter" :size="componentSize" label-width="150px" label-position="right">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-form-item
            label="名称"
            prop="name"
            :rules="[{ required: true, message: '名称不能为空'}]"
          >
            <el-input v-model="parameter.name" placeholder="" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-table v-if="resultData.total!=0" :data="resultData.RData2" border :size="componentSize" highlight-current-row>
      <el-table-column label="用户名" prop="username" :show-overflow-tooltip="true" />
      <el-table-column label="统一社会信用代码" prop="password" :show-overflow-tooltip="true" />
    </el-table>

    <pagination
      v-show="resultData.total>0"
      :total="resultData.total"
      :page.sync="resultData.page"
      :limit.sync="resultData.size"
      @pagination="getResultPage"
      />
    <span slot="footer" class="dialog-footer">
      <el-button :loading="loading" :size="componentSize" type="primary" @click="queryInterface">查询</el-button>
      <el-button :size="componentSize" @click="dialogShow = false">取消</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { getNameZzjgdmByFuzzySearch } from '@/api/sjhjjk/dataList'//查询数据的接口封装在js里面（）
import Pagination from '@/components/Pagination'//引入分页插件

export default {
  components: { Pagination },//注册主建
  mixins: [],
  data() {
    return {
      dialogShow: false,//是否展示
      dialogTitle: '',//对话框的名称
      interfaceUrl: '',//接口的URL
      parameter: {//请求参数
        name: ''
      },
      loading: false,//延时加载转圈圈-看官方API
      result: null,//用来装调用后台接口返回的数据
      resultData: {
        total: 0,//总条数
        RData: [],//方便分页处理定义出来的属性--用于数据转成array()
        RData2: [],//最终存储处理完的分页数据
        page: 1,//第一页
        size: 10//一页10条
      }
    }
  },
  computed: {
    componentSize() {
      return this.$store.getters.size
    }
  },
  methods: {
    clearnning() {
      //关闭窗口，将数据清空
      this.loading = false
      this.$refs['parameter'].resetFields()
      this.parameter.name = ''
      this.result = null
      this.resultData.total = 0
    },
    //查询按钮的点击事件
    queryInterface() {
      this.$refs['parameter'].validate((valid) => {//参数校验
        if (valid) {
          this.loading = true
          const name = this.parameter.name
          const url = this.interfaceUrl + name//最后地址
          //调用getNameZzjgdmByFuzzySearch接口访问后台请求数据
          getNameZzjgdmByFuzzySearch(url, this.parameter).then(request => {
            if (request.result.length === 0) {
              this.$message({
                message: '没有查询到相关信息',
                type: 'warning'
              })
              this.result = null
              this.loading = false
              return
            }
            this.loading = false
            this.result = request.result//数据放在result里面
            this.getResultPage()//调用自定义的分页方法
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },

    //自定义分页方法
    async getResultPage() {
      this.resultData.RData = new Array()//设置一个空的Array()以便下面处理
      // 首先计算一共有多少数据
      // 每10个分一页
      // 每一页的数据
      for (var key in this.result) {//便利
        this.resultData.total = parseInt(key)
        // console.log(parseInt(key / 10), key % 10, this.result[key].Name, this.result[key].Zzjgdm)
        // this.resultData.RData[parseInt(key / 10)] [ key % 10] = key

        if (this.resultData.RData[parseInt(key / this.resultData.size)] === undefined) {
          this.resultData.RData[parseInt(key / this.resultData.size)] = new Array()
        }

        this.resultData.RData[parseInt(key / this.resultData.size)][key % this.resultData.size] = {
          //属性赋值---非常重要！！！！
          username: this.result[key].username,
          password: this.result[key].password
        }

      }
      console.log(this.resultData.total)
      console.log(this.resultData.RData)
      this.setResultPage()//调用setResultPage()方法赋值
    },
    setResultPage() {//调用赋值
      //将RData的数据赋给RData2
      this.resultData.RData2 = this.resultData.RData[ this.resultData.page - 1 ]
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

总结

1. 引入插件
2. 定义属性
3. 调用后台接口查询数据
4. 自定义分页方法
5. 在table中显示