直接上代码:
我用的是element组件
首先是列表data是数据源
<el-table :data="data.slice((currentPage - 1) * limit, currentPage * limit)" stripe border style="width: 100%"> <el-table-column prop="id" header-align="center" align="center" show-overflow-tooltip label="标识" width="70" /> <el-table-column prop="title" header-align="center" align="center" show-overflow-tooltip label="项目名称" width="220" /> <el-table-column prop="companyid" header-align="center" align="center" show-overflow-tooltip label="公司标识" width="220" /> <el-table-column prop="account" header-align="center" align="center" show-overflow-tooltip label="公司名称" width="220" /> <el-table-column prop="address" header-align="center" align="center" show-overflow-tooltip label="项目地址" width="220" /> <el-table-column prop="end_time" header-align="center" align="center" show-overflow-tooltip label="结束时间" width="220" /> <el-table-column prop="start_time" header-align="center" align="center" show-overflow-tooltip label="开始地址" width="220" /> <el-table-column label="操作" header-align="center" align="center" show-overflow-tooltip> <template #default="{row}"> <el-button text @click="dialogFormVisible_edit = true"> <el-button size="small" @click="handleEdit(row.id)">编辑</el-button> </el-button> <el-button text @click="open(row.id)"> <el-button size="small" type="danger" >下架</el-button> </el-button> </template> </el-table-column> </el-table>
<div class="demo-pagination-block"> <el-pagination v-model:page-size="limit" v-model:current-page="currentPage" :page-sizes="[5, 10, 15, 20, 25]" :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="data.length"//data的长度 @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div>
vue代码:
/**分页 */ const small = ref(false) const background = ref(false) const disabled = ref(false) const currentPage = ref(1); const limit = ref(10); const handleSizeChange = (val: number) => { console.log(`${val} items per page`) } const handleCurrentChange = (val: number) => { console.log(`current page: ${val}`) }