menduner-uniapp/uni_modules/uni-table/components/uni-thead/uni-thead.vue

<template>
	<!-- #ifdef H5 -->
	<thead class="uni-table-thead">
		<tr class="uni-table-tr">
			<th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
				<table-checkbox :indeterminate="indeterminate" :checked="checked"
					@checkboxSelected="checkboxSelected"></table-checkbox>
			</th>
		</tr>
		<slot></slot>
	</thead>
	<!-- #endif -->
	<!-- #ifndef H5 -->
	<view class="uni-table-thead">
		<slot></slot>
	</view>
	<!-- #endif -->
</template>

<script>
	import tableCheckbox from '../uni-tr/table-checkbox.vue'
	export default {
		name: 'uniThead',
		components: {
			tableCheckbox
		},
		options: {
			// #ifdef MP-TOUTIAO
			virtualHost: false,
			// #endif
			// #ifndef MP-TOUTIAO
			virtualHost: true
			// #endif
		},
		data() {
			return {
				border: false,
				selection: false,
				rowspan: 1,
				indeterminate: false,
				checked: false
			}
		},
		created() {
			this.root = this.getTable()
			// #ifdef H5
			this.root.theadChildren = this
			// #endif
			this.border = this.root.border
			this.selection = this.root.type
		},
		methods: {
			init(self) {
				this.rowspan++
			},
			checkboxSelected(e) {
				this.indeterminate = false
				const backIndexData = this.root.backIndexData
				const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
				if (backIndexData.length === data.length) {
					this.checked = false
					this.root.clearSelection()
				} else {
					this.checked = true
					this.root.selectionAll()
				}
			},
			/**
			 * 获取父元素实例
			 */
			getTable(name = 'uniTable') {
				let parent = this.$parent
				let parentName = parent.$options.name
				while (parentName !== name) {
					parent = parent.$parent
					if (!parent) return false
					parentName = parent.$options.name
				}
				return parent
			}
		}
	}
</script>

<style lang="scss">
	$border-color: #ebeef5;

	.uni-table-thead {
		display: table-header-group;
	}

	.uni-table-tr {
		/* #ifndef APP-NVUE */
		display: table-row;
		transition: all 0.3s;
		box-sizing: border-box;
		/* #endif */
		border: 1px red solid;
		background-color: #fafafa;
	}

	.checkbox {
		padding: 0 8px;
		width: 26px;
		padding-left: 12px;
		/* #ifndef APP-NVUE */
		display: table-cell;
		vertical-align: middle;
		/* #endif */
		color: #333;
		font-weight: 500;
		border-bottom: 1px $border-color solid;
		font-size: 14px;
		// text-align: center;
	}

	.tr-table--border {
		border-right: 1px $border-color solid;
	}

	/* #ifndef APP-NVUE */
	.uni-table-tr {
		::v-deep .uni-table-th {
			&.table--border:last-child {
				// border-right: none;
			}
		}

		::v-deep .uni-table-td {
			&.table--border:last-child {
				// border-right: none;
			}
		}
	}

	/* #endif */
</style>