vue中表格的懒加载与组件内的路由监听

vue中表格的懒加载与组件内的路由监听

在我们平时开发中大多用分页方式来显示表格数据，但有时会需要用懒加载的方式显示，所以讲一下具体的实现过程。

主要是先获得表格的dom元素，然后监听滚动条，当滚动条快到页面底部时加载下一页。

具体实例

vue页面

<template>
  <div class="app-container">
    <div class="the-container">
      <el-table
        ref="tableRef"
        v-adaptive="{bottomOffset: 85}"
        :data="tableData"
        height="50px"
      >
        <el-table-column
          type="index"
          width="50"
        />
        <el-table-column
          prop="name"
          label="姓名"
          show-overflow-tooltip
        />
        <el-table-column
          prop="age"
          label="年龄"
          show-overflow-tooltip
        />
        <el-table-column
          prop="gender"
          label="性别"
          show-overflow-tooltip
        />
        <el-table-column
          prop="phone"
          label="电话号码"
          show-overflow-tooltip
        />
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import jsonData from './data.json'
// 通过json-generator生成的json数据，用来模拟后台数据
export default {
  name: 'Table',
  components: {},
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalPage: 0
    }
  },
  // 路由监控：进入组件之前被调用
  beforeRouteEnter(to, from, next) {
    console.log('enter')
    next()
  },
  // 路由监控：离开组件时被调用
  beforeRouteLeave(to, form, next) {
    console.log(jsonData.length)
    console.log('leave')
    next()
  },
  // created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  created() {
    console.log(jsonData.length)
    // 得到总页数
    this.totalPage = jsonData.length / this.pageSize
    this.loadData()
  },
  // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
  mounted() {
    this.tableListener()
  },
  methods: {
    loadData() {
      console.log(this.currentPage)
      const data = jsonData.slice((this.currentPage - 1) * this.pageSize, ((this.currentPage - 1) * this.pageSize + 10))
      // arrayObject.slice(start,end)返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
      this.tableData = this.tableData.concat(data)
      // 用于连接两个或多个数组，仅会返回被连接数组的一个副本，arrayObject.concat(arrayX,arrayX,……,arrayX) 。
    },
    tableListener() {
      console.log('监听表格dom对象的滚动事件')
      const _this = this
      const dom = _this.$refs.tableRef.bodyWrapper
      dom.addEventListener('scroll', function() {
        const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight
        // 元素的总高度
        console.log('scrollHeight', dom.scrollHeight)
        // 当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离
        console.log('scrollTop', dom.scrollTop)
        // 可视区域的大小
        console.log('clientHeight', dom.clientHeight)
        // 滚动条距离底部的距离
        console.log('scroll', scrollDistance)
        // 当滚轮快到底部时加载下一批数据
        if (scrollDistance <= 0.4) {
          // 当前页数小于总页数就请求
          if (_this.currentPage < _this.totalPage) {
            // 当前页数自增
            _this.currentPage++
            // 请求接口的代码
            _this.loadData()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  height: 100%;
  background-color: #f1f1f1;
}
.the-container{
  height: 100%;
  padding: 20px;
  background-color: #fff;
}
</style>

json数据

[
  {
    "_id": "6160f8f79c19e1c89d1e5886",
    "index": 0,
    "age": 21,
    "name": "Jacobs Patton",
    "gender": "male",
    "phone": "[phone]",
    "address": "749 Guernsey Street, Bourg, Kentucky, 3436"
  },
  {
    "_id": "6160f8f7a836b60dcf7fad6e",
    "index": 1,
    "age": 30,
    "name": "King Brewer",
    "gender": "male",
    "phone": "[phone]",
    "address": "813 Billings Place, Westwood, Massachusetts, 7882"
  },
  {
    "_id": "6160f8f70523a7ead275a3ae",
    "index": 2,
    "age": 25,
    "name": "Margery Stephens",
    "gender": "female",
    "phone": "[phone]",
    "address": "456 Knapp Street, Shawmut, Puerto Rico, 6922"
  },
  {
    "_id": "6160f8f7cce319acd067017a",
    "index": 3,
    "age": 27,
    "name": "Liliana Mcdowell",
    "gender": "female",
    "phone": "[phone]",
    "address": "951 Miami Court, Delshire, South Carolina, 840"
  },
  {
    "_id": "6160f8f78da1b322b76df31a",
    "index": 4,
    "age": 37,
    "name": "Cooper Bender",
    "gender": "male",
    "phone": "[phone]",
    "address": "783 Bragg Court, Glasgow, Maine, 3606"
  },
  {
    "_id": "6160f8f7cf6cfbc34cfd0496",
    "index": 5,
    "age": 39,
    "name": "Benjamin Page",
    "gender": "male",
    "phone": "[phone]",
    "address": "929 Autumn Avenue, Jardine, Minnesota, 7102"
  },
  {
    "_id": "6160f8f7fc090d48d7a1faf5",
    "index": 6,
    "age": 28,
    "name": "Roxanne Kelly",
    "gender": "female",
    "phone": "[phone]",
    "address": "625 Saratoga Avenue, Cliff, California, 9091"
  },
  {
    "_id": "6160f8f76b9d9941dc55bef7",
    "index": 7,
    "age": 28,
    "name": "Helga Cain",
    "gender": "female",
    "phone": "[phone]",
    "address": "999 Lois Avenue, Roberts, North Dakota, 9991"
  },
  {
    "_id": "6160f8f7f2e5ce10b4aba830",
    "index": 8,
    "age": 22,
    "name": "Ewing Battle",
    "gender": "male",
    "phone": "[phone]",
    "address": "103 Conselyea Street, Edgar, Georgia, 5208"
  },
  {
    "_id": "6160f8f7572d544d21ffe7e4",
    "index": 9,
    "age": 32,
    "name": "Alice Stanley",
    "gender": "female",
    "phone": "[phone]",
    "address": "233 Sackman Street, Healy, Maryland, 7322"
  },
  {
    "_id": "6160f8f787f40a9772cc2271",
    "index": 10,
    "age": 35,
    "name": "Mckee Baxter",
    "gender": "male",
    "phone": "[phone]",
    "address": "540 Farragut Place, Comptche, Washington, 4214"
  },
  {
    "_id": "6160f8f7114841171852951c",
    "index": 11,
    "age": 28,
    "name": "Donaldson Camacho",
    "gender": "male",
    "phone": "[phone]",
    "address": "107 Heath Place, Libertytown, Kansas, 5879"
  },
  {
    "_id": "6160f8f74fde39be6ab55d8f",
    "index": 12,
    "age": 24,
    "name": "Warren Sexton",
    "gender": "male",
    "phone": "[phone]",
    "address": "540 Matthews Place, Gorst, Wyoming, 6779"
  },
  {
    "_id": "6160f8f7cf1a4a91a6656e59",
    "index": 13,
    "age": 36,
    "name": "Sonja Douglas",
    "gender": "female",
    "phone": "[phone]",
    "address": "942 Interborough Parkway, Allendale, Utah, 2320"
  },
  {
    "_id": "6160f8f7f4b3d93738800155",
    "index": 14,
    "age": 23,
    "name": "Alvarez Mathews",
    "gender": "male",
    "phone": "[phone]",
    "address": "537 Gerald Court, Biehle, Michigan, 6949"
  },
  {
    "_id": "6160f8f7ce22a9de7b69efbf",
    "index": 15,
    "age": 25,
    "name": "Salazar Frye",
    "gender": "male",
    "phone": "[phone]",
    "address": "718 Norwood Avenue, Nicholson, Missouri, 828"
  },
  {
    "_id": "6160f8f799cfabfbb0031dd6",
    "index": 16,
    "age": 23,
    "name": "Bettie Harmon",
    "gender": "female",
    "phone": "[phone]",
    "address": "784 Lorimer Street, Jacumba, Florida, 2160"
  },
  {
    "_id": "6160f8f7452d5d379553a745",
    "index": 17,
    "age": 22,
    "name": "Summers Hicks",
    "gender": "male",
    "phone": "[phone]",
    "address": "272 Summit Street, Rehrersburg, Montana, 981"
  },
  {
    "_id": "6160f8f72f49f0b6cba8b102",
    "index": 18,
    "age": 33,
    "name": "Hewitt Hodge",
    "gender": "male",
    "phone": "[phone]",
    "address": "702 Gaylord Drive, Orovada, Alabama, 8892"
  },
  {
    "_id": "6160f8f7af150c460dcc1cfa",
    "index": 19,
    "age": 33,
    "name": "Melva Cantu",
    "gender": "female",
    "phone": "[phone]",
    "address": "667 Crosby Avenue, Broadlands, Ohio, 3589"
  },
  {
    "_id": "6160f8f79e9c4228f129c26d",
    "index": 20,
    "age": 39,
    "name": "Randolph Webster",
    "gender": "male",
    "phone": "[phone]",
    "address": "204 Gilmore Court, Needmore, Arkansas, 5553"
  },
  {
    "_id": "6160f8f7bbe2d0cce3a25bc2",
    "index": 21,
    "age": 38,
    "name": "Ericka Maddox",
    "gender": "female",
    "phone": "[phone]",
    "address": "807 Midwood Street, Oberlin, American Samoa, 8272"
  },
  {
    "_id": "6160f8f71b84bb424a9a95bd",
    "index": 22,
    "age": 23,
    "name": "Kemp Roach",
    "gender": "male",
    "phone": "[phone]",
    "address": "742 Troy Avenue, Laurelton, Virgin Islands, 6484"
  },
  {
    "_id": "6160f8f707b4a60949b8940f",
    "index": 23,
    "age": 30,
    "name": "Marta Church",
    "gender": "female",
    "phone": "[phone]",
    "address": "162 Burnett Street, Twilight, New Mexico, 7737"
  },
  {
    "_id": "6160f8f70e14ccc7b7909d11",
    "index": 24,
    "age": 39,
    "name": "Janna Irwin",
    "gender": "female",
    "phone": "[phone]",
    "address": "579 Hall Street, Seymour, Mississippi, 4445"
  },
  {
    "_id": "6160f8f7c0d037a2b5971b7e",
    "index": 25,
    "age": 34,
    "name": "Estelle Ochoa",
    "gender": "female",
    "phone": "[phone]",
    "address": "514 Myrtle Avenue, Limestone, West Virginia, 3951"
  },
  {
    "_id": "6160f8f73a216daced9e4199",
    "index": 26,
    "age": 20,
    "name": "Stacie Lloyd",
    "gender": "female",
    "phone": "[phone]",
    "address": "698 Dooley Street, Frizzleburg, Connecticut, 5183"
  },
  {
    "_id": "6160f8f7729bdb03677121be",
    "index": 27,
    "age": 23,
    "name": "Kaufman Kidd",
    "gender": "male",
    "phone": "[phone]",
    "address": "524 Fairview Place, Devon, Iowa, 9978"
  },
  {
    "_id": "6160f8f7bbbcc569748302aa",
    "index": 28,
    "age": 24,
    "name": "Golden Jenkins",
    "gender": "male",
    "phone": "[phone]",
    "address": "183 Wyona Street, Bynum, Federated States Of Micronesia, 6058"
  },
  {
    "_id": "6160f8f7d22270d6a54a1611",
    "index": 29,
    "age": 22,
    "name": "Valarie Harris",
    "gender": "female",
    "phone": "[phone]",
    "address": "846 Jackson Street, Rosedale, Nevada, 9353"
  },
  {
    "_id": "6160f8f7b8f3982d5e9a424b",
    "index": 30,
    "age": 20,
    "name": "Courtney Conley",
    "gender": "female",
    "phone": "[phone]",
    "address": "265 Kensington Street, Inkerman, Palau, 2322"
  },
  {
    "_id": "6160f8f70ab7e1d40be3437b",
    "index": 31,
    "age": 24,
    "name": "Morgan Horton",
    "gender": "female",
    "phone": "[phone]",
    "address": "860 Garden Street, Eggertsville, North Carolina, 9713"
  },
  {
    "_id": "6160f8f778560b290676afcd",
    "index": 32,
    "age": 32,
    "name": "Harrington Chapman",
    "gender": "male",
    "phone": "[phone]",
    "address": "472 Victor Road, Oretta, New York, 3144"
  },
  {
    "_id": "6160f8f7f4cafc2446adbe08",
    "index": 33,
    "age": 32,
    "name": "Pamela Freeman",
    "gender": "female",
    "phone": "[phone]",
    "address": "729 Thornton Street, Brazos, Oregon, 6284"
  },
  {
    "_id": "6160f8f7d281df25cb507c2b",
    "index": 34,
    "age": 25,
    "name": "Florine Clemons",
    "gender": "female",
    "phone": "[phone]",
    "address": "433 Franklin Street, Ezel, Nebraska, 8765"
  },
  {
    "_id": "6160f8f74706724de86420b5",
    "index": 35,
    "age": 38,
    "name": "Letha Smith",
    "gender": "female",
    "phone": "[phone]",
    "address": "724 Huron Street, Gratton, Illinois, 8334"
  },
  {
    "_id": "6160f8f707cf088bbb6c5d0e",
    "index": 36,
    "age": 26,
    "name": "Russell Flowers",
    "gender": "male",
    "phone": "[phone]",
    "address": "611 Beadel Street, Lisco, South Dakota, 3815"
  },
  {
    "_id": "6160f8f7aefbbbf2c51a2cc7",
    "index": 37,
    "age": 38,
    "name": "Jeri Pace",
    "gender": "female",
    "phone": "[phone]",
    "address": "753 Opal Court, Forbestown, Texas, 122"
  },
  {
    "_id": "6160f8f7cb66e61608d09cb2",
    "index": 38,
    "age": 25,
    "name": "Ora Buckley",
    "gender": "female",
    "phone": "[phone]",
    "address": "716 Rugby Road, Sugartown, Rhode Island, 2177"
  },
  {
    "_id": "6160f8f74f6d5f050f6bdc73",
    "index": 39,
    "age": 40,
    "name": "Sandra Jennings",
    "gender": "female",
    "phone": "[phone]",
    "address": "979 Clinton Street, Bordelonville, Delaware, 4767"
  },
  {
    "_id": "6160f8f7712eeb83b9c05078",
    "index": 40,
    "age": 33,
    "name": "Kris Stevens",
    "gender": "female",
    "phone": "[phone]",
    "address": "101 Flatlands Avenue, Hebron, Tennessee, 2545"
  },
  {
    "_id": "6160f8f7011f3f5baba9122c",
    "index": 41,
    "age": 39,
    "name": "Parks Hansen",
    "gender": "male",
    "phone": "[phone]",
    "address": "817 Harden Street, Sisquoc, Marshall Islands, 2768"
  },
  {
    "_id": "6160f8f7fe010a1a9dbac0c6",
    "index": 42,
    "age": 25,
    "name": "Nixon Hendrix",
    "gender": "male",
    "phone": "[phone]",
    "address": "748 Schenectady Avenue, Calvary, New Jersey, 7598"
  },
  {
    "_id": "6160f8f75deac65b3af072b4",
    "index": 43,
    "age": 28,
    "name": "Gordon Webb",
    "gender": "male",
    "phone": "[phone]",
    "address": "795 Berkeley Place, Nash, Alaska, 4428"
  },
  {
    "_id": "6160f8f756e39aeaff0f95c2",
    "index": 44,
    "age": 20,
    "name": "Robyn Vargas",
    "gender": "female",
    "phone": "[phone]",
    "address": "298 Boardwalk , Carbonville, Hawaii, 1747"
  },
  {
    "_id": "6160f8f786b54a089bfd8f75",
    "index": 45,
    "age": 35,
    "name": "Peggy Daugherty",
    "gender": "female",
    "phone": "[phone]",
    "address": "488 Chapel Street, Winston, Indiana, 5497"
  },
  {
    "_id": "6160f8f7235bd0bb96a2c42b",
    "index": 46,
    "age": 30,
    "name": "Rosetta Kline",
    "gender": "female",
    "phone": "[phone]",
    "address": "636 King Street, Hickory, Colorado, 5712"
  },
  {
    "_id": "6160f8f7c631499cb2121894",
    "index": 47,
    "age": 40,
    "name": "Kelley Brennan",
    "gender": "male",
    "phone": "[phone]",
    "address": "994 Nassau Avenue, Dola, Northern Mariana Islands, 5892"
  },
  {
    "_id": "6160f8f77eb0f8b207694a45",
    "index": 48,
    "age": 21,
    "name": "Lea Espinoza",
    "gender": "female",
    "phone": "[phone]",
    "address": "312 Brooklyn Road, Martell, Virginia, 5562"
  },
  {
    "_id": "6160f8f7d4438894af39f17b",
    "index": 49,
    "age": 26,
    "name": "Tyler Pierce",
    "gender": "male",
    "phone": "[phone]",
    "address": "156 Cumberland Walk, Goldfield, District Of Columbia, 3642"
  },
  {
    "_id": "6160f8f767a863329d076d50",
    "index": 50,
    "age": 39,
    "name": "Landry Wilkerson",
    "gender": "male",
    "phone": "[phone]",
    "address": "473 Brigham Street, Derwood, Guam, 3349"
  },
  {
    "_id": "6160f8f737093e1c3230f7f0",
    "index": 51,
    "age": 22,
    "name": "Lizzie Warren",
    "gender": "female",
    "phone": "[phone]",
    "address": "281 Stillwell Avenue, Elliston, Pennsylvania, 9404"
  },
  {
    "_id": "6160f8f7f28f61decfe739e6",
    "index": 52,
    "age": 38,
    "name": "Julianne Oneill",
    "gender": "female",
    "phone": "[phone]",
    "address": "294 Folsom Place, Naomi, Louisiana, 3203"
  },
  {
    "_id": "6160f8f73db10db93b1b8dbc",
    "index": 53,
    "age": 27,
    "name": "Autumn Norman",
    "gender": "female",
    "phone": "[phone]",
    "address": "498 Lincoln Avenue, Epworth, Arizona, 235"
  },
  {
    "_id": "6160f8f7c526a040114308da",
    "index": 54,
    "age": 30,
    "name": "Clayton Colon",
    "gender": "male",
    "phone": "[phone]",
    "address": "696 Nassau Street, Fidelis, Vermont, 4996"
  },
  {
    "_id": "6160f8f714d67fc8658fb481",
    "index": 55,
    "age": 30,
    "name": "Margo Fischer",
    "gender": "female",
    "phone": "[phone]",
    "address": "228 Livingston Street, Fruitdale, Wisconsin, 6407"
  }
]

json数据是由json创建器生成的。网址为：https://www.json-generator.com/#

目的是模拟接收后台的数据，如果觉得数据太多可以删掉一些，想要改数据的话，可以到上面的网址自行创建。

路由监控

当一个页面跳转到另一个页面时，我想要让之前的页面的数据初始化，这时我们就需要路由监控

由于是针对一个页面，这里只讲组件内的路由监控

组件内的路由监控有三个方法
//进入组件之前被调用，此时不能用this.
beforeRouterEnter(to, from, next){
	...
	next()
}		
//当路由发生变化，组件再次被调用时
beforeRouterUpdate(to, from, next){
	...
	next()
}	
//离开组件时被调用
beforeRouterLeave(to, from, next){
	...
	next()
}
to: 路由对象，即将进入的路由对象
from: 路由对象，当前正要离开的路由对象
next: 方法 必须调用，无参为跳转到下一个钩子函数，有参(路径‘/’)跳转到不同地址