chanyiUniapp/components/uni-table/uni-table.vue

<template>
	<view class="uni-table-scroll" :class="{ 'table--border': border, 'border-none': !noData }">
		<!-- #ifdef H5 -->
		<table class="uni-table" border="0" cellpadding="0" cellspacing="0" :class="{ 'table--stripe': stripe }" :style="{ 'min-width': minWidth + 'px' }">
			<slot></slot>
			<view v-if="noData" class="uni-table-loading">
				<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
			</view>
			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }">
				<div class="uni-table--loader"></div>
			</view>
		</table>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view class="uni-table" :style="{ 'min-width': minWidth + 'px' }" :class="{ 'table--stripe': stripe }">
			<slot></slot>
			<view v-if="noData" class="uni-table-loading">
				<view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
			</view>
			<view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }">
				<div class="uni-table--loader"></div>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	/**
	 * Table 表格
	 * @description 用于展示多条结构类似的数据
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
	 * @property {Boolean} 	border 				是否带有纵向边框
	 * @property {Boolean} 	stripe 				是否显示斑马线
	 * @property {Boolean} 	type 					是否开启多选
	 * @property {String} 	emptyText 			空数据时显示的文本内容
	 * @property {Boolean} 	loading 			显示加载中
	 * @event {Function} 	selection-change 	开启多选时，当选择项发生变化时会触发该事件
	 */
	export default {
		name: 'uniTable',
		options: {
			virtualHost: true
		},
		props: {
			data: {
				type: Array,
				default () {
					return []
				}
			},
			// 是否有竖线
			border: {
				type: Boolean,
				default: false
			},
			// 是否显示斑马线
			stripe: {
				type: Boolean,
				default: false
			},
			// 多选
			type: {
				type: String,
				default: ''
			},
			// 没有更多数据
			emptyText: {
				type: String,
				default: '没有更多数据'
			},
			loading: {
				type: Boolean,
				default: false
			},
			rowKey: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				noData: true,
				minWidth: 0,
				multiTableHeads: []
			}
		},
		watch: {
			loading(val) {},
			data(newVal) {
				let theadChildren = this.theadChildren
				let rowspan = 1
				if (this.theadChildren) {
					rowspan = this.theadChildren.rowspan
				}

				// this.trChildren.length - rowspan
				this.noData = false
				// this.noData = newVal.length === 0 
			}
		},
		created() {
			// 定义tr的实例数组
			this.trChildren = []
			this.thChildren = []
			this.theadChildren = null
			this.backData = []
			this.backIndexData = []
		},

		methods: {
			isNodata() {
				let theadChildren = this.theadChildren
				let rowspan = 1
				if (this.theadChildren) {
					rowspan = this.theadChildren.rowspan
				}
				this.noData = this.trChildren.length - rowspan <= 0
			},
			/**
			 * 选中所有
			 */
			selectionAll() {
				let startIndex = 1
				let theadChildren = this.theadChildren
				if (!this.theadChildren) {
					theadChildren = this.trChildren[0]
				} else {
					startIndex = theadChildren.rowspan - 1
				}
				let isHaveData = this.data && this.data.length.length > 0
				theadChildren.checked = true
				theadChildren.indeterminate = false
				this.trChildren.forEach((item, index) => {
					if (!item.disabled) {
						item.checked = true
						if (isHaveData && item.keyValue) {
							const row = this.data.find(v => v[this.rowKey] === item.keyValue)
							if (!this.backData.find(v => v[this.rowKey] === row[this.rowKey])) {
								this.backData.push(row)
							}
						}
						if (index > (startIndex - 1) && this.backIndexData.indexOf(index - startIndex) === -1) {
							this.backIndexData.push(index - startIndex)
						}
					}
				})
				// this.backData = JSON.parse(JSON.stringify(this.data))
				this.$emit('selection-change', {
					detail: {
						value: this.backData,
						index: this.backIndexData
					}
				})
			},
			/**
			 * 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
			 */
			toggleRowSelection(row, selected) {
				// if (!this.theadChildren) return
				row = [].concat(row)

				this.trChildren.forEach((item, index) => {
					// if (item.keyValue) {

					const select = row.findIndex(v => {
						//
						if (typeof v === 'number') {
							return v === index - 1
						} else {
							return v[this.rowKey] === item.keyValue
						}
					})
					let ischeck = item.checked
					if (select !== -1) {
						if (typeof selected === 'boolean') {
							item.checked = selected
						} else {
							item.checked = !item.checked
						}
						if (ischeck !== item.checked) {
							this.check(item.rowData || item, item.checked, item.rowData ? item.keyValue : null, true)
						}
					}
					// }
				})
				this.$emit('selection-change', {
					detail: {
						value: this.backData,
						index: this.backIndexData
					}
				})
			},

			/**
			 * 用于多选表格，清空用户的选择
			 */
			clearSelection() {
				let theadChildren = this.theadChildren
				if (!this.theadChildren) {
					theadChildren = this.trChildren[0]
				}
				// if (!this.theadChildren) return
				theadChildren.checked = false
				theadChildren.indeterminate = false
				this.trChildren.forEach(item => {
					// if (item.keyValue) {
					item.checked = false
					// }
				})
				this.backData = []
				this.backIndexData = []
				this.$emit('selection-change', {
					detail: {
						value: [],
						index: []
					}
				})
			},
			/**
			 * 用于多选表格，切换所有行的选中状态
			 */
			toggleAllSelection() {
				let list = []
				let startIndex = 1
				let theadChildren = this.theadChildren
				if (!this.theadChildren) {
					theadChildren = this.trChildren[0]
				} else {
					startIndex = theadChildren.rowspan - 1
				}
				this.trChildren.forEach((item, index) => {
					if (!item.disabled) {
						if (index > (startIndex - 1)) {
							list.push(index - startIndex)
						}
					}
				})
				this.toggleRowSelection(list)
			},

			/**
			 * 选中\取消选中
			 * @param {Object} child
			 * @param {Object} check
			 * @param {Object} rowValue
			 */
			check(child, check, keyValue, emit) {
				let theadChildren = this.theadChildren
				if (!this.theadChildren) {
					theadChildren = this.trChildren[0]
				}



				let childDomIndex = this.trChildren.findIndex((item, index) => child === item)
				if (childDomIndex < 0) {
					childDomIndex = this.data.findIndex(v => v[this.rowKey] === keyValue) + 1
				}
				const dataLen = this.trChildren.filter(v => !v.disabled && v.keyValue).length
				if (childDomIndex === 0) {
					check ? this.selectionAll() : this.clearSelection()
					return
				}

				if (check) {
					if (keyValue) {
						this.backData.push(child)
					}
					this.backIndexData.push(childDomIndex - 1)
				} else {
					const index = this.backData.findIndex(v => v[this.rowKey] === keyValue)
					const idx = this.backIndexData.findIndex(item => item === childDomIndex - 1)
					if (keyValue) {
						this.backData.splice(index, 1)
					}
					this.backIndexData.splice(idx, 1)
				}

				const domCheckAll = this.trChildren.find((item, index) => index > 0 && !item.checked && !item.disabled)
				if (!domCheckAll) {
					theadChildren.indeterminate = false
					theadChildren.checked = true
				} else {
					theadChildren.indeterminate = true
					theadChildren.checked = false
				}

				if (this.backIndexData.length === 0) {
					theadChildren.indeterminate = false
				}

				if (!emit) {
					this.$emit('selection-change', {
						detail: {
							value: this.backData,
							index: this.backIndexData
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	@charset "UTF-8";

	.uni-table-scroll {
		width: 100%;
		/* #ifndef APP-NVUE */
		overflow-x: auto;
		/* #endif */
	}

	.uni-table {
		position: relative;
		width: 100%;
		border-radius: 5px;
		background-color: #fff;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		display: table;
		overflow-x: auto;
		/* #endif */
	}

	.uni-table ::v-deep .uni-table-tr:nth-child(n+2):hover {
		background-color: #f5f7fa;
	}

	.uni-table ::v-deep .uni-table-thead .uni-table-tr:hover {
		background-color: #fafafa;
	}

	.table--border {
		border: 1px #ebeef5 solid;
		border-right: none;
	}

	.border-none {
		/* #ifndef APP-NVUE */
		border-bottom: none;
		/* #endif */
	}

	.table--stripe {
		/* #ifndef APP-NVUE */
		/* #endif */
	}

	.table--stripe ::v-deep .uni-table-tr:nth-child(2n+3) {
		background-color: #fafafa;
	}

	/* 表格加载、无数据样式 */
	.uni-table-loading {
		position: relative;
		/* #ifndef APP-NVUE */
		display: table-row;
		/* #endif */
		height: 50px;
		line-height: 50px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.empty-border {
		border-right: 1px #ebeef5 solid;
	}

	.uni-table-text {
		position: absolute;
		right: 0;
		left: 0;
		text-align: center;
		font-size: 14px;
		color: #999;
	}

	.uni-table-mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 0.8);
		z-index: 99;
		/* #ifndef APP-NVUE */
		display: flex;
		margin: auto;
		transition: all 0.5s;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.uni-table--loader {
		width: 30px;
		height: 30px;
		border: 2px solid #aaa;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		animation: 2s uni-table--loader linear infinite;
		/* #endif */
		position: relative;
	}

	@keyframes uni-table--loader {
		0% {
			transform: rotate(360deg);
		}

		10% {
			border-left-color: transparent;
		}

		20% {
			border-bottom-color: transparent;
		}

		30% {
			border-right-color: transparent;
		}

		40% {
			border-top-color: transparent;
		}

		50% {
			transform: rotate(0deg);
		}

		60% {
			border-top-color: transparent;
		}

		70% {
			border-left-color: transparent;
		}

		80% {
			border-bottom-color: transparent;
		}

		90% {
			border-right-color: transparent;
		}

		100% {
			transform: rotate(-360deg);
		}
	}
</style>