vue+element实现table表格数据量大进行自动翻页操作

背景：主要用于大屏展示系列

技术栈：vue2+element

主要介绍js实现，样式不做介绍
展示的是一页展示7条数据，多余数据实现自动翻页展示
注：代码示例中可以自定义一页展示几条数据和每隔几秒进行自动翻页操作
注：这里的table数据为不带分页的，即全部请求回来的表格数据，自己写方法切割

图例：

上代码：

html中

<el-table :data="tableData" stripe style="width: 100%" max-height="360" header-row-class-name="headerowStyle">
       <el-table-column type="index" width="50" align="center"></el-table-column>
       <el-table-column v-for="(item, index) in tableProp" :key="index" :prop="item.prop":label="item.label" :width="item.width" align="center"></el-table-column>
</el-table>

js中

data(){
	return{
		tableProp: [
        	{
          		prop: "name",
          		label: "姓名",
        	},
        	{
          		prop: "age",
          		label: "年龄",
        	},
      	],
      	tableData:[],
      	interval :null//定时器
	}
},
beforeDestroy(){
	clearInterval(this.interval);//清除定时器
    this.interval = null;
},
methods:{
	//表格数据获取
	getData(){
		//这里进行接口请求，请求到的数据以下用datas模拟
		let datas=[
		  {
            name: "张三",
            age: "16",
          },
          {
            name: "李四",
            age: "18",
          },
          {
            name: "王五",
            age: "10",
          },
          {
            name: "张三",
            age: "16",
          },
          {
            name: "李四",
            age: "18",
          },
          {
            name: "王五",
            age: "10",
          },
          {
            name: "张三",
            age: "16",
          },
          {
            name: "李四",
            age: "18",
          },
          {
            name: "王五",
            age: "10",
          },
		]
		if (datas.length > 7) { //如果数据条数大于7则进行翻页操作
          let ress = this.chunkArray(datas, 7);//调用chunkArray方法，将datas切割成7条7条的数据
          let i = 0;
          this.tableData = ress[i];
          this.interval = setInterval(() => { //定时器每5秒给tableData赋值一次
            if (i == ress.length - 1) {
              i = 0;
              this.tableData = ress[i];
            } else {
              i++;
              this.tableData = ress[i];
            }
          }, 5000);
        } else { //小于7不进行翻页操作
          this.tableData = datas;
          clearInterval(this.interval);
          this.interval = null;
        }	
	},
	 // 数据处理
    chunkArray(array, chunkSize) { //array：数组，chunkSize每页展示条数，即数组一组展示几个
      let res = [];
      for (let i = 0; i < array.length; i += chunkSize) {
        res.push(array.slice(i, i + chunkSize));
      }
      return res;
    },
}