Vue ElementUI table给表格一个斜线分隔线_vue表格实现表头的单元格斜杠分成两格

方式一：参考element表格表头斜杠，让你的数据更有条理_el-table 表头斜线-CSDN博客

缺点：当屏幕放大或者缩小的时候，斜线会变形，得使用@media screen根据屏幕大小一个个去调整，调得太麻烦了，就放弃了这种方式，感兴趣的可以试试

<el-table :data="tableData" border style="width: 100%">
	<el-table-column label="类型" width="150" align="center">
	     <el-table-column label="月份" width="150"></el-table-column>
    </el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
	<el-table-column label="日期"></el-table-column>
</el-table>
样式如下
/deep/ .el-table thead.is-group tr:first-of-type th:first-of-type {
		border-bottom: none; // 去掉中间横线
	}
 
	/deep/ .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
		text-align: right; // 上边文字靠右
	}
	/deep/ .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
		text-align: left; // 下边文字靠左
	}
 
	/deep/ .el-table thead.is-group tr:first-of-type th:first-of-type:before {
		content: '';
		position: absolute;
		width: 1px;
		height: 100px; // 斜线长度
		top: 0;
		left: 0;
		background-color: #fff;
		opacity: 0.2;
		display: block;
		transform: rotate(-43deg);
		transform: rotate(-71deg);
		// transform: rotate(286deg);
		-webkit-transform-origin: top;
		transform-origin: top;
	}
 
	/deep/ .el-table thead.is-group tr:last-of-type th:first-of-type:before {
		content: '';
		position: absolute;
		width: 1px;
		height: 100px;
		bottom: 0;
		right: 0;
		background-color: #fff;
		opacity: 0.2;
		display: block;
		transform: rotate(-43deg);
		transform: rotate(-70deg);
		// transform: rotate(286deg);
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}
	@media screen and(min-width: 550px) and (max-width: 1430px) {
		/deep/ .el-table thead.is-group tr:first-of-type th:first-of-type:before {
			transform: rotate(-62deg);
		}
		/deep/ .el-table thead.is-group tr:last-of-type th:first-of-type:before {
			transform: rotate(-62deg);
		}
	}
	@media screen and(min-width: 1430px) and (max-width: 1450px) {
		/deep/ .el-table thead.is-group tr:first-of-type th:first-of-type:before {
			transform: rotate(-62deg);
		}
		/deep/ .el-table thead.is-group tr:last-of-type th:first-of-type:before {
			transform: rotate(-62deg);
		}
	}

方式二：参考滑动验证页面

页面放大缩小斜线位置都不受影响

<el-table :data="tableData" border style="width: 100%">
			<el-table-column :resizable="false" class-name="column-custom" prop="date" label="日期" width="120">
				<template slot="header" slot-scope="scope">
					<div class="header-div">
						<div class="header-col1">区域</div>
						<div class="header-col2">类型</div>
						<div class="header-line"></div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
			<el-table-column prop="address" label="地址"> </el-table-column>
			<el-table-column label="1月"></el-table-column>
			<el-table-column label="2月"></el-table-column>
			<el-table-column label="3月"></el-table-column>
			<el-table-column label="4月"></el-table-column>
			<el-table-column label="5月"></el-table-column>
			<el-table-column label="6月"></el-table-column>
			<el-table-column label="7月"></el-table-column>
			<el-table-column label="8月"></el-table-column>
			<el-table-column label="9月"></el-table-column>
			<el-table-column label="10月"></el-table-column>
			<el-table-column label="11月"></el-table-column>
			<el-table-column label="12月"></el-table-column>
		</el-table>
 
样式：
/deep/.column-custom {
	padding: 0px !important;
}
 
/deep/.el-table--border .el-table__cell:first-child .cell {
	padding: 0 !important;
}
.header-div {
	height: 50px;
	position: relative;
}
.header-col1 {
	position: absolute;
	left: 0;
	bottom: 0;
}
.header-col2 {
	position: absolute;
	right: 0;
	top: 0;
}
.header-line {
	padding-left: 0;
	width: 1px;
	height: 150px;
	transform: rotate(-67deg); /*这里需要自己调整，根据线的位置*/
	-webkit-transform-origin: top;
	transform-origin: top;
	background-color: #fff;
}