element表格表头显示斜杠

最近开发碰到项目原型图的表格的表头有一个斜杠展示效果，通过修改element原有的样式也是成功将这个效果做了出来，话不多说，直接上代码。

html

<div><el-table  :data="tableData" border stripe><el-table-column prop="year" label="机械类型" width="150" align="center"><el-table-column prop="year" label="排放参数" align="center" width="150"></el-table-column></el-table-column><el-table-column prop="fenopda" label="挖掘机（千克）" align="center"></el-table-column><el-table-column prop="dwaiod" label="推土机（千克）" align="center"></el-table-column><el-table-column prop="date" label="装载机（千克）" align="center"></el-table-column><el-table-column prop="name" label="叉车（千克）" align="center"></el-table-column><el-table-column prop="province" label="压路机（千克）" align="center"></el-table-column><el-table-column prop="city" label="摊铺机（千克）" align="center"></el-table-column><el-table-column prop="address" label="平地机（千克）" align="center"></el-table-column><el-table-column prop="zip" label="其他（千克）" align="center"></el-table-column></el-table>
</div>

data

data() {return {//模拟的假数据tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路',zip: 200333,dwaiod:"154",fenopda:"89",year:"12178"}]}},

核心 css

<style scoped>/*::v-deep 这里主要的作用就是用来强制修改element默认的样式*/::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: 100px;/*斜线的长度*/top: 0;left: 0;background-color: grey;opacity: 0.2;display: block;transform: rotate(-43deg);/*调整斜线的角度*/transform: rotate(-70deg);/*调整斜线的角度*/-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: 100px;/*斜线的长度*/bottom: 0;right: 0;background-color: grey;opacity: 0.2;display: block;transform: rotate(-45deg);/*调整斜线的角度*/transform: rotate(-70deg);/*调整斜线的角度*/-webkit-transform-origin: bottom;transform-origin: bottom;}::v-deep .el-table thead.is-group th{height: 27.4px;}
</style>

展示效果

彩蛋： 表格多选框后面增加 “全选” 字样

<style scoped>
::v-deep .el-table__header .el-table-column--selection .cell .el-checkbox:after {font-weight: bold;color: rgb(144, 147, 153);margin-left: 6px;font-size: 14px;content: "全选";
}
</style>

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

element table表格表头显示斜杠/斜线
<el-table:data="form.tableData"ref="table"tooltip-effect="dark"bord ...
element表格el-table表头显示斜杠
需求:如上图所示,表格的表头有一个斜杠展示效果解决方法: 通过穿透修改element原有的样式也是成功将这个效果做了出来,详细单页代码如下,话不多说,直接上代码. <template>& ...
原生的HTML Table表格实现表头添加斜杠
原生的HTML Table表格实现表头添加斜杠其实就是实现类似的这样一个功能,但是呢,方式很多,有的要固定长宽,有的要固定大小,有的要写JS,有的要用动画,很费劲,然后从网上找了一个demo,稍微改 ...
element 表格内显示图片
element 表格内显示图片先看下效果图,如下: 再看下前端代码: <el-table :data="gridData" height="400" b ...
齐全的Latex表格样式(有斜杠)
示例一: \begin{table*}\centering\fontsize{9}{12}\selectfont\caption{This is a visual sample.}\label{ta ...
css3中斜杠_使用斜杠语法设置CSS3边界半径
css3中斜杠 What could I possibly say about the CSS3 border-radius property that hasn't been said before ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
elementui 表格表头竖着显示_Vue+Element自定义纵向表格表头教程
如下所示: 代码如下: {{ item.key }} {{ item.value }} 绑定的是 statDatas 属性是一个 json数组,由key value组成的json,如果需要多列就直接增 ...
php td生成excel 斜杠表头_邮件合并功能都不掌握，还怎么成为Excel达人？
关于邮件合并,并不是一个新鲜的话题,但是对于好多同学总是使用不好,例如批量打印收据.带照片的证件等.针对此类情况,本文将对邮件合并的批量打印功能做详细的讲解,希望对大家的工作有所帮助. 一.批量打印收 ...

element表格表头显示斜杠

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

最新文章

热门文章