uni-app, uni-table table operation

Realize the function:

Use the uni-ui UI framework to realize the table plus paging function, the usage examples of uni-table and uni-pagination components plus complete code.

Renderings:

 

Full code:

<template>
	<view class="page">
		<view :class="deviceType=='pc'?'tablePC':'tablePH'">

			<view class="tips">
				总计：<text style="font-weight: 600;">{
   
   {total}}条</text>
			</view>
			<uni-table class="unitable" border stripe emptyText="暂无更多数据">

				<!-- 表头行 -->
				<uni-tr>
					<uni-th v-for="item in tableTitle" align="center">{
   
   {item}}</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<block v-if="item && item.referral" v-for="(item,idx) in tableData" :key="idx">

					<uni-tr>
						<uni-td>{
   
   {idx+1}}</uni-td>
						<uni-td>{
   
   {item.referral}}</uni-td>
						<uni-td>{
   
   {item.area}}</uni-td>
						<uni-td>{
   
   {item.rm}}</uni-td>
						<block v-if="item && item.referral" v-for="(itemm,idxx) in item.caseList" :key="idx">
							<uni-td>{
   
   {itemm.shareName}}</uni-td>
							<uni-td>{
   
   {itemm.name}}</uni-td>
							<uni-td>{
   
   {itemm.workUnit}}</uni-td>
						</block>
					</uni-tr>
				</block>

			</uni-table>
		</view>

		<view class="uni-pagination-box">
			<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
		</view>
	</view>
</template>

<script>
	function checkDeviceType() {
		const userAgent = navigator.userAgent;
		const mobileKeywords = ['Android', 'iPhone', 'Windows Phone', 'iPod', 'BlackBerry', 'webOS'];

		for (let i = 0; i < mobileKeywords.length; i++) {
			if (userAgent.indexOf(mobileKeywords[i]) !== -1) {
				return 'mobile';
			}
		}

		return 'pc';
	}
	export default {

		data() {
			return {
				tableTitle: [],
				tableData: [],
				infos: [],
				pageSize: 10,
				pageCurrent: 1,
				total: 1,
				deviceType: ''
			}
		},
		mounted() {
			this.getList(this.pageCurrent)

			this.deviceType = checkDeviceType();

		},
		methods: {
			// 分页触发
			change(e) {
				this.pageCurrent = e.current
				console.log('e.current', e.current);
				console.log('this.pageCurrent', this.pageCurrent);
				this.getList()
			},
			async getList() {
				// let url = `/wxproject/msd_liver_cancer/getPageList`;
				let url = `/wxproject/msdnsclc/getPageList`;

				let res = await this.$post(url, {
					page: this.pageCurrent,
					pageSize: this.pageSize
				})
				if (res.code == 200) {
					this.infos = res.data.infos
					this.total = res.data.totalElements
					let arr = []
					this.infos.forEach(item => arr.push(JSON.parse(item.json).query))
					this.tableData = arr

					let title = ['序号', '推荐人', '区域', 'RM']
					let caseListMaxLengthArr = [];

					this.tableData.forEach(item => {
						caseListMaxLengthArr.push(item.caseList.length)
					})
					let max = Math.max(...caseListMaxLengthArr);
					let my_obj = {
						shareName: '-',
						name: '-',
						workUnit: '-',
					}
					for (let i = 0; i < max; i++) {
						this.tableData.forEach(item => {
							if (!item.caseList[i]) item.caseList[i] = my_obj
						})
						title.push('案例分享者')
						title.push('案例名称')
						title.push('所在单位')
					}
					this.tableTitle = title
					this.$forceUpdate()
					console.log('this.tableData', this.tableData);
				} else {}
			},
		}
	}
</script>
<style lang="less" scoped>
	.page {}

	.tips {
		margin-bottom: 10px;
		font-size: 16px;
	}

	.tablePC {
		height: 78vh;
		margin: 50px;
	}

	.tablePC {
		height: 78vh;
		width: 80vw;

	}

	.unitable {
		// min-width: 1000px;

	}

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