基于vue3+el-pagination实现表格分页效果

基于vue3+el-pagination实现表格分页效果

vue3+element-plus 为我们前端开发带来了极大的便捷
1、el-table + el-pagination

<el-table
          :data="
            goods.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
          style="width: 100%"
        >
     <!-- 根据选中的每页允许展示的数据行数和当前的页码进行数据的切分 -->
</el-table>

<el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[2, 4, 6, 8, 10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="goods.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 
        @current-change="handleCurrentChange"  // current-change 改变时触发， 新当前页
        @size-change="handleSizeChange"  // pageSize改变时触发  新每页条数
        page-sizes 每页显示个数选择器的选项设置
        disabled 是否禁用分页   
        background 是否为分页按钮添加背景色  默认是false
        total //数据的总条目数
       -->

2、数据段代码

const data = reactive({
	goods:[],//需展示的数据
	currentPage:1, //当前页码
    pageSize:10 //每页显示的行数
})

3、展示数据的序号
根据业务需求来决定是否需要该项功能

<el-table-column label="序号">
    <template #default="scope">
         {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
    </template>
</el-table-column>

vue3和vue2插值语法的使用发生了一定的改变

4、vue2插值语法

<template slot-scope="scope">
</template>

注意，vue3中只能用template，# 等同于 slot=，其中default 是可以随便起名的