實(shí)現(xiàn)思路

通過嵌套表頭將兩個標(biāo)題設(shè)置在一個單元格內(nèi)，再通過 CSS 樣式增加斜線效果。

知識點(diǎn)：el-table、::before、transform文章來源地址http://www.zghlxwxcb.cn/news/detail-660678.html

實(shí)現(xiàn)的代碼

<el-table :data="tableData" border>
	<!--重點(diǎn)代碼：采用嵌套的方式-->
   <el-table-column label="數(shù)據(jù)" align="right" width="150">
     <el-table-column prop="name" label="數(shù)據(jù)指標(biāo)" width="150">
     </el-table-column>
   </el-table-column>
   <el-table-column
     v-for="(col, i) in columnList"
     :key="i"
     :prop="col.prop"
     :label="col.label"
     align="center"
   >
     <template v-if="col.children">
       <el-table-column
         v-for="(item, index) in col.children"
         :key="index"
         :prop="item.prop"
         :label="item.label"
       >
       </el-table-column>
     </template>
   </el-table-column>
 </el-table>
 <style scoped>
/*表頭斜線*/

	/*::v-deep 這里主要的作用就是用來強(qiáng)制修改element默認(rèn)的樣式*/
	::v-deep  .el-table thead.is-group th {
        background: none;
        padding: 0px;
    }

    ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
        border-bottom: none;/*中間的橫線去掉*/
    }

    ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
        text-align: right;/*上邊文字靠右*/
    }

    ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
        text-align: left;/*下邊文字靠左*/
    }
    
	/*核心代碼*/
    ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
        content: "";
        position: absolute;
        width: 1px;
        height: 80px;/*斜線的長度*/
        top: 0;
        left: 0;
        background-color: #18449C;
        opacity: 1;
        display: block;
        transform: rotate(-61deg);/*調(diào)整斜線的角度*/
        -webkit-transform-origin: top;
        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: 80px;/*斜線的長度*/
        bottom: 0;
        right: 0;
        background-color: #18449C;
        opacity: 1;
        display: block;
        transform: rotate(-62deg);/*調(diào)整斜線的角度*/
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }
   
</style>

到了這里，關(guān)于element ui el-table 如何實(shí)現(xiàn)帶斜線的雙表頭的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！