vue+eleemnt-ui 对table的数据--数组实现伪分页

效果展示

表单代码

  <el-table
            :data="bannerData"
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            stripe
            size="small"
            style="width: 100%;">
            <el-table-column
              type="selection"
              header-align="center"
              align="center"
              width="50">
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="序号"
              :formatter="(row, column, cellValue, index)=>{return index+1+parseInt(this.pageIndex-1)*parseInt(this.pageSize)}"
              width="50">
            </el-table-column>
            <el-table-column
              prop="fInstrumentId"
              header-align="center"
              align="center"
              label="设备设施编号">
            </el-table-column>
            <el-table-column
              prop="fName"
              header-align="center"
              align="center"
              label="设备设施名称">
            </el-table-column>
            <el-table-column
              prop="fNextVerificationDate"
              header-align="center"
              align="center"
              label="下次检定日期">
            </el-table-column>
            <el-table-column
              prop="fVerificationCycle"
              header-align="center"
              align="center"
              label="检定周期">
            </el-table-column>
            <el-table-column
              prop="fDepartment"
              header-align="center"
              align="center"
              label="管辖部门">
            </el-table-column>
       
            <el-table-column
              prop="fVerificationDepartment"
              header-align="center"
              align="center"
              label="设置检定人">
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="150"
              label="操作">
              <template slot-scope="scope">
                <el-button  type="text" size="small" :disabled="target">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="sizeChangeHandle"
            :current-page="pageNum"
            :total="total7"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize7"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="bannerGoPage"
          >
          </el-pagination>

export default {

data () {
    return {

      pageNum: 1,
      pageSize7: 5,
      total7: 0,
      bannerData: [], // 分页数据
      bannerDataList: [], // 全部数据

        }    
     }，

  methods: {

  addFacilityList () {
      this.facility = false
      if (this.dataListSelectionsFacility[0]) {
        this.dataListSelectionsFacility.forEach((c) => {
          c.fInstrumentId = c.fId
          // c.fId = ''
          c.fPreviousVerificationDate = new Date(c.fVerificationDate).format('yyyy-MM-dd HH:mm:ss')
          if (!c.target) {
            this.dataList.push(c)


//上面8行代码可忽略，获取数据到下面list即可
            this.bannerDataList= this.dataList
            this.bannerData = this.bannerDataList.slice((this.pageNum - 1) * this.pageSize7, this.pageNum * this.pageSize7) //进行对数据进行分页处理
            this.total7 = this.bannerDataList.length
          }
        })
      }
    },
    bannerGoPage(currentPage) {
      this.pageNum = currentPage
      this.bannerData = this.bannerDataList.slice((this.pageNum - 1) * this.pageSize7, this.pageNum * this.pageSize7)
    },

    // 每页数
    sizeChangeHandle (val) {
      this.pageSize7 = val
      this.pageNum = 1
      this.bannerData = this.bannerDataList.slice((this.pageNum - 1) * this.pageSize7, this.pageNum * this.pageSize7)
    },
    //如果table有删除操作
    handleRemove(index, data) {
      const idx = index + (this.pageNum - 1) * this.pageSize7 // 获取下标
      this.bannerDataList.splice(idx, 1) // 删除操作.
      this.total7 = this.bannerDataList.length
      // this.bannerData = this.bannerDataList.slice((this.pageNum - 1) * this.pageSize7) // 进行分页处理
      this.bannerData = this.bannerDataList.slice((this.pageNum - 1) * this.pageSize7, this.pageNum * this.pageSize7)
      if (this.bannerData.length === 0) {
        this.bannerGoPage(this.pageNum - 1)
      }
    },



}
    
    }

内容参考：https://www.cnblogs.com/2001-/p/13042341.html