【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】_uniapp表格

前言：

由于最近需要做移动端的项目
有个pc端的后台系统里面需要移一部分页面过来
而里面就有很多的表格，我就开始惯例网上先找前人栽的树，我好乘凉
然后找了一圈发现，不管是主流的移动端ui库或者网上自己写的帖子，或者uniapp的插件网站
都没有看到符合我要求的表格，然后如果要改别人的源码那我看代码都要看很久，好切有些还奇奇怪怪的bug不兼容
可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错，我也改过别人的源码了，后来放弃了。
所以我就直接手写了一个简单的表格展示组件，配上一些我需要的功能。可以先用着了。
重点是我是原生的标签写的，不是引入一大堆的插件之类的，uniapp可以直接用。
想修改源码也简单。我都注释好了

效果图

小程序页面兼容，可以看到点击按钮之后会拿到对应行的数据

H5页面的，也是一样兼容的可能，也能拿到数据

移动端，手机预览效果，展示了数据和点击生效，滚动到底部可以触发方法，可以在这里写加载第二页表格的方法

功能：

1，数据展示：只需要往组件内传入表头和列表数据就能展示，列表数据和elementul的表格一样。表头要自己配置
2，固定表头：上滚动的时候表头会定位在上面不动
3，固定列：表头内配置属性，可以让这一列固定左边不动。目前只能固定一列
4，行底纹：就是给一行的单元格加上背景色，需要在tabledata列表中添加一个字段bgcolor就可以了
5，列底纹：同上，区别是在表头内添加一个字段bgcolor
6，单元格文字颜色改变：这是我们项目的要求，需要拿到每个单元格的数据和指标对比大小来标红。这里在父组件就可以配置
7，操作列：表头添加操作列，key给edit就会出现一个编辑和删除的列。不写就没有这一列。点击按钮会触发父组件的方法
8，滚动到底部：滚动到底部会触发父组件方法。可以做业务操作，比如拿第二页的表格
9，自动列宽：根据表格内单元格内容的宽度来动态赋值几个宽度，宽度是提前定义好的。由于表头和表体需要宽度一致，所以提前设置几个档次的固定宽度。具体使用是自动根据表体或者表头哪一个长，用哪一个的宽。保证数据的展示完全。当数据过长的时候会自动隐藏并省略号显示。这里我就没有加其他的功能了，后期可以自行更改，把这个文字加一个组件包裹，就是点击可以显示全部文字的弹框那个。

引入组件

uniapp可以直接使用，整体就引入了一个组件，uniapp带有的scroll-view组件。需要去uniapp文档内引入一下，直接插件市场下载一下就好了

代码：

组件部分：
写一个tableDiv的vue文件，当然名字随便你换

然后把代码复制进去。

