我们接着上回,没看上一回的建议先看一下,不讲废话,上一回我们创建完表格了,也渲染了静态数据上去,现在我们接着做分页。
还是老样子,我把前一回的注释都删了,现在看到的注释就是比较关键的点,帮助大家理解学习
分页:
<script setup>
import { reactive } from 'vue';
//模拟后端返回的数据,如果是发请求的话,每次返回的数据条数应该是你限定的条数,这里先定义九条数据备用,实际开发发请求就有数据了
const tableData = [
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称',
goodsDesc: '商品详情'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称',
goodsDesc: '商品详情'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称',
goodsDesc: '商品详情'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称',
goodsDesc: '商品详情'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称',
goodsDesc: '商品详情'
},
goodsPrice: 188,
goodsNum: 3
},
]
//模拟后端接口需要传递的参数,也是分页要用到的三个值,数据总数,偏移值和每页显示的条数
const pageData = reactive({
//定义分页的偏移值(偏移值就是往后移动固定条数取数据,比如偏移值为5,第一次取索引值为0-4的数据,第二次取5-10,以此类推)
offset: 0,
//定义每次请求回来的数据,有些接口会定义limit参数,就是每次返回几条数据
limit: 5,
//定义数据的总条数,有些接口会返回一个总条数的值,没有的也可以用全部数据.length来代替这个total
total:12
})
//建议大家自己执行一下这个函数,加深记忆,该事件定义在el-pagination上,当前页改变的时候就会触发
const handleCurrentChange = (e) => {
//e打印的就是去到的那一页的索引
console.log(e);
}
</script>
<template>
<div class="constainer">
<div class="content">
<el-table :row-style="{ height: '110px' }" :data="tableData">
<el-table-column type="selection" width="70" align="center" />
<el-table-column label="商品" width="270" align="center">
<template v-slot="scope">
<div class="goods-info">
<img :src="scope.row.goodsDetail.goodsImg" alt="" class="cart-img" />
<div>
<p>{{ scope.row.goodsDetail.goodsName }}</p>
<p class="desc">
{{ scope.row.goodsDetail.goodsDesc }}
</p>
</div>
</div>
</template>
</el-table-column>
<!-- prop="属性名"来绑定每一列数据 -->
<el-table-column prop="goodsPrice" label="单价" width="120" align="center">
</el-table-column>
<el-table-column prop="goodsNum" label="数量" align="center" width="140"> </el-table-column>
<el-table-column label="小计" width="120" align="center">
<template v-slot="scope"> ¥{{ scope.row.goodsPrice * scope.row.goodsNum }} </template>
</el-table-column>
<el-table-column prop="" label="操作" width="180" align="center">
<template #default="scope">
<!-- 气泡弹出框来确认用户是否要删除商品 @confirm写确认后的事件,逻辑很简单,这个函数是假的,只是示范一下 -->
<el-popconfirm title="你确定要删除吗?" @confirm="deleteGoods(scope.row.id)">
<template #reference>
<el-button type="info">移除商品</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div class="allTotal">
<!-- el-pagination用来定义分页 -->
<!-- :total定义数据的总数 -->
<!-- v-model:page-size定义每页显示个数 -->
<!-- current-change是一个事件,当前页发生改变的时候就会触发,可以自己打印输出看一下 -->
<el-pagination
class="page"
layout="prev, pager, next"
background
:total="pageData.total"
@current-change="handleCurrentChange"
v-model:page-size="pageData.limit"
/>
<div class="total-box">
<span class="total">总价:¥</span>
<!-- <el-button type="info" size="large" class="totalBtn" v-if="selectListData.totalPrice === 0">去结算</el-button> -->
<el-button type="primary" size="large" class="totalBtn">去结算</el-button>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.constainer {
width: 100vw; //宽等于屏幕的宽
height: 100vh; //高等于屏幕的高
background-color: #ccc;
padding-top: 50px;
}
.content {
width: 900px;
height: 700px;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
.goods-info {
display: flex;
align-items: center;
.cart-img {
margin: 0 1.5em 0 1em;
width: 80px;
height: 80px;
}
p {
text-align: left;
}
.desc {
margin-top: 1em;
}
}
.allTotal{
display: flex;
justify-content: space-between;
.page{
margin-left: 2em;
}
.total-box{
display: flex;
justify-content: center;
align-items: center;
margin: 2em 2em 2em 0;
.total{
display: inline-block;
font-size: 20px;
height: 40px;
line-height: 40px;
}
.totalBtn{
margin-left: 1em;
width: 150px;
}
}
}
}
</style>
效果:
当然,现在翻页是没效果的,所以我们接着往下:
<script setup>
import { reactive,ref } from 'vue';
const tableData = [
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称1',
goodsDesc: '商品详情1'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称2',
goodsDesc: '商品详情2'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称3',
goodsDesc: '商品详情3'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称4',
goodsDesc: '商品详情4'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称5',
goodsDesc: '商品详情5'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称6',
goodsDesc: '商品详情6'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称7',
goodsDesc: '商品详情7'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称8',
goodsDesc: '商品详情8'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称9',
goodsDesc: '商品详情9'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称10',
goodsDesc: '商品详情10'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称11',
goodsDesc: '商品详情11'
},
goodsPrice: 188,
goodsNum: 3
},
{
goodsDetail: {
goodsImg: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
goodsName: '商品名称12',
goodsDesc: '商品详情12'
},
goodsPrice: 188,
goodsNum: 3
}
]
//这里定义一个变量来接收处理数据,用来渲染数据,实际开发的时候就不需要定义了,因为后端返回的数据就是切好的
const handleData = ref('')
const pageData = reactive({
//这里定义偏移值为5
offset: 5,
limit: 5,
total:12
})
const handleCurrentChange = (e) => {
//e打印的是页码
console.log(e);
//想要做到数据的切换更新,那就需要我们在切换到不同页码的时候更新数据
// 在分页上我们绑定了:page-size="pageData.limit",就是每页的条数,这是不变的,这时候就要用到偏移值来动态更新
//这里我们用切割数组的方法,实际开发不用这样做,因为请求后端返回的数据已经是切割好的了
// (e-1)*pageData.offset 因为我们默认页码是1开始的,而数据在第一页的偏移值应该是0,就是应该从第0条数据开始渲染
// e*pageData.offset 一个偏移值就是5条数据,所以页码为1就是渲染前五条数据,页码为2就是渲染往后五条
handleData.value = tableData.slice((e-1)*pageData.offset,e*pageData.offset)
}
//初始化页面的数据
const initData = () => {
handleData.value = tableData.slice(0, pageData.offset)
}
initData()
</script>
<template>
<div class="constainer">
<div class="content">
<!-- 没有后端返回的数据,用handleData模拟处理过后的数据 -->
<el-table :row-style="{ height: '110px' }" :data="handleData">
<el-table-column type="selection" width="70" align="center" />
<el-table-column label="商品" width="270" align="center">
<template v-slot="scope">
<div class="goods-info">
<img :src="scope.row.goodsDetail.goodsImg" alt="" class="cart-img" />
<div>
<p>{{ scope.row.goodsDetail.goodsName }}</p>
<p class="desc">
{{ scope.row.goodsDetail.goodsDesc }}
</p>
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="goodsPrice" label="单价" width="120" align="center">
</el-table-column>
<el-table-column prop="goodsNum" label="数量" align="center" width="140"> </el-table-column>
<el-table-column label="小计" width="120" align="center">
<template v-slot="scope"> ¥{{ scope.row.goodsPrice * scope.row.goodsNum }} </template>
</el-table-column>
<el-table-column prop="" label="操作" width="180" align="center">
<template #default="scope">
<el-popconfirm title="你确定要删除吗?" @confirm="deleteGoods(scope.row.id)">
<template #reference>
<el-button type="info">移除商品</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div class="allTotal">
<el-pagination
class="page"
layout="prev, pager, next"
background
:total="pageData.total"
@current-change="handleCurrentChange"
v-model:page-size="pageData.limit"
/>
<div class="total-box">
<span class="total">总价:¥</span>
<!-- <el-button type="info" size="large" class="totalBtn" v-if="selectListData.totalPrice === 0">去结算</el-button> -->
<el-button type="primary" size="large" class="totalBtn">去结算</el-button>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.constainer {
width: 100vw; //宽等于屏幕的宽
height: 100vh; //高等于屏幕的高
background-color: #ccc;
padding-top: 50px;
}
.content {
width: 900px;
height: 700px;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
overflow: hidden;
.goods-info {
display: flex;
align-items: center;
.cart-img {
margin: 0 1.5em 0 1em;
width: 80px;
height: 80px;
}
p {
text-align: left;
}
.desc {
margin-top: 1em;
}
}
.allTotal{
display: flex;
justify-content: space-between;
.page{
margin-left: 2em;
}
.total-box{
display: flex;
justify-content: center;
align-items: center;
margin: 2em 2em 2em 0;
.total{
display: inline-block;
font-size: 20px;
height: 40px;
line-height: 40px;
}
.totalBtn{
margin-left: 1em;
width: 150px;
}
}
}
}
</style>
效果:
分享到这里了,太晚了,现在基本效果是有了,但是多选框有些不足,不足就在你在一个页面选中的那些多选框,在切换页面后再切回来就恢复到未选中状态。所以要做一下回显,太晚了,爱惜身体,爱惜自己,对自己好一点。