QTApp_800/uni_modules/uni-table/components/uni-td/uni-td.vue

<template>
	<!-- #ifdef H5 -->
	<td class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
		<slot></slot>
	</td>
	<!-- #endif -->
	<!-- #ifndef H5 -->
	<!-- :class="{'table--border':border}"  -->
	<view class="uni-table-td" :class="{'table--border':border}" :style="{width:width.toString() + 'px','align-items':'center'}">
		<slot></slot>
	</view>
	<!-- #endif -->
	
</template>

<script>
	/**
	 * Td 单元格
	 * @description 表格中的标准单元格组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
	 * @property {Number} 	align = [left|center|right]	单元格对齐方式
	 */
	export default {
		name: 'uniTd',
		options: {
			virtualHost: true
		},
		props: {
			width: {
				type: [String, Number],
				default: ''
			},
			align: {
				type: String,
				default: 'left'
			},
			rowspan: {
				type: [Number,String],
				default: 1
			},
			colspan: {
					type: [Number,String],
				default: 1
			}
		},
		data() {
			return {
				border: false,
				root: Object
			};
		},
		created() {
			this.root = this.getTable();
			if(this.root!=null){
			  let root = this.root as UniTableComponentPublicInstance
			  this.border = root.border!=null? root.border as boolean : false;
			}
		},
		methods: {
			/**
			 * 获取父元素实例
			 */
			getTable() {
				let parent = this.$parent;
				let parentName = parent?.$options?.name ?? '';
				while (parentName !== 'uniTable') {
					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-td {
		/* #ifdef H5 */
		display: table-cell;
		line-height: 23px;
		font-size: 14px;
		color: #606266;
		font-weight: 400;
		/* #endif */
		/* #ifndef H5 */
		display: flex;
		align-items: center;
		/* #endif */
		padding: 8px 10px;		
		border-bottom: 1px $border-color solid;		
		box-sizing: border-box;
	}

	.table--border {
		border-right: 1px $border-color solid;
	}
</style>