列表分页vue element

在使用vue中使用element的组件进行分页操作

<el-pagination
      class="tc"
      layout="total,prev, pager, next,jumper"  /*分页格式*/
      :total="total"   						/*总数多少也，让后台返回一个值*/                    
      :page-size="length"                  /*每页的数据量*/ 
      :current-page="page"                 /*当前第几页*/ 
      prev-text="上一页"
      next-text="下一页"
      @current-change="handleCurrentChange"
></el-pagination>
<script>
import { usersList } from "@/api/User"; //接口
export default {
data() {
    return {
      datalist：[]
      total:0,
      page: 1,
      length: 40,
    };
}
activated() {
    this.getProblemList();
 },
methods:{
    // 点击分页按钮
    handleCurrentChange(page){
      var that=this;
      that.page=page;
      that.getProblemList() 
    },
    //请求数据
    getProblemList() {
      let data = {
        page:this.page,
        length:this.length
      }
      usersList.getProblemList(data).then(res => {
        this.datalist = res.data;
        this.total=res.sun
      });
    },
}
}

</script>