el-table合并表头，表头第一个添加斜线

斜线 主要添加css

  <div class="table other-table"><el-table border stripe :data="crossTableData" max-height="400"><!-- 谢谢的表头--><el-table-column prop="name" :label="总价段" width="90" align="center":fixed="true"><el-table-column prop="name" label="面积段" align="center" width="90"></el-table-column></el-table-column><el-table-column :label="item.label" :prop="item.prop" v-for="(item, key) of crossTableHeader"align="center" :key="key" :min-width="$global.pxFitScreen(item.width) || 'auto'":fixed="item.fixed"><template slot-scope="scope"><template v-if="item.label == '占比'">{{ scope.row[item.prop] ? scope.row[item.prop] + '%': '-'}}</template><template v-else><span v-if="scope.row.name == '合计'">{{ scope.row[item.label +CJmoneyCountListCheck.propTo] |tableFormatter }}</span><span v-else-if="scope.row.name == '占比'">{{ scope.row[item.label +CJmoneyCountListCheck.propZb] ? scope.row[item.label +CJmoneyCountListCheck.propZb] + '%' : '-'}}</span><span v-else>{{ scope.row[item.prop] | tableFormatter }}</span></template></template></el-table-column></el-table></div>

.other-table {/* 这里主要的作用就是用来强制修改element默认的样式*/::v-deep .el-table thead.is-group th {padding: 0px !important;height: 25px !important;}::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {border-bottom: none !important;/*中间的横线去掉*/}::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {text-align: right !important;/*上边文字靠右*/}::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {text-align: left !important;/*下边文字靠左*/}/*核心代码*/::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {content: "";position: absolute;width: 1px;height: 110px !important;/*斜线的长度*/top: 0;left: 0;background-color: grey;opacity: 0.2;display: block;transform: rotate(-60deg);/*调整斜线的角度*/transform-origin: top;}::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {content: "";position: absolute;width: 1px;height: 110px !important;/*斜线的长度*/bottom: 0;right: 0;background-color: grey;opacity: 0.2;display: block;transform: rotate(-60deg) !important;/*调整斜线的角度*/transform-origin: bottom;}}

多级表头合并表头

	<el-table border stripe :data="homeList"><el-table-column :label="item.label" :prop="item.prop" v-for="(item, key) of tableColumn1" align="center":key="key" :width="$global.pxFitScreen(item.width) || 'auto'" :fixed="item.fixed" show-overflow-tooltip><template slot-scope="scope"><span v-if="item.prop === 'competingAnomalyed'">{{ scope.row[item.prop] == 1 ? '是' : '否' }}</span><span v-else>{{ scope.row[item.prop] || '-' }}</span></template><!-- 二级表头 children--><template v-if="item.children"><el-table-column :label="item2.label" :prop="item2.prop" v-for="(item2, key2) of item.children"align="center" :key="key2" :width="$global.pxFitScreen(item2.width) || 'auto'"><template slot-scope="scope"><span v-if="item2.prop === 'competingAnomalyed'">{{ scope.row.competingAnomalyed == 1 ? '是' : '否' }}</span><span v-else>{{ scope.row[item2.prop] || '-' }}</span></template></el-table-column></template></el-table-column></el-table>

  data() {return {homeList:[],tableColumn1: [{ label: '项目名称', prop: 'homeName', width: 120, fixed: true },{label: "是否异动",prop: "competingAnomalyed",width: 60,},{label: 'PK自己(近四周)',children: [{label: "来访",prop: "visitDesc",width: 70,},{label: "认购",prop: "subscribeDesc",width: 70,},{label: "价格",prop: "priceDesc",width: 70,},],},{label: 'PK竞品(近四周)',children: [{label: "来访",prop: "ovisitDesc",width: 70,},{label: "认购",prop: "osubscribeDesc",width: 70,},{label: "价格",prop: "opriceDesc",width: 70,},],},],}
}