<div style="padding: 10px 0">
<el-pagination
:current-page="page.pageNum"
:page-size="page.pageSize"
:page-sizes="[2, 5, 10, 20]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<script>
import {reactive, ref, toRefs} from "vue";
import axios from 'axios';
export default {
setup() {
//data为表数据
const data = reactive({
userInfo: [
{
uid: 1,
username: "星星",
account: "123",
password: "123",
},
{
uid: 2,
username: "月亮",
account: "456",
password: "456",
},
],
});
//table当前分页参数
const total = ref(0) //总条数
const page = reactive({//配置对应的查询参数
pageNum: 1,
pageSize: 2,
});
// 向后端获取表格数据(分页)
const getList = () => {
axios.get('/getList',{
pageNum : page.pageNum,
pageSize : page.pageSize
}).then(res => {
console.log(res.data.data)
data.userInfo = res.data.data
total.value = res.data.total
})
};
getList();
const handleSizeChange = (val) => {
page.pageSize = val
console.log(val)
getList();
}
const handleCurrentChange = (val) => {
page.pageNum = val
console.log(val)
getList();
}
return {
...toRefs(data),
...method,
total,
page,
getList,
handleSizeChange,
handleCurrentChange
};
},
};
</script>