<template>
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[10, 20, 30, 40, 50]"
:page-size.sync="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="parseInt(total)"
/>
</template>
<script>
<script>
import axios from "axios";
export default {
data() {
return {
tableData: [],
multipleSelection: [],
searchForm: {
stationName: "",
status: "",
},
pageNum: 1,
pageSize: 10,
total: null,
rows: [],
};
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
getData() {
axios
.get("http://localhost:8989/system/station/list", {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
},
})
.then((res) => {
this.tableData = res.data.data.rows;
this.total = res.data.data.total;
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleSizeChange(val) {
this.pageSize = val;
this.getData();
},
handleCurrentChange(val) {
this.pageNum = val;
this.getData();
},
onSubmit(searchForm) {
this.getData();
},
},
mounted() {
this.getData();
},
};
</script>
使用axios+elementui完成分页查询功能
最新推荐文章于 2024-08-23 20:23:30 发布