uni-app表格带分页,后端处理过每页可以显示多少条,一句设置好了每页显示的数据量,不需要钱的在进行操作,在进行对数据的截取
<th-table :column="column" :listData="data" :checkSort="checkSort" :st="st"
:sr="sr" :tdClick="tdClick" height="0.5" :stripe="true" :border="true"
:loading="false">
<!-- 具名作用域插槽 #后面写column里slot的值 -->
<template v-slot:b="Props">
<!-- 子组件传递的参数 整个item -->
<span style="color: red;">{{ Props.item.b }}</span>
</template>
<template v-slot:c="Props">
<span style="color: green;" @click="log(Props.item)">{{ Props.item.c }}</span>
</template>
<template v-slot:a="Props">
<div style="color: pink;">{{ Props.item.a }}</div>
<div>{{ Props.item.e }}</div>
</template>
</th-table>
<!-- 分页按钮 -->
<view class="pagination">
<button @click="prevPage" :disabled="pageNo === 1">上一页</button>
<view class="pagina_q">
<view>
页码 {{ pageNo }}/{{ totalPages }}
</view>
</view>
<button @click="nextPage" :disabled="pageNo === totalPages">下一页</button>
</view>
script
const column = ref([
{
title: '时间',
isSort: false,
isFixed: false,
key: 'dataTime'
},
{
title: '电费',
isSort: true,
isFixed: false,
key: 'powerPrice'
}
]);
//后端返回的数据必须匹配上title和key
const data = ref([]); //渲染的数据内容
// 表身数据
const data = ref([]);
// 排序字段
const st = ref('b');
// 排序 1降序 -1升序
const sr = ref(-1);
// 切换排序事件
const checkSort = (name: string, type: number) => {
st.value = name;
sr.value = type;
};
// 分页相关
const pageNo = ref(1);
const pageyem = ref(5);
// 计算总页数
const totalPages = ref(1); // 初始化为1,避免未定义
// 分页操作
//上一页
const nextPage = () => {
if (pageNo.value < totalPages.value) {
pageNo.value += 1;
fetchTableData();
}
};
//下一页
const prevPage = () => {
if (pageNo.value > 1) {
pageNo.value -= 1;
fetchTableData();
}
};
const xuanrshu=ref();
const fetchTableData = () => {
//分页数据内容
data.value = response.data;
}).catch(error => {
console.error("获取表数据失败:", error);
});
};