uniapp-qxk/components/lf-table.vue

<template>
	<view class="formBox" :style="{width: formWidth,height: formHeight}">
		<!-- 表头 -->
		<view class="headerBox" :style="{height: formRowHeight,width: length + 'rpx',lineHeight:formRowHeight}">
			<view class="numberBox" v-if="showNumber" :style="{height: formRowHeight}">
				序号
			</view>
			<view  
				class="headerTitle" 
				v-for="(itemH, indexH) in Header"
				:key="indexH"
				:style="{height: formRowHeight,width: itemH.width+'rpx', border: border ? '1px solid #F6F6F6' : 'none', 'background-color': headBgColor}">
					{{itemH.text}}
			</view>
		</view>
		<view class="titel" v-if="Content.length <= 0">
			暂无数据
		</view>
		<view :style="{width: length + 'rpx'}">
			<view class="contentBox" v-for="(itemC,index) in Content" :key="index" @click="clickList(itemC,index)">
				<block v-for="(itemH,index2) in Header" :key="index2">
					<view class="keyBox" :style="{height: formRowHeight,width: itemH.width+'rpx', border: border ? '1px solid #F6F6F6' : 'none'}">
						{{itemC[itemH.key]}}
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	
/*
*
* 
* 
*/
	export default {
		name:'nk-form',
		props:{
			Header: {
				type: Array,
				default: ()=>{
					return []
				}
			},
			Content: {
				type: Array,
				default: ()=>{
					return []
				}
			},
			height: {
				type: [String,Number],
				default: 1000
			},
			width: {
				type: [String,Number],
				default: '600'
			},
			showNumber: {
				type: Boolean,
				default: true
			},
			rowHeight: {
				type: [String,Number],
				default: 80
			},
			border: {
				type: Boolean,
				default: true
			},
			headBgColor: {
				type: String,
				default: '#f7f5f6'
			}
		},
		data() {
			return {
				headerData:'',
				contentData:'',
				formWidth: '',
				formHeight: '',
				formRowHeight: '',
				length: 0
			};
		},
		created() {
			if(typeof this.width == 'string'){
				if(this.width.indexOf('rpx') > -1){
					this.formWidth = this.width;
				}
				if(this.width.indexOf('%') > -1){
					this.formWidth = this.width;
				}
				else{
					this.formWidth = this.width + 'rpx';
				}
			}else{
				this.formWidth = this.width + 'rpx';
			}
			if(typeof this.height == 'string'){
				if(this.height.indexOf('rpx') > -1){
					this.formHeight = this.height;
				}
				if(this.height.indexOf('%') > -1){
					this.formHeight = this.height;
				}
				else{
					this.formHeight = this.height + 'rpx';
				}
			}else{
				this.formHeight = this.height + 'rpx';
			}
			if(typeof this.rowHeight == 'string'){
				if(this.rowHeight.indexOf('rpx') > -1){
					this.formRowHeight = this.rowHeight + 'rpx';
				}
				if(this.rowHeight.indexOf('%') > -1){
					this.formRowHeight = this.rowHeight;
				}
				else{
					this.formHeight = this.height + 'rpx';
				}
			}else{
				this.formRowHeight = this.rowHeight + 'rpx';
			}
		},
		methods:{
			// 计算总长度
			getLength(){
				for(let i = 0; i < this.Header.length; i++){
					this.length = this.length + this.Header[i].width * 1;
				}
				if(this.showNumber){
					this.length = this.length + 80;
				}
			},
			
			// 点击事件
			clickList(event,index) {
				let data = {
					content: event,
					index: index
				}
				this.$emit("clickList",data);
			}
		},
		mounted:function(){
			this.getLength();
		}
	}
</script>

<style lang="scss">
.formBox{
	overflow: auto;
	position: relative;
	.headerBox{
		position: sticky;
		top: 0;
		display: flex;
		justify-content: flex-start;
		.numberBox,.headerTitle{
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 900;
			color: rgb(68, 68, 68);
			// background-color: #dddddd;
			background-color: #f7f5f6;
			border: 1px solid #F6F6F6;
			box-sizing: border-box;
		}
		.numberBox{
			width: 80rpx;
		}
	}
	.contentBox{
		.keyBox{
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 900;
			border: 1px solid #F6F6F6;
			box-sizing: border-box;
		}
	}
	// .contentBox:nth-child(2n){
	// 	background-color: #F1F1F1;
	// }
	.titel{
		text-align: center;
		margin-top: 80rpx;
		color: #007AFF;
	}
}


/* .headerBox{
	height: 60rpx;
	position: sticky;
	top: 0;
} */




// .headerBoxII{
// 	height: 60rpx;
// 	line-height: 60rpx;
// 	display: inline-block;
// 	text-align: center;
// 	font-size: 30rpx;
// 	font-weight: 900;
// 	color: rgb(68, 68, 68);
// }
// .headerBoxIII{
// 	background-color: #dddddd;
// 	border: 1px solid rgb(235, 238, 245);
// }
// .contentBox{
// 	height: 60rpx;
// 	line-height: 60rpx;
// 	float: left;
// 	text-align: center;
// }
// .contentBoxII{
// 	height: 60rpx;
// 	line-height: 60rpx;
// 	border: 1px solid rgb(235, 238, 245);
// }
// .contentBoxII:nth-child(2n){
// 	background-color: #E6E6E6;
// }
// .tipsBox{
// 	margin-top: 30rpx;
// 	font-size: 40rpx;
// 	text-align: center;
// 	color: #999;
// }
</style>