QTApp_800/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: {
		virtualHost: true
	},
	data() {
		return {
			root: Object,
			border: false,
			selection: false,
			rowspan: 1,
			indeterminate: false,
			checked: false
		}
	},
	created() {
		this.root = this.getTable() as UniTableComponentPublicInstance
		// #ifdef H5
		this.root.theadChildren = this
		// #endif
		this.border = this.root != null ? (this.root as UTSJSONObject)?.['border'] as boolean : false;
		this.selection = this.root != null ? (this.root as UTSJSONObject)?.['type'] as boolean : false;
	},
	methods: {
		init(self:UniTheadComponentPublicInstance) {
			this.rowspan++
		},
		checkboxSelected(e:Event) {
			this.indeterminate = false
			const backIndexData = (this.root as UniTableComponentPublicInstance).backIndexData;
			const trChildren = (this.root as UniTableComponentPublicInstance).trChildren;
			const data = trChildren.filter(v => (v as UniTrComponentPublicInstance)?.disabled ==null && (v as UTSJSONObject)?.['keyValue']!=null)
			if (backIndexData.length === data.length) {
				this.checked = false
				let root = this.root as UniTableComponentPublicInstance	
				root.clearSelection()
			} else {
				this.checked = true
				let root = this.root as UniTableComponentPublicInstance
				root.selectionAll()
			}
		},
		/**
		 * 获取父元素实例
		 */
		getTable(name = 'uniTable') {
			let parent = this.$parent
			let parentName = parent?.$options?.name ?? ''
			while (parentName !== name) {
				parent = parent?.$parent ?? null
				if (parent==null) return false
				parentName = parent?.$options?.name as string
			}
			return parent
		}
	}
}
</script>

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

.uni-table-thead {
	/* #ifdef APP-ANDROID */
	  display: flex;
	/* #endif */
	/* #ifndef APP-ANDROID */
	display: table-header-group;
	/* #endif */
}

.uni-table-tr {
	/* #ifndef APP-ANDROID */
	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;	
	color: #333;
	/* #ifndef APP-ANDROID */
	display: table-cell;	
	font-weight: 500;
	vertical-align: middle;
	/* #endif */
	/* #ifdef APP-ANDROID */
	font-weight: bold;
	/* #endif */
	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>