uni-app自制表格及其分页_uniapp表格

uni-app自制表格及其分页

展示效果：

1.引入插件

t-table表格【点击跳转】
uni-pagination分页器【点击跳转】

2.实例源码

	<view style="font-size: 12rpx;margin-top: 25rpx; width: 800rpx; height:auto">
		<t-table>
			<t-tr fontSize="16">
				<t-th>序号</t-th>
				<t-th>传感器类型</t-th>
				<t-th>数值</t-th>
				<t-th>时间节点</t-th>
			</t-tr>
			<t-tr v-for="item in tableList" :key="item.id" fontSize="16">
				<t-td>{{ item.id + 1 }}</t-td>
				<t-td>{{ item.deviceName }}</t-td>
				<t-td>{{ item.data }}</t-td>
				<t-td>{{ item.dataTime }}</t-td>
			</t-tr>
		</t-table>
	</view>
	<uni-pagination style="margin-top: 15rpx;font-size: 15rpx;" title="标题文字" :total="this.totalContent"
		@change="paginationChange"></uni-pagination>

<script>
	// 表格
	import tTable from "@/components/t-table/t-table.vue"
	import tTh from '@/components/t-table/t-th.vue'
	import tTr from '@/components/t-table/t-tr.vue'
	import tTd from '@/components/t-table/t-td.vue'
	//分页器
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	export default {
		data() {
			return {
				//表格
				totalList: [],
				tableList: [],
				index: 10,
				totalContent: 0,
			};
		},
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			uniPagination,
		},
		beforeMount() {},
		methods: {
			paginationChange(e) {
				this.index = e.current * 10
				this.tableList.splice(0, this.tableList.length)
				if (this.index > this.totalList.length) {
					for (let i = this.index - 10, j = 0; i < this.totalList.length; i++)
						this.tableList[j++] = this.totalList[i]
				} else {
					for (let i = this.index - 10, j = 0; i < this.index; i++)
						this.tableList[j++] = this.totalList[i]
				}
			},
			async queryTHIForm() {
				if (this.queryDataForm.deviceName == '' || this.queryDataForm.dataTime == '') {
					uni.showToast({
						title: '数据框不能为空!',
						duration: 800,
						mask: true,
					})
					return;
				}
				this.tableList = []
				this.totalList = []
				this.totalContent = 0
				const res = await this.$Request({
					url: `getTHIData?dataTime=${this.queryDataForm.dataTime}`
				})
				if (res.data.code == 0) {
					for (let i = 0; i < res.data.result.length; i++) {
						let data = {}
						data.id = i
						data.deviceName = this.queryDataForm.deviceName
						data.dataTime = res.data.result[i].dataTime
						if (this.queryDataForm.deviceName == '温度传感器') {
							data.data = res.data.result[i].t1
						} else if (this.queryDataForm.deviceName == '湿度传感器') {
							data.data = res.data.result[i].h1
						} else if (this.queryDataForm.deviceName == '光强传感器') {
							data.data = res.data.result[i].i1
						}
						this.totalList[i] = data
					}
					this.totalContent = this.totalList.length
					if (this.totalList.length < 10)
						this.index = this.totalList.length
					for (let i = 0; i < this.index; i++)
						this.tableList[i] = this.totalList[i]
					console.log(this.tableList)
				}
			}
		}
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

其中api.js及实例JSON字符串格式如下：
api.js：

const BACE_URL = 'http://172.16.40.118:8777/'

//封装的请求借口函数
export const Request = (options) =>{
	return new Promise((resolve, reject) =>{
		uni.request({
			url: BACE_URL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			success: (res) =>{
				if(res.data.code !== 0){
					return uni.showToast({
						title:'获取数据失败'
					})
				}
				resolve(res)
			},
			fail:(err) =>{
				return uni.showToast({
					title:'请求借口失败'
				})
				reject(err)
			}
		})
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

JSON字符串：