mirror of
				https://gitee.com/hhyykk/ipms-sjy.git
				synced 2025-10-31 10:18:42 +08:00 
			
		
		
		
	初始化管理后台的 uniapp 版本
This commit is contained in:
		| @@ -0,0 +1,129 @@ | ||||
| <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 { | ||||
| 			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> | ||||
		Reference in New Issue
	
	Block a user
	 YunaiV
					YunaiV