zj-mobile-oa/components/myTable/myTable.vue

<template>
	<uni-table :loading="loading" stripe emptyText="暂无更多数据">
		<uni-tr>
			<uni-th align="center">
				<image src="../../static/tip.svg" style="width: 35rpx;height: 35rpx;"></image>
			</uni-th>
			<uni-th v-for="(item, index) in column" :key="index" align="center">{{item.title}}</uni-th>
		</uni-tr>
		<uni-tr v-for="(item, index) in tableData" :key="index">
			<uni-td align="center">
				<view :style="{
					'width': '20rpx',
					'height': '20rpx',
					'background-color': 'green',
					'border-radius': '50%',
					'display': 'inline-block'
				}"
				></view>
			</uni-td>
			<template v-for="(it, i) in column" :key="i">
				<uni-td align="center" v-for="(val,key,idx) in item" :key="idx" v-show="it.key === key">
					<text v-if="it.formatter">{{ it.formatter(item[it.key]) }}</text>
					<text v-else>{{ item[it.key] }}</text>
				</uni-td>
			</template>
			<uni-td align="center" width="180">
				<view class="uni-group">
					<slot name="action" :row="item" :blUrl="props.blUrl"></slot>
				</view>
			</uni-td>
		</uni-tr>
	</uni-table>
	
	<view class="uni-pagination-box">
		<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
	</view>
</template>

<script setup>
	import {ref} from "vue"
	const emits = defineEmits(['pageChange'])
	const props = defineProps({
		column:{
			type: Array,
			default: []
		},
		tableData:{
			type: Array,
			default: []
		},
		pageCurrent:{
			type: Number,
			default: 1
		},
		pageSize:{
			type: Number,
			default: 10
		},
		total:{
			type: Number,
			default: 0
		},
		loading:{
			type: Boolean,
			default: false
		},
		blUrl:{
			type: String,
			default: ''
		}
	})
	
	function change(e){
		emits('pageChange', e.current)
	}
</script>

<style lang="scss" scope>
	.uni-group {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.uni-pagination-box{
		padding: 20rpx;
		.uni-pagination{
			justify-content: end;
		}
	}
	::v-deep .uni-table{
		min-width: 800rpx !important;
	}
</style>