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

<template>
	<!-- #ifdef H5 -->
	<tr class="uni-table-tr">
		<th v-if="selection === 'selection' && ishead" class="checkbox" :class="{ 'tr-table--border': border }">
			<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected"></table-checkbox>
		</th>
		<slot></slot>
		<!-- <uni-th class="th-fixed">123</uni-th> -->
	</tr>
	<!-- #endif -->
	<!-- #ifndef H5 -->
	<view class="uni-table-tr">
		<view v-if="selection" class="checkbox" :class="{ 'tr-table--border': border }">
			<table-checkbox :checked="checked" :indeterminate="indeterminate" :disabled="disabled" @checkboxSelected="checkboxSelected(checked)"></table-checkbox>
		</view>
		<slot></slot>
	</view>
	<!-- #endif -->
</template>

<script>
	import tableCheckbox from './table-checkbox.vue'
/**
 * Tr 表格行组件
 * @description 表格行组件 仅包含 th,td 组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=
 */
export default {
	name: 'uniTr',
	components: { tableCheckbox },
	props: {
		disabled: {
			type: Boolean,
			default: false
		},
		keyValue: {
			type: [String, Number],
			default: ''
		}
	},
	options: {
		virtualHost: true
	},
	data() {
		return {
			value: false,
			border: false,
			selection: false,
			widthThArr: [] as Array<number>,
			ishead: true,
			checked: false,
			indeterminate:false,
			root: Object,
			head: Object,
			rowData: Object
		}
	},
	created() {
		this.root = this.getTable()		
		this.head = this.getTable('uniThead')
		if (this.head != null) {
			this.ishead = false
			// #ifdef APP-NVUE
			let head = this.head as UniTheadComponentPublicInstance			
			head.init(this as UniTheadComponentPublicInstance)
			// #endif			
		}
		let root = this.root as UniTableComponentPublicInstance
		
		this.border = root != null ? root?.border as boolean : false;
		this.selection = root != null ? (root?.type!=null ? true : false)  : false;
		let trChildren = root != null ? root?.trChildren as UniTrComponentPublicInstance[] : [];
		trChildren.push(this)	
		const rowData = root?.data.find(v => v[root.rowKey] === this.keyValue)
		
		if(rowData!=null){
			this.rowData = rowData
		}
		let table = this.root as UniTableComponentPublicInstance
		table.isNodata()
	},
	mounted() {
		if (this.widthThArr.length > 0) {
		  const selectionWidth = this.selection === true ? 50 : 0
		  let root = this.root as UniTableComponentPublicInstance;
		  root.minWidth = this.widthThArr.reduce((a, b) => a as number + b as number) + selectionWidth 
		}
	},
	// #ifndef VUE3
	destroyed() {
		const index = this.root.trChildren.findIndex(i => i === this)
		this.root.trChildren.splice(index, 1)
		this.root.isNodata()
	},
	// #endif
	// #ifdef VUE3
	unmounted() {
		let root = this.root as UniTableComponentPublicInstance;
		const index = root.trChildren.findIndex(i => i === this)
		root.trChildren.splice(index, 1)
		root.isNodata()
	},
	// #endif
	methods: {
		minWidthUpdate(width: number) {
			this.widthThArr.push(width)
		},
		// 选中
	checkboxSelected(checked:Boolean) {
			let root = this.root as UniTableComponentPublicInstance			
			let rootData = root.data?.find(v => v[root.rowKey] === this.keyValue)
			this.checked = checked
			root.check(rootData!=null?rootData:this, checked,rootData!=null? this.keyValue as string:null, false)
		},
		change(e: any) {			
			let root = this.root as UTSJSONObject
			let trChildren = root?.['trChildren'] as UTSJSONObject[] ?? null
			let event = e as UTSJSONObject
			//let val = event != null && event['detail'] != null ? event['detail']?.['value'] as string : ''
			let val = (event['detail'] as UTSJSONObject)?.['value'] as string ?? '';
			trChildren?.forEach(item => {
				if (item === this) {
					let cls = this.root as UniTableComponentPublicInstance;
					cls.check(this, val!=''? true:false, this.keyValue as string, false)
				}
			})
		},
		/**
		 * 获取父元素实例
		 */
		getTable(name = 'uniTable') {
			let parent = this.$parent
			let parentName = parent?.$options?.name ?? ''
			while (parentName !== name) {
				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-tr {
	/* #ifndef APP-NVUE */
	/* #ifndef APP-ANDROID */
	display: table-row;
	/* #endif */
	transition: all 0.3s;
	box-sizing: border-box;
	/* #endif */
}

.checkbox {
	padding: 0 8px;
	width: 26px;
	padding-left: 12px;
	/* #ifndef APP-ANDROID */
	display: table-cell;
	vertical-align: middle;	
	font-weight: 500;
	/* #endif */	
	/* #ifdef H5 */
	font-size: 14px;
	color: #333;
	/* #endif */
	border-bottom: 1px $border-color solid;
	
	// 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>