《web应用技术》第八次课后作业

PageBean

peot

result

分页html

<p align="center">
    <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pageSize"
            :total="total">
    </el-pagination>
</p>

<script>
  new Vue({
    el:"#app",
    data: {
      search: '',
      currentPage: 1,
      pageSize: 10,
      total: 50,
      tableData: []
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      },
 
      findAll() {
 
        var url = `/peot`
        axios.get(url)
                .then(res =>{
                  this.tableData = res.data.data;
                  console.log(tableData);
                })
                .catch(error=>{
                  console.error(error);
                })
 
      }
 
    },
    created(){
      this.findAll();
    }
 
  })
 
 
</script>