element-ui实现分页效果

element-ui实现分页效果

思路

主要代码就是data.slice((page-1)*pageSize,page*pageSize)

<ul id="ul">
      <li v-for="(item, index) in data.slice((page-1)*pageSize,page*pageSize)" :key="index" @click="list(item.id)">
        <img :src="item.pic" alt="" style="width: 70px" />
        <h1>{{ item.name }}</h1>
      </li>
    </ul>
     <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[2, 5, 10, 20]" 
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.length">    
    </el-pagination>
    //page-sizes这是下拉框可以选择的，每选择一行，要展示多少内容
    //page-size显示当前行的条数
    //total这是显示总共有多少数据，

data() {
    return {
      data: [],//渲染的数据，我没设数据
      pageSize: 2, //显示几条数据
      page: 1, //点击的页数
    };
  },
  methods: {
    handleSizeChange(i) {
      this.pageSize = i;
    },
    handleCurrentChange(i) {
      this.page = i;
    },
    }
  },