<template>
	<view class="wrap">
		<!-- @scrolltolower:滚动到底部触发  lower-threshold：距离底部多少距离触发@scrolltolower -->
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-y="true" @scrolltolower='scrollBottom'
			:lower-threshold='2'>
			<view class="top" id="top" :style="{width:tableWidths+'px'}">
				<view v-for="(h,n) in header" :key='n' :class="{'header_dyg':true,'flexs':h.flxe}"
					:style="{width:h.hWidth+'px'}">
					{{h.name}}
				</view>
			</view>
			<view class="bottom" :style="{maxHeight: tableHeight+'px',width:tableWidths+'px'}">
				<view class="tablebox" v-for="(t,s) in tableData" :key='s' @click="jumpDetailed(t)">
					<view v-for="(h,n) in header" :key="n"
						:class="{'table_dyg':true,'tdColClass':h.bgcolor,'tdRowClass':t.bgcolor,'flexs':h.flxe}"
						:style="{width:h.hWidth+'px'}">
						<!-- 不等于操作列就显示文字 -->
						<text v-if="h.key!=='edit'" :style="{color:getColor(t,h)}">{{t[h.key]}}</text>
						<!-- 操作列显示按钮，后期用插槽 -->
						<view class="uni-group" v-else style="background-color: #fff;">
							<button class="uni-button" size="mini" type="primary" style="margin-right: 5px;"
								@click="editTable(t)">编辑</button>
							<button class="uni-button" size="mini" type="warn" @click="deleteTable(t)">删除</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 表头配置：flxe(固定列)，bgcolor(列底纹)
	// 表体配置：bgcolor(行底纹)
	export default {
		props: {
			data2: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			head: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			tableHeight: {
				required: true,
				type: [Number, String],
				default: function() {
					return 0;
				}
			}
		},
		data() {
			return {
				//表体
				tableData: [],
				//表头
				header: [],
				// 表格总长度
				tableWidths:0
			}
		},
		watch:{
			// 监听列表
			'data2'(a,b){
				this.tableData = a
			},
			// 监听表头
			'head'(a,b){
				this.header = a
				//计算列宽
				this.tableWidth()
			},
		},
		created() {
			this.tableData = this.data2 //列表
			this.header = this.head //表头
			this.tableWidth()
		},
		methods: {
			// 返回行数据
			jumpDetailed(row){
				this.$emit('rowData',row)
			},
			// 滚动到底部，调用父组件方法
			scrollBottom(e) {
				// 滚动到底部才触发，滚动到右边不触发
				if (e.detail.direction == "bottom") {
					this.$emit('scrollBottom')
				}
			},
			// 颜色对比
			getColor(row, col) {
				let color = 'black'
				// 传值给父组件，通过父组件的方法内计算判断当前单元格数据是否需要标红，然后通过回调函数，返回一个color值来渲染
				this.$emit('getTextColor', row, col, val => {
					color = val
				})
				return color
			},
			// 修改按钮
			editTable(val) {
				this.$emit('getEdit', val)
			},
			// 删除按钮
			deleteTable(val) {
				this.$emit('getDelete', val)
			},
			// 计算单元格宽度
			tableWidth() {
				let w=0 //计算表格长度
				this.header.forEach((head, index) => {
					let hw = head.name.length //表头单元格宽度
					let dw = 0 //列表单元格宽度
					this.tableData.forEach(data => {
						// 如果是操作列，就直接给十个字符长度，也就是列宽自动150，不是操作列的统一看字符串长度决定宽度
						let a = (head.key == 'edit' ? '1234567891' : (data[head.key]?data[head.key].toString():'1'))
						let tw = (head.key == 'edit' ? 10 : a.length)
						// 这里每次循环找出更大的数赋值，确保dw中是表体单元格这一列中最大宽度，根据最大宽度来判断单元格显示
						if (dw < tw) {
							dw = tw
						}
					})
					// 表体单元格内容宽度小于表头内容时，以表头的宽度为主。根据表头的字符长度来区分宽度
					if (dw <= hw) {
						if (hw <= 3) {
							head['hWidth'] = 50
						} else if (hw <= 5) {
							head['hWidth'] = 80
						} else {
							head['hWidth'] = 130
						}
					} else {
						// 表体内容宽度大于表头内容宽度时，以表体宽度为主。根据表头的字符长度来区分宽度
						if (dw <= 3) {
							head['hWidth'] = 50
						} else if (dw <= 5) {
							head['hWidth'] = 80
						} else {
							head['hWidth'] = 130
						}
					}
					w+=head['hWidth'] //叠加表格总长度
				})
				this.tableWidths=w   //给表格赋值总长度
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100%;
	}

	// 表头
	.top {
		display: flex;
		position: sticky; //表头向上滚动时固定住
		top: 0;
		//width: 750px; //左右滚动时不会把固定的表头滚动走
		z-index: 100; //滑动时表头不被覆盖

		.header_dyg {
			height: 40px;
			text-align: center;
			line-height: 40px;
			border-top: 1px solid #ccc;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			padding: 0 5px;
			background-color: #f5f5f6;
			font-size: 14px;
			font-weight: bold;
			color: #2b2b2b;
			flex-shrink: 0;
		}

		// 列定位固定单元格
		.flexs {
			position: sticky;
			left: 0;
			background-color: #f5f5f6;
			z-index: 10;
		}
	}

	// 表格列表
	.bottom {
		//width: 750px;

		.tablebox {
			display: flex;
			font-size: 14px;

			.table_dyg {
				height: 30px;
				text-align: center;
				line-height: 30px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				border-right: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				padding: 0 5px;
				flex-shrink: 0;
			}

			// 列定位固定单元格
			.flexs {
				position: sticky;
				left: 0;
				background-color: #fff;
				z-index: 10;
			}
		}
	}

	// 列的颜色
	.tdColClass {
		background-color: #d9edf7;
	}

	// 行的颜色
	.tdRowClass {
		background-color: #afdfe4;
	}
</style>


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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236

然后父组件引入子组件使用

<template>
	<view class="box">
			<!-- 表格组件：参数解释：@getTextColor：调用方法判断数据后返回对比颜色，可以改变单元格文字的颜色 -->
			<!-- @getEdit：点击表格中编辑按钮会触发的方法  @getDelete：点击表格中删除按钮会触发的方法  @scrollBottom：滚动到底部时触发 @rowData：获取点击行的数据-->
			<!-- data：列表数据，格式和elementul表格一样，head：表头数据，格式[{name:'列名',key:'对应列表的key',bgcolor:1代表这一列添加背景色,flxe:1代表这一列固定}],tableHeight:表格表体高度 -->
			<tableDiv @scrollBottom='scrollBottom' @getTextColor='getRedText' @getEdit='editTable'
				@getDelete='deleteTable' @rowData='getRow' :data2='tableData' :head='header' :tableHeight='310'>
			</tableDiv>
		</view>
</template>

<script>
	import tableDiv from './tableDiv.vue'
	export default {
		components: {
			tableDiv
		},
		data() {
			return {
				//表体
				tableData: [{
					"date": "2020-09-01",
					"name": "11",
					"address": "上海市普陀区金沙江路 1518 弄",
					"age": "18",
					bgcolor: 1
				}, {
					"date": "2020-09-02",
					"name": "22",
					"address": "上海市普陀区金沙江路 1517 弄",
					"age": "18"
				}, {
					"date": "2020-09-03",
					"name": "33",
					"address": "上海市普陀区金沙江路 1519 弄",
					"age": "18"
				}, {
					"date": "2020-09-04",
					"name": "44",
					"address": "上海市普陀区金沙江路 1516 弄",
					"age": "18"
				}, {
					"date": "2020-09-05",
					"name": "55",
					"address": "上海市普陀区金沙江路 1518 弄",
					"age": "18"
				}, {
					"date": "2020-09-06",
					"name": "66",
					"address": "上海市普陀区金沙江路 1517 弄",
					"age": "18"
				}, {
					"date": "2020-09-06",
					"name": "66",
					"address": "上海市普陀区金沙江路 1517 弄",
					"age": "18"
				}, {
					"date": "2020-09-06",
					"name": "66",
					"address": "上海市普陀区金沙江路 1517 弄",
					"age": "18"
				}, {
					"date": "2020-09-06",
					"name": "66",
					"address": "上海市普陀区金沙江路 1517 弄",
					"age": "18"
				}, {
					"date": "2020-09-06",
					"name": "66",
					"address": "上海市普陀区金沙江路 1517 弄",
					"age": "18"
				}, {
					"date": "2020-09-06",
					"name": "66",
					"address": "上海市普陀区金沙江路 1517 弄",
					"age": "18"
				}, {
					"date": "2020-09-06",
					"name": "66",
					"address": "上海市普陀区金沙江路 1517 弄",
					"age": "18"
				}, {
					"date": "2020-09-06",
					"name": "66",
					"address": "上海市普陀区金沙江路 1517 弄",
					"age": "18"
				}],
				//表头
				header: [{
					name: '日期',
					key: 'date',
					flxe: 1 //固定的列，只能有一个列
				}, {
					name: '姓名',
					key: 'name',
					bgcolor: 1 //列底纹
					
				}, {
					name: '地址',
					key: 'address'
				}, {
					name: '年龄',
					key: 'age'
				}, {
					name: '年龄',
					key: 'age'
				}, {
					name: '操作',
					key: 'edit'
				}]
			}
		},
		methods: {
			// 自定义事件方法，业务逻辑判断是否需要标红，然后回调给子组件颜色
			getRedText(row, col, callback) {
				let color = 'black'
				// 判断值是否需要标红
				if (row[col.key] == '22') {
					color = 'red'
				} else {
					color = 'black'
				}
				// 通过回调函数返回值
				callback(color);
			},
			// 编辑按钮
			editTable(val){
				console.log(val,'编辑');
				uni.showToast({
					title: val.date+'编辑'
				})
			},
			// 删除按钮
			deleteTable(val){
				console.log(val,'删除');
				uni.showToast({
					title: val.date+'删除'
				})
			},
			// 滚动到底部
			scrollBottom(){
				uni.showToast({
					title: '滚动到底部了'
				})
				console.log('滚动到底部了');
			},
			//获取行的数据
			getRow(row){
			}
		}
	}
</script>

<style lang="scss">

</style>

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

注意点：

由于小程序不支持直接vue那种父子组件传参形式。拿不到数据，所以这里需要用watch监听一下props变化及时更新子组件。

H5页面是可以支持vue的原本写法的。直接进来拿props就可以使用了。所以这里直接created内赋值一下就可以了