psy_web_share/components/t-table/t-table.vue

<template>
	<view class="t-table" :style="{ 'border-width': border + 'px', 'border-color': borderColor }">
		<slot />
	</view>
</template>

<script>
	export default {
		props: {
			border: {
				type: String,
				default: '1'
			},
			borderColor: {
				type: String,
				default: '#d0dee5'
			},
			isCheck: {
				type: Boolean,
				default: false
			}
		},
		provide() {
			return {
				table: this
			};
		},
		data() {
			return {};
		},
		created() {
			this.childrens = [];
			this.index = 0;
		},
		methods: {
			fire(e, index, len) {
				let childrens = this.childrens;
				console.log(childrens);
				// 全选
				if (index === 0) {
					childrens.map((vm, index) => {
						vm.checkboxData.checked = e;
						return vm;
					});
				} else {
					let isAll = childrens.find((n, ids) => ids !== 0 && !n.checkboxData.checked);
					childrens[0].checkboxData.checked = isAll ? false : true;
				}

				let fireArr = [];
				for (let i = 0; i < childrens.length; i++) {
					if (childrens[i].checkboxData.checked && i !== 0) {
						fireArr.push(childrens[i].checkboxData.value - 1);
					}
				}
				this.$emit('change', {
					detail: fireArr
				});
			}
		}
	};
</script>

<style scoped>
	.t-table {
		width: 100%;
		border: 1px #d0dee5 solid;
		border-left: none;
		border-top: none;
		box-sizing: border-box;
		border-radius: 10px;
		overflow: hidden;
	}

	.t-table>>>t-tr {
		display: flex;
	}
	.t-table>>>t-tr:nth-child(2n-1) {
		background: #BFF2FC;
	}
	.t-table>>>t-tr:nth-child(2n) {
		/* background: #f5f5f5; */
		background: #ECFCFF;
	}

	/* #ifdef H5 */
	.t-table>>>.t-tr:nth-child(2n) {
		background: #f5f5f5;
	}
	/* #endif */
</style>