vue element 表头添加斜线
<template>
<div class="app-container">
<el-table :data="tableData3" style="width: 100%">
<el-table-column width="120" prop="date"></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column label="地址">
<el-table-column prop="province" label="省份" width="120"></el-table-column>
<el-table-column prop="city" label="市区" width="120"></el-table-column>
<el-table-column prop="address" label="地址" width="300"></el-table-column>
<el-table-column prop="zip" label="邮编" width="120"></el-table-column>
</el-table-column>
</el-table>
</div>
</template> <script>
export default {
filters: {},
data() {
return {
tableData3: [{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
}
},
created() {},
methods: {}
}
</script>
<style lang="scss">
.el-table thead.is-group th {
background: #fff;
} .el-table thead.is-group tr:first-of-type th:first-of-type:before {
content: '日期';
text-align: center;
position: absolute;
width: 152px;
height: 1px;
bottom: 30px;
right: 0;
} .el-table thead.is-group tr:first-of-type th:first-of-type:after {
content: '配送新增';
text-align: center;
position: absolute;
width: 152px;
top: 10px;
left: 0;
} .el-table thead.is-group tr:first-of-type th:first-of-type .cell {
position: absolute;
top: 0;
left: 0;
width: 152px;
height: 1px;
background-color: #EBEEF5;
display: block;
text-align: center;
transform: rotate(38deg);
transform-origin: top left;
-ms-transform: rotate(38deg);
-ms-transform-origin: top left;
-webkit-transform: rotate(38deg);
-webkit-transform-origin: top left;
}
</style>
效果:

vue element 表头添加斜线的更多相关文章
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo
1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js image.png 2 .修改固定头部Header和侧边栏 Logo: image.png 1)侧边栏文 ...
- 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)
在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- vue+element 实现商品sku效果
在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能.实现的效果如下图 除成本.售价.库存.货号这几个写死的属性外,可自行添加/删除商品属性,自行添加 ...
- 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚
新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...
- vue+element 动态表单验证
公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
- GitHub Vue项目推荐|Vue+Element实现的电商后台管理系统功能丰富
GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表. ...
随机推荐
- ForkJoin统计文件夹中包含关键词的数量
2018-06-09总结: ForkJoin确实可以很快速的去解析文件并统计关键词的数量,但是如果文件过大就会出现内存溢出,是否可以通过虚拟内存方式解决内存溢出的问题呢? package com.ox ...
- Qt Installer Framework翻译(5-4)
自定义安装程序 您可以使用脚本通过以下方式来自定义安装程序: > 添加Qt Installer Framework操作,该操作由脚本提供,并由安装程序执行. > 添加新页面,该页面由您在p ...
- 美食家App开发日记4
研究了卡片式布局中的Recyclerview的用法,但是调试了很长时间,导入包总是有问题,一到手机上运行就会闪退.还是在网上查了很多方法,很不开心我还是解决不了.
- HCNA 2017年01月26日
[Huawei]ping 127.0.0.1 PING 127.0.0.1: 56 data bytes, press CTRL_C to break Reply from 127.0.0.1: by ...
- 软件发布!DOTA2统计学
更新日志: 1.2 增加DOTABUFF作为数据源,可以与DOTAMAX切换 1.1 增加关于对话框 增加版本信息 修复列表框头的错误 受到 http://tieba.baidu.com/p/38 ...
- 团队项目—Beta版本冲刺3
博客介绍 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业要求在哪里 https://w ...
- jenkins集成jmeter-进阶篇
1.gitlab自动触发jenkins构建 1⃣️安装插件: 2⃣️新建工程,设置git url,build when a change is pushed auto.sh /bin/sh echo ...
- X-CTF(REVERSE入门) re1
运行程序 32位ida打开,shift+f12查看运行时的中文,这里双击flag get字符串进入rdata段 双击后面的函数,进入text段,小的窗口视图里可以看见汇编代码调用函数的句子 右边的即是 ...
- Maven的scope属性作用域范围
在POM 4中,<dependency>中还引入了<scope>,它主要管理依赖的部署.目前<scope>可以使用5个值: 1. compile,缺省值,适用于所有 ...
- Linux防火墙之iptables常用扩展匹配条件(一)
上一篇博文讲了iptables的基本匹配条件和隐式匹配条件,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12269717.html:今天在来说说iptabel ...