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实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表. ...
随机推荐
- 并行网关 Parallel Gateway
并行网关 Parallel Gateway 作者:Jesai 2018年3月25日 00:26:21 前言: 做工作流时间长后,慢慢的就会发现,很多客户会需要会签的功能,会签的情况也有很多种,实现的方 ...
- (树形DP)Strategic game POJ - 1463
题意: 给你一棵树,树的每一个节点可以守护与其相连的所有边,问你最少用多少个节点可以守护这整棵树 思路: 仔细思考不难发现,要想守护一条边,边的两个端点必须有一个可以被选(两个都选也可以),然后这个问 ...
- 超越队西柚考勤系统——beta冲刺3
一.成员列表 姓名 学号 蔡玉蓝(组长) 201731024205 郑雪 201731024207 何玉姣 201731024209 王春兰 201731024211 二.SCRUM部分 (1)各成员 ...
- 19_07_08校内训练[grid]
题意 现有n*m的长方形网格,每个格子中写着一个数,并构成了[0,n*m)的排列.每次可以将一行循环平移x格,也可以将一列循环平移x格.给出初始状态,给出一个到达给定状态的方案.n*m<=100 ...
- zbar+opencv检测图片中的二维码或条形码
zbar本身自带检测二维码条形码功能,这里使用opencv只是做一些简单的读取图片,灰度图片以及显示条形码和二维码时用到一些绘制 // barcode-qrcodescanner.cpp: 定义控制台 ...
- Thumb.db看不到的问题
今天读取数据集的时候总是会读到一个Thumb.db的缩略图文件,点开查看选项里面的显示隐藏文件.文件夹处于勾选状态,此时文件夹中并不存在此文件. 解决方案: 勾选掉隐藏受保护的操作系统文件即可.
- 浅显易懂的前端知识点(二)——HTTP协议基础
HTTP 协议的初印象: 是基于 TCP/IP 协议的应用层协议,不涉及数据包的传输,主要规定了客户端和服务器之间的通信格式,默认使用 80 端口. 1 HTTP 协议 0.9 版(1991 年) 是 ...
- CSS DIV重叠
<div style="position: relative"> <div>content</div> <div style=" ...
- 练习:等待用户输入input()
等待用户输入 执行下面的程序在按回车键后就会等待用户输入: 实例(Python 3.0+) #!/usr/bin/python3 input("\n\n按下 enter 键后退出." ...
- Codeforces_714_B
http://codeforces.com/problemset/problem/714/B 当不同大小整数有1.2个时,肯定成立,3个时,需要判断,大于等于4个,则肯定不成立. #include & ...