uni-app 手写table组件 开箱即用

285 阅读1分钟

看了uniapp官网没有对table进行封装,就自己写了一个,分享给大家。

废话不多说直接贴代码,仅供参考(写的比较简单)

<template>
	<view class="mytable">
		<uni-table ref="table" :loading="loading" stripe :emptyText="emptyText" :stripe="stripe">
			<uni-tr :style="[tdStyle]">
				<uni-th :width="v.width || 40" :align="v.align || 'center'" v-for="(v,i) in Columns" :key="v.key">
					<text :style="[v.ColumnsStyle]">{{v.title}}</text>
				</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td v-for="(v,i) in Columns" :key="i" :align="v.align || 'center'">
					<view @click="tdClick(item)">
						<template v-if="v.slot">
							<slot :value="item[v.key]" :item="item" :index="index" :v="v" :name="v.key" />
						</template>
						<template v-else>
							<text :style="[v?.tableDataStyle]">{{Processing (item[v.key],index,item,v)}}</text>
						</template>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<view class="pagination-box" v-if="pagination">
			<uni-pagination v-model="innerPage.page" :page-size="innerPage.size" :total="innterTotal"
				:show-icon="defaultPagination.showIcon || true" :prev-text="defaultPagination.prevText"
				:next-text="defaultPagination.nextText" @change="pageChange" />
		</view>
	</view>
</template>

<script setup>
	/**
	 * 自定义表格
	 * tableData:表格数据
	 * Columns:表头
	 *
	 */
	import {
		defineProps,
		defineExpose,
		ref,
		defineEmits
	} from 'vue'

	const props = defineProps({
		tdStyle: {
			type: Object,
			default: {
				background: 'rgba(239,239,239,0.49)',
			},
		},
		tableData: {
			type: Array,
			required: true,
		},
		Columns: {
			type: Array,
			required: true,
		},
		emptyText: {
			type: String,
			default: '暂无更多数据',
		},
		loading: {
			type: Boolean,
			default: false,
		},
		stripe: {
			type: Boolean,
			default: true,
		},
		pagination: {
			type: Boolean,
			default: false,
		},
	})

	const emits = defineEmits(['tdClick'])

	//处理数据
	/**
	 * val:项数据
	 * index:索引
	 * item:tableData
	 * v:Columns
	 */
	const Processing = (val, index, item, v) => {
		let data
		if (!val && val !== 0) {
			data = '-'
			if (v.key === 'index') {
				data = index + 1
			}
		} else {
			data = val
			if (v.key === 'index') {
				data = index + 1
			}
			if (data === null || data === '' || data === undefined) {
				data = '-'
			}
		}
		return data
	}

	const tdClick = (item) => {
		console.log(item)
		emits('tdClick', item)
	}

	//分页

	const innterTotal = ref(0)
	const innerPage = ref({
		page: 1,
		size: 10,
	})
	const defaultPagination = ref({
		showIcon: true,
		prevText: '上一页',
		nextText: '下一页',
	})	
</script>

<style lang="less" scoped>
	.mytable {
		width: 100%;
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
	}

	.pagination-box {
		margin-top: 10px;
	}
</style>