element table表格表头显示斜杠/斜线

最新推荐文章于 2024-01-05 14:20:23 发布

meetAlice

最新推荐文章于 2024-01-05 14:20:23 发布

阅读量3.2k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42129143/article/details/118226015

版权

前端专栏收录该内容

30 篇文章 5 订阅

订阅专栏

<el-table
   :data="form.tableData"
   ref="table"
   tooltip-effect="dark"
   border
   height="100%"
   @selection-change='selectRow'>
   <el-table-column
      label="项目"
      align="right">
      <el-table-column
         prop="name"
         label="数量">
         <el-table-column
            width="150"
            prop="month"
            label="月份">
            <template slot-scope="scope">
                <el-form-item :prop="'tableData.' + scope.$index + '.taskCode'">
                   <el-input 
                      v-model="scope.row.new_exceptQuota" 
                      :disabled="requestStatus == 'detail'" 
                      clearable>
                   </el-input>
                </el-form-item>
             </template>
         </el-table-column>
      </el-table-column>
   </el-table-column>
   <el-table-column
      label="右侧大标题"
      align="center"
      :key="item">
      <el-table-column
         label="第二行第一列"
         align="center">
         <template slot-scope="scope">
            <el-form-item  :prop="'tableData.' + scope.$index + '.taskCode'">
               <el-input 
                    v-model="scope.row.new_exceptQuota" 
                    :disabled="requestStatus == 'detail'" 
                    clearable>
               </el-input>
             </el-form-item>
         </template>
      </el-table-column>


      //多个<el-table-column></el-table-column>


   </el-table-column>
</el-table>

样式部分：

/deep/ .el-table th{
	overflow: initial;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type,
/deep/ .el-table thead tr:nth-of-type(2) th:first-of-type{
	border-bottom: none;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type .cell{
	text-align: right;
}
/deep/ .el-table thead tr:nth-of-type(2) th:first-of-type .cell{
	padding-left: 0;
}
/deep/ .el-table thead tr:last-of-type th:first-of-type .cell{
	text-align: left;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type:before,
/deep/ .el-table thead tr:last-of-type th:first-of-type:before{
	content: '';
	position: absolute;
	width: 1px;
	background-color: #666;
	display: block;
}
/deep/ .el-table thead tr:first-of-type th:first-of-type:before {
	height: 198px; //根据情况调整
	top: 0; 
	left: 39px;  //根据情况调整
	transform: rotate(-34deg);  //根据情况调整
	transform-origin: top;
	z-index: 2;
}
/deep/ .el-table thead tr:last-of-type th:first-of-type:before {
	height: 183px;  //根据情况调整
	bottom: 0;
	right: 0;  //根据情况调整
	transform: rotate(-54deg);  //根据情况调整
	transform-origin: bottom;
}

完成效果：