Vue3分页组件基础使用 以及 给表格增加自增序列

 分页组件使用

    <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>