分页组件使用
<div class="demo-pagination-block">
<el-pagination
v-model:current-page="dataVo.pageNum"
v-model:page-size="dataVo.pageSize"
:page-sizes="[100, 200, 300, 400]"
:small="small"
:disabled="disabled"
background="background"
layout="total, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> 1. - `<div class="demo-pagination-block">` 是一个用于展示分页组件的容器。
2.- `<el-pagination>` 是 Element UI 提供的分页组件，可以实现分页功能。
3. - `v-model:current-page="dataVo.pageNum"` 表示将 `dataVo.pageNum` 的值绑定到当前页数，通过 `v-model` 双向绑定，即可实现当用户点击页码时，自动更新 `dataVo.pageNum` 的值。
4. - `v-model:page-size="dataVo.pageSize"` 表示将 `dataVo.pageSize` 的值绑定到每页显示数量，同样通过 `v-model` 双向绑定。
5. - `:page-sizes="[100, 200, 300, 400]"` 是一个数组，表示用户可以选择的每页显示数量的选项。
- `:small="small"` 表示是否使用小型分页样式，`small` 是一个变量。
6. - `:disabled="disabled"` 表示是否禁用分页组件，`disabled` 是一个变量。
7. - `background="background"` 表示是否使用背景色，默认为透明。
8. - `layout="total, prev, pager, next, jumper"` 表示分页组件内部布局的顺序。
9. - `:total="total"` 表示总共有多少条记录。
10. - `@size-change="handleSizeChange"` 是一个事件监听器，当用户改变每页显示数量时，会执行 `handleSizeChange` 方法。
11.- `@current-change="handleCurrentChange"` 是一个事件监听器，当用户改变当前页数时，会执行 `handleCurrentChange` 方法。
script标签中
<script setup>
import { ref, nextTick, onMounted, onUnmounted, reactive , getCurrentInstance } from 'vue';
import { getStandardList, getList, addStandardList } from '@/api/template/index'
import { useRouter } from 'vue-router'
const router = useRouter();
const { proxy } = getCurrentInstance()
onMounted(() => {
getTemplateFn()
});
// 获取数据的数据
const dataVo = reactive(
{
template: '',
standard:'',
pageSize:10,
pageNum:1,
}
);
// 条数
const total = ref(0)
// 分页方法 触发上一页下一页方法时 将当前页 当前条数赋予设定的变量 并执行重新获取数据的方法
const handleSizeChange = (val) => {
dataVo.pageSize = val
getTemplateFn()
}
const handleCurrentChange = (val) => {
dataVo.pageNum = val
getTemplateFn()
}
// 表格数据
let tableData = ref([]);
// 获取表格数据
function getTemplateFn() {
//执行获取数据的请求
getStandardList(dataVo).then(res => {
console.log(res);
tableData.value = res.data.data
//将后台返回的总条数赋予设置的条数变量
total.value = res.data.count
})
};
</script>二, 序号自增
<el-table-column label="序号" align="center" type="index" width="100">
<template #default="scope">
<span>{{ (dataVo.pageNum - 1) * dataVo.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>//完整代码
<template>
<div class="template-box">
<!-- 表格 -->
<el-table :data="tableData" border style="width: 100%" :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :fit="true">
<el-table-column label="序号" align="center" type="index" width="100">
<template #default="scope">
<span>{{ (dataVo.pageNum - 1) * dataVo.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column prop="templateName" label="基础模板名称" show-overflow-tooltip/>
<el-table-column prop="standardName" label="评分标准名称" show-overflow-tooltip/>
<el-table-column prop="createBy" label="创建人" width="180" />
<el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip/>
<el-table-column label="操作" align="center" width="180">
<template #default="scope">
<span @click="details(scope.row)">
<img src="../../assets/images/look.png" alt="">
</span>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="demo-pagination-block">
<el-pagination
v-model:current-page="dataVo.pageNum"
v-model:page-size="dataVo.pageSize"
:page-sizes="[100, 200, 300, 400]"
:small="small"
:disabled="disabled"
background="background"
layout="total, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
<script setup>
import { ref, nextTick, onMounted, onUnmounted, reactive , getCurrentInstance } from 'vue';
import { getStandardList, getList, addStandardList } from '@/api/template/index'
import { useRouter } from 'vue-router'
const router = useRouter();
const { proxy } = getCurrentInstance()
onMounted(() => {
getTemplateFn()
});
// 获取数据的数据
const dataVo = reactive(
{
template: '',
standard:'',
pageSize:10,
pageNum:1,
}
);
// 条数
const total = ref(0)
// 表格数据
let tableData = ref([]);
// 获取表格数据
function getTemplateFn() {
//执行获取数据的请求
getStandardList(dataVo).then(res => {
console.log(res);
tableData.value = res.data.data
total.value = res.data.count
})
};
// 跳转方法
const details = (scope) => {
// console.log(scope.templateId);
router.push({path:'/evaluate/standard/detail',query: {id:scope.templateId} })
}
// 分页方法
const handleSizeChange = (val) => {
dataVo.pageSize = val
getTemplateFn()
}
const handleCurrentChange = (val) => {
dataVo.pageNum = val
getTemplateFn()
}
</script>
<style lang="scss" scoped>
// 分页
.el-pagination{
justify-content: center;
margin-top: 15px;
}
// 弹窗样式
::v-deep().el-dialog:not(.is-fullscreen){
margin-top: auto !important;
}
</style>
