<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="container"> <el-table :data="books" height="300" :stripe="true" :border="true"> <el-table-column label="图书编号" prop="id"></el-table-column> <el-table-column label="图书名称" prop="name"></el-table-column> <el-table-column label="图书作者" prop="author"></el-table-column> <el-table-column label="图书价格" prop="price"></el-table-column> <el-table-column label="操作"> <template v-slot:default="data"> <el-button type="primary" icon="el-icon-edit" circle size="mini" ></el-button> <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button> </template> </el-table-column> </el-table> <el-pagination background layout="prev, pager, next" :total="count" :page-size="3" @current-change="changePage"></el-pagination> </div> <script type="text/javascript" src="js/vue.js" ></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el:"#container", data:{ books:[], count:0, pageSize:3, pageNum:1 }, beforeMount:function(){ //使用axios查询图书信息 //axios.get(url).then(fn).catch(fn); axios.get("http://localhost:8080/book/list?pageNum=1&pageSize="+this.pageSize).then(function(res){ vm.count = res.data.data.count; vm.books = res.data.data.data; }); }, methods:{ changePage:function(pn){ this.pageNum = pn; console.log(this.pageNum); axios.get("http://localhost:8080/book/list?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(function(res){ vm.count = res.data.data.count; vm.books = res.data.data.data; }); } } }); </script> </body> </html>