快捷導(dǎo)航

vue+scss+element-ui實現(xiàn)表格表頭斜杠一分為三方式

更新時間：2024年08月06日 09:30:52 作者：A1203228440

這篇文章主要介紹了vue+scss+element-ui實現(xiàn)表格表頭斜杠一分為三方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue+scss+element-ui表格表頭斜杠一分為三

看了網(wǎng)上很多博客，大部分都是表頭第一個斜線一份為2的樣式，今天寫一個樣式一分為3的樣式，可以根據(jù)項目情況適當(dāng)增加或減少分割

<template>
  <div>
    <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">區(qū)域</div>
          <div class="header-col2">類型</div>
          <div class="header-col3">水量</div>
          <div class="header-line1"></div>
          <div class="header-line2"></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月" prop="January" ></el-table-column>
    <el-table-column label="2月" prop="February" ></el-table-column>
    <el-table-column label="3月" prop="March" ></el-table-column>
  </el-table> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {date:"2024",address:"陜西省西安市吉祥村",January:'January',February:"February",March:'March'}
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
/deep/.column-custom {
	padding: 0px;
}
 

.header-div {
	height: 80px;
	position: relative;
}
.header-col1 {
	position: absolute;
	left: 0;
	bottom: 0;
}
.header-col2 {
	position: absolute;
	right: 0;
	top: 0;
}
.header-col3 {
	position: absolute;
	right: 0;
	bottom: 0;
}

/deep/.el-table--border .el-table__cell:first-child .cell {
  padding: 0;
}
.header-line1 {
	padding-left: 0;
	width: 1px;
	height: 150px;
	transform: rotate(-67deg); /*這里需要自己調(diào)整，根據(jù)線的位置*/
	-webkit-transform-origin: top;
	transform-origin: top;
	background-color: red;/*這里需要自己調(diào)整，根據(jù)線條的顏色*/

}
.header-line2 {
	padding-left: 0;
	width: 1px;
	height: 150px;
	transform: rotate(-41deg); /*這里需要自己調(diào)整，根據(jù)線的位置*/
	-webkit-transform-origin: top;
	transform-origin: top;
	background-color: blue;/*這里需要自己調(diào)整，根據(jù)線條的顏色*/
  position: absolute;
  top: 0;
  left: 0;

}
</style>

element ui el-table實現(xiàn)帶斜線的雙表頭

實現(xiàn)思路

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

知識點：el-table、::before、transform

實現(xiàn)的代碼

<el-table :data="tableData" border>
	<!--重點代碼：采用嵌套的方式-->
   <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 這里主要的作用就是用來強制修改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>