vue + Element-ui table is to achieve automatic page carousel function

<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>

 

Realization of ideas: In fact, very simple, do not want to complicate oh.

First, get current page number, and then loop ++ // this.currentPage ++.

And then determine when the page number greater than the last page number (I write are dead, parameters can change their own) when the page is set to the first page.

Finally, to timers, every how many seconds the next page.

And you're done you, quickly touch of little hands to try it ~

Look not practice, can not oh