logpm/compoment/MyTable/MyTable.vue

<template>
	<view class="my_table">
		<!-- 表头 -->
		<view class="my_table_row my_table_head">
			<!-- 是否复选框 -->
			<template v-if="props.haveSelection">
				<view class="selection td" @click.stop="handleClickAll">
					<view :class="
					{
						'checkbox':true,
						'active':details.isCheckAll === 2 || details.isCheckAll === 1,
						'PartialActivation': details.isCheckAll === 1
					}">
					</view>
				</view>
			</template>

			<block v-for="item in props.columnList">
				<view class="td" :style="{width: item.width || '100px'}">
					{{item.label}}
				</view>
			</block>
		</view>

		<!-- 表体 -->
		<template v-if="props.data.length > 0">
			<view class="my_table_body">
				<block v-for="(value, index) in props.data" :key="value">

					<view class="my_table_row my_table_data">
						<!-- 是否复选框 -->
						<template v-if="props.haveSelection">
							<view class="selection td" @click.stop="()=>handleCheckItem(value, index)">
								<view :class="{'checkbox':true, 'active':value.isCheck,}">
								</view>
							</view>
						</template>

						<block v-for="item in props.columnList" :key="item.label">
							<view class="td" :style="{width: item.width || '100px'}">
								{{value[item.prop]}}
							</view>
						</block>
					</view>
				</block>

			</view>
		</template>

		<template v-else>
			<view class="my_table_empty">
				暂无数据
			</view>
		</template>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, defineProps, defineEmits, watch } from 'vue';

	const props = defineProps({
		// 表头
		columnList: {
			type: Array,
			required: true
		},
		// 数据
		data: {
			type: Array,
			required: true
		},
		haveSelection: {
			type: Boolean,
			required: false,
			default: false
		}
	})

	const emits = defineEmits(['selectionChange'])

	const details = reactive({
		/** 是否全选 0 -- 全部未选, 1 -- 部分选择, 2 -- 全部选择 */
		isCheckAll: 0 as 0 | 1 | 2,
		/** 被选中的数组 */
		selectionList: []
	})


	/** 点击全选按钮 */
	const handleClickAll = () => {
		/** 全部取消 */
		const handleCheckByClose = () => {
			details.isCheckAll = 0

			for (let i = 0; i < props.data.length; i++) {
				props.data[i].isCheck = false
			}

			details.selectionList = []
		}

		/** 全选 */
		const handleCheckByAll = () => {
			details.isCheckAll = 2

			for (let i = 0; i < props.data.length; i++) {
				props.data[i].isCheck = true
			}

			details.selectionList = [...props.data]
		}

		switch (details.isCheckAll) {
			case 0:
				handleCheckByAll()
				break;

			case 1:
				handleCheckByAll()
				break;

			case 2:
				handleCheckByClose()
				break;
			default:
				break;
		}

	}

	/** 是否选中 */
	const handleIsCheck = () => {
		let _flag = false
		let _haveNot = false
		for (let i = 0; i < props.data.length; i++) {
			const item = props.data[i]

			!item.isCheck && (_haveNot = true)
			item.isCheck && (_flag = true)
		}

		if (!_flag) details.isCheckAll = 0
		else if (_haveNot) details.isCheckAll = 1
		else details.isCheckAll = 2
	}

	/** 点击 */
	const handleCheckItem = (value, index) => {
		value.isCheck = !value.isCheck

		if (value.isCheck) {
			details.selectionList.splice(index, 0, value)
		} else details.selectionList.splice(index, 1)

		handleIsCheck()
	}

	watch(() => props.data, () => {
		console.log('123 :>> ', 123);
		if (!props.haveSelection) return
		handleIsCheck()
	}, { deep: false, immediate: true })

	watch(() => details.selectionList, () => {
		console.log('111 :>> ', 111);
		if (!props.haveSelection) return
		emits('selectionChange', details.selectionList)
	}, { deep: true, immediate: true })
</script>

<style lang="scss" scoped>
	.my_table {
		$border: 2upx solid #aaa;

		border: $border;
		width: 100%;
		overflow-x: scroll;
		box-sizing: border-box;
		color: #606266;
		font-size: 0.8rem;

		.my_table_row {
			width: fit-content;
			min-width: 100%;
			display: flex;
		}

		.my_table_head {
			font-weight: bold;
			background-color: #f5f7fa;
			border-bottom: $border;
		}

		.my_table_data {
			border-bottom: $border;
			background-color: #fff;
			font-size: 0.75rem;

			&:last-child {
				border-bottom: none;
			}
		}

		.my_table_empty {
			// border-top: $border;
			height: 80upx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}


		.td {
			padding: 8upx;
			border-right: $border;
			display: inline-flex;
			align-items: center;
			flex: 1;
			word-break: break-all;

			&:last-child {
				border: none;
			}
		}

		.selection {
			padding: 8upx 20upx;
			flex: none;
		}
	}

	// 全选按钮
	.checkbox {
		border: 4upx solid #8d97a3;
		background-color: #fff;
		width: 40upx;
		height: 40upx;
		box-sizing: border-box;
		color: #8d97a3;
		border-radius: 6upx;
		position: relative;
		transition: all 0.3s;

		&::after {
			opacity: 0;
			content: '';
			border-bottom: 2px solid;
			border-left: 2px solid;
			position: absolute;
			left: 50%;
			width: 0;
			height: 0;
			transition: all 0.3s;
		}

		// 全选
		&.active {
			border-color: var(--subjectColor);
			color: var(--subjectColor);

			&::after {
				width: 30%;
				height: 70%;
				opacity: 1;
				border-color: var(--subjectColor);
				transform: translateX(-50%) rotateY(180deg) rotate(-45deg);
			}
		}

		// 部分选择
		&.PartialActivation {

			&::after {
				transform: translateX(-50%) rotateY(180deg) rotate(-90deg);
				border-bottom: none;
			}
		}
	}
</style>