700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > element table表格表头显示斜杠/斜线

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

时间:2023-02-05 14:51:42

相关推荐

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

<el-table:data="form.tableData"ref="table"tooltip-effect="dark"borderheight="100%"@selection-change='selectRow'><el-table-columnlabel="项目"align="right"><el-table-columnprop="name"label="数量"><el-table-columnwidth="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-columnlabel="右侧大标题"align="center":key="item"><el-table-columnlabel="第二行第一列"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;}

完成效果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。