element table表格行展开列表的实现

UI图

难点

• element UI 并没有可以照搬的，只能我们自己对样式修改还原
• 下面展开的项 能够和上面 对齐
• 自适应屏幕缩放

已实现效果

屏幕自适应

可以看到基本效果已经实现出来了，剩下的一点也是小修小补了
其实实现下面内容能跟行对齐的重点也就是，
1.:resizable设置为"false"，不要给其拖动改变宽度
2.固定前面三列的宽度，下面内容直接通过margin-left的形式进行位置挪动
3.最后一行设置最小宽度，自适应

实现代码

html结构

<el-table :data="tableData" class="table" row-class-name="table-row" cell-class-name="table-cell">
			<el-table-column type="expand">
				<template slot-scope="props">
					<div class="table-list">
						<div v-for="item in props.row.times" :key="item.time" class="table-item">
							<div class="item-el-one">{{ item.time }}</div>
							<div class="item-el-two">{{ item.status }}</div>
							<div class="item-el-three">{{ item.name }}</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="日期" prop="date" :resizable="false" width="300"></el-table-column>
			<el-table-column label="预定时间" prop="time" :resizable="false" width="300"></el-table-column>
			<el-table-column label="状态" prop="status" :resizable="false" width="300"></el-table-column>
			<el-table-column label="预定人" prop="name" :resizable="false" min-width="120"></el-table-column>
		</el-table>

data数据结构

tableData: [
	{
		id: '12987122',
		name: '好滋好味',
		date: '2021-1-01',
		time: '09:00-10:30',
		status: '已预订',
		times: [
			{ name: '好滋', time: '09:00-10:30', status: '已预订' },
			{ name: '好味', time: '11:00-12:30', status: '待审核' }
		]
	},
	{
		id: '12987122',
		name: '鸡蛋仔',
		date: '2021-1-02',
		time: '09:00-10:30',
		status: '待审核',
		times: [
			{ name: '请问', time: '09:00-10:30', status: '已预订' },
			{ name: '维尔', time: '11:00-12:30', status: '已预订' }
		]
	}
],

css样式

	.table {
		&::before {
			display: none;
		}
		border: 0;
		::v-deep .el-table__expand-column {
			border-right: 0;
		}
		::v-deep .el-table th.is-leaf {
			border: 0;
		}
		::v-deep .el-table__body tr:hover > td {
			background-color: #fff;
		}
		::v-deep .table-cell {
			border: 0;
		}
		::v-deep .table-row {
			border-top: 1px solid #efefef;
			&:first-child {
				border: 0;
			}
		}
		::v-deep table {
			border-collapse: collapse;
		}
		.table-list {
			.table-item {
				display: flex;
				margin: 23px 0;
				&:first-child {
					margin: 0;
				}
				&:last-child {
					margin-bottom: 10px;
				}
			}
			.item-el-one {
				width: 100px;
				margin-left: 368px;
			}
			.item-el-two {
				width: 100px;
				margin-left: 200px;
			}
			.item-el-three {
				width: 100px;
				margin-left: 200px;
			}
		}
	}