118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<template>
|
||
<scroll-view
|
||
class="table-list"
|
||
scroll-y
|
||
:style="{ '--height': height }"
|
||
@scrolltolower="addNext"
|
||
@refresherrefresh="openRefresh"
|
||
:refresher-enabled="refresh"
|
||
:refresher-triggered="vdata.isRefresh"
|
||
>
|
||
<template v-for="(record, i) in vdata.allData" :key="i">
|
||
<slot name="tableBody" :record="record" :index="i" />
|
||
</template>
|
||
<view class="list-null" v-if="!vdata.apiResData.hasNext && showListNull">暂无更多数据</view>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
|
||
|
||
// 定义传入属性
|
||
const props = defineProps({
|
||
reqTableDataFunc: { type: Function, default: () => {} },
|
||
searchData: { type: Object, default: () => {} }, // 搜索条件参数
|
||
pageSize: { type: Number, default: 10 }, // 默认每页条数
|
||
initData: { type: Boolean, default: true }, // 初始化列表数据， 默认true
|
||
showListNull: { type: Boolean, default: true }, //是否显示缺省 默认显示
|
||
height: { type: String, default: '88rpx' }, // 高度 这里的高度 为 外部使用高度 scroll-view 高度 为 100vh - 传入高度
|
||
refresh: { type: Boolean, default: false } //是否开启下拉刷新 默认不开启
|
||
});
|
||
|
||
const vdata = reactive({
|
||
allData: [], // app与web不同， app是每次查询到数据会拼接到后面
|
||
|
||
// 接口返回的数据
|
||
apiResData: { total: 0, records: [] },
|
||
|
||
// 分页参数
|
||
iPage: { pageNumber: 1, pageSize: props.pageSize },
|
||
|
||
// 下拉刷新开启状态
|
||
isRefresh: false
|
||
});
|
||
|
||
onMounted(() => {
|
||
//初始化表数据
|
||
props.initData ? refTable(true) : undefined;
|
||
});
|
||
|
||
// 查询表格数据
|
||
function refTable(isToFirst = false) {
|
||
if (isToFirst) {
|
||
// 重新搜索， 第一页。
|
||
vdata.iPage.pageNumber = 1;
|
||
vdata.allData = []; //清空数据
|
||
}
|
||
|
||
// 更新检索数据
|
||
return props.reqTableDataFunc(Object.assign({}, vdata.iPage, props.searchData)).then(({ bizData }) => {
|
||
Object.assign(vdata.apiResData, bizData); // 列表数据更新
|
||
|
||
if (bizData.records) {
|
||
bizData.records.forEach((r) => vdata.allData.push(r));
|
||
}
|
||
});
|
||
}
|
||
|
||
/** 追加下一页数据 **/
|
||
function addNext() {
|
||
// console.log('加载下一页')
|
||
// 包含下一页
|
||
if (vdata.apiResData.hasNext) {
|
||
vdata.iPage.pageNumber++;
|
||
refTable(false);
|
||
}
|
||
}
|
||
|
||
// 下拉刷新
|
||
const openRefresh = () => {
|
||
vdata.isRefresh = true;
|
||
refTable(true).then(() => {
|
||
setTimeout(() => {
|
||
vdata.isRefresh = false;
|
||
}, 300);
|
||
});
|
||
};
|
||
|
||
// 将表格事件暴露出去 https://www.jianshu.com/p/39d14c25c987
|
||
defineExpose({ refTable, addNext });
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.table-list {
|
||
height: calc(75vh - var(--height));
|
||
}
|
||
.list-null {
|
||
position: relative;
|
||
height: 110rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-bottom: 70rpx;
|
||
gap: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #a6a6a6;
|
||
&::after,
|
||
&::before {
|
||
content: '';
|
||
display: block;
|
||
width: 30%;
|
||
height: 2rpx;
|
||
background-color: #ededed;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
</style>
|