vue+Element-ui是实现表格自动翻页轮播功能

<template>
  <div class="main">
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 100%"
    >
      <el-table-column
        v-for="item in tableHeader"
        :key="item"
        :prop="item.key"
        :label="item.name"
        show-overflow-tooltip="true"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next,jumper"
      :total="tableData.length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "dataList",
  data() {
    return {
      val: "",
      tableHeader: [
        {
          name: "日期",
          key: "date"
        },
        {
          name: "姓名",
          key: "name"
        },
        {
          name: "地址",
          key: "address"
        }
      ],
      tableData: [
        {
          date: "2016-05-04",
          name: "王小虎111",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎15",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎222",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎15",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎333",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎15",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎444",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎15",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      pageSize: 2,
      currentPage: 1 //当前页面
    };
  },
  methods: {
    handleSizeChange: function() {},
    handleCurrentChange: function(val) {
      // var val = "";]
      this.currentPage++;
console.log(this.currentPage)
if(this.currentPage > 4){
  this.currentPage=0
  //  this.currentPage++;
}


      // //页面不是第一次进入，当前已经不是第一页，要再加一，进入下一页
      // if (val != "") {
      //   val = val + 1;
      // }
      // //val为空时，说明页面是第一次进入
      // if (val == "") {
      //   val = val + 1;
      // }

      //val大于总页数，就让它重新从第一页开始
    }
  },
  mounted() {
    setInterval(this.handleCurrentChange, 1000);
  }
};
</script>
<style scoped>
.main {
  height: 300px;
}
</style>

实现思路：其实很简单的，不要想复杂化了哦。

首先，拿到当前页码，然后循环++  // this.currentPage++。

再判断当页码大于最后的页码（我写的是死值，参数可以自己改）时候，将页码设置为第一页。

最后，给个定时器，每隔多少秒翻页。

就大功告成啦，赶紧动动小手来试试吧~

光看不练，可不行的哦~