card-wx-user/components/thorui/tui-tr/tui-tr.vue

<template>
	<view
		class="tui-table__row"
		:class="{ 'tui-flex-wrap': flexWrap, 'tui-table__fixed': fixed }"
		:style="{
			backgroundColor: backgroundColor,
			borderBottom: `${borderWidth} solid ${borderColor}`,
			borderLeft: borderLeft ? `${borderWidth} solid ${borderColor}` : '0',
			borderTop: borderTop ? `${borderWidth} solid ${borderColor}` : '0',
			left: fixed ? left : 'auto',
			right: fixed ? right : 'auto',
			top: fixed ? top : 'auto',
			marginTop: marginTop
		}"
		@tap="handleClick"
	>
		<slot></slot>
	</view>
</template>

<script>
//table tr
export default {
	name: 'tuiTr',
	emits: ['click'],
	options: {
		// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现
		virtualHost: true
	},
	props: {
		backgroundColor: {
			type: String,
			default: '#fff'
		},
		//border-bottom width
		borderWidth: {
			type: String,
			default: '1rpx'
		},
		//border-bottom color
		borderColor: {
			type: String,
			default: '#EAEEF5'
		},
		borderLeft: {
			type: Boolean,
			default: false
		},
		borderTop: {
			type: Boolean,
			default: false
		},
		flexWrap: {
			type: Boolean,
			default: false
		},
		fixed: {
			type: Boolean,
			default: false
		},
		left: {
			type: String,
			default: '0'
		},
		right: {
			type: String,
			default: '0'
		},
		top: {
			type: String,
			// #ifdef H5
			default: '44px',
			// #endif
			// #ifndef H5
			default: '0'
			// #endif
		},
		marginTop: {
			type: String,
			default: '0'
		},
		//行数索引
		index: {
			type: Number,
			default: 0
		},
		//参数
		params: {
			type: String,
			default: ''
		}
	},
	data() {
		return {};
	},
	methods: {
		handleClick() {
			this.$emit('click', {
				index: this.index,
				params: this.params
			});
		}
	}
};
</script>

<style scoped>
.tui-table__row {
	width: 100%;
	display: flex;
	box-sizing: border-box;
}

.tui-flex-wrap {
	flex-wrap: wrap;
}

.tui-table__fixed {
	position: fixed;
	z-index: 99;
}
</style>