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;
}

完成效果：

element table表格表头显示斜杠/斜线相关推荐

element表格el-table表头显示斜杠
需求:如上图所示,表格的表头有一个斜杠展示效果解决方法: 通过穿透修改element原有的样式也是成功将这个效果做了出来,详细单页代码如下,话不多说,直接上代码. <template>& ...
table表格表头单元格添加斜线
<!DOCTYPE html> <html> <head><title>表格斜线</title><style>html {hei ...
原生的HTML Table表格实现表头添加斜杠
原生的HTML Table表格实现表头添加斜杠其实就是实现类似的这样一个功能,但是呢,方式很多,有的要固定长宽,有的要固定大小,有的要写JS,有的要用动画,很费劲,然后从网上找了一个demo,稍微改 ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
table表格取消显示表头
vue之element,使element的table表格不显示表头使用show-header属性:
element table固定表头，表的高度自适应解决方法
element table固定表头,表的高度自适应解决方法参考文章: (1)element table固定表头,表的高度自适应解决方法 (2)https://www.cnblogs.com/muou ...
element更改表格表头、行、指定单元格样式
element更改表格表头.行.指定单元格样式更改表格的样式使用header-cell-style属性,可为函数或对象函数写法  <el-table ...
element table表格里的多选按钮，根据条件判断是否可以被选中
element table表格里的多选按钮,根据条件判断是否可以被选中 <el-table v-loading="loading" :data="contentLi ...
element Table表格实现前x行恒展示，不会被折叠，设置点击表头按钮排序。
table表格前X行恒展示不会被折叠. 表头筛选按钮示意图: // data --渲染的数据(每一列每一行),请求回来的. 默认通过字段名和每一个headers对象中每一个prop来对应起来渲染数据的 ...

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

element table表格表头显示斜杠/斜线相关推荐

最新文章

热门文章