front-end/ghsApp/src/components/plugin/t-table/t-th.vue

<template>
	<view
		class="t-th"
		:style="{
			flex: width ? `0 0 ${width}upx` : '1',
			'border-width': thBorder + 'upx',
			'border-color': borderColor,
			'font-size': fontSize + 'upx',
			'justify-content': thAlignCpd
		}"
	>
		<slot></slot>
	</view>
</template>

<script>
export default {
	props: {
		align: String,
		width: {
			type: Number | null,
			default: null
		}
	},
	data() {
		return {
			thBorder: "1",
			borderColor: "#d0dee5",
			fontSize: "24",
			thAlign: "center"
		};
	},
	inject: ["table", "tr"],

	created() {
		this.thBorder = this.table.border;
		this.borderColor = this.table.borderColor;
		this.fontSize = this.tr.fontSize;
		this.color = this.tr.color;

		if (this.align) {
			this.thAlign = this.align;
		} else {
			this.thAlign = this.tr.align;
		}
	},

	computed: {
		thAlignCpd() {
			let nameAlign = "";
			switch (this.thAlign) {
				case "left":
					nameAlign = "flex-start";
					break;
				case "center":
					nameAlign = "center";
					break;
				case "right":
					nameAlign = "flex-end";
					break;
				default:
					nameAlign = "center";
					break;
			}
			return nameAlign;
		}
	}
};
</script>

<style>
.t-th {
	flex: 1;
	display: flex;
	flex-shrink: 0;
	margin: 0 10upx;
	align-items: center;
	font-size: 24upx;
	font-weight: bold;
	text-align: center;
	color: #999;
	white-space: nowrap;
	/* border-left: 1upx #d0dee5 solid;
	border-top: 1upx #d0dee5 solid; */
}
</style>