样式如下
<template>
<div>
<el-table :data="tableData" border stripe>
<el-table-column prop="year" label="类型" width="150" align="center">
<el-table-column
prop="year"
label="序号"
align="center"
width="150"
></el-table-column>
</el-table-column>
<el-table-column
prop="fenopda"
label="重量"
align="center"
></el-table-column>
<el-table-column
prop="dwaiod"
label="长度"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="时间"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="负责人"
align="center"
></el-table-column>
<el-table-column
prop="province"
label="产地"
align="center"
></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableTitle:[{
}],
//模拟的假数据
tableData: [
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
zip: 200333,
dwaiod: "154",
fenopda: "89",
year: "1",
},
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
zip: 200333,
dwaiod: "154",
fenopda: "89",
year: "2",
},
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
zip: 200333,
dwaiod: "154",
fenopda: "89",
year: "3",
},
],
};
},
};
</script>
<style>
/* 这里主要的作用就是用来强制修改element默认的样式*/
.el-table thead.is-group th {
background: none;
padding: 0px;
height: 27.4px;
}
.el-table thead.is-group tr:first-of-type th:first-of-type {
border-bottom: none; /*中间的横线去掉*/
}
.el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
text-align: right; /*上边文字靠右*/
}
.el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
text-align: left; /*下边文字靠左*/
}
/*核心代码*/
.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: grey;
opacity: 0.2;
display: block;
transform: rotate(-70deg); /*调整斜线的角度*/
transform-origin: top;
}
.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: grey;
opacity: 0.2;
display: block;
transform: rotate(-70deg); /*调整斜线的角度*/
transform-origin: bottom;
}
</style>