<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 表头添加斜线的更多相关文章

  1. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  2. vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo

    1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文 ...

  3. 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  4. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  5. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  6. vue+element 实现商品sku效果

    在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能.实现的效果如下图 除成本.售价.库存.货号这几个写死的属性外,可自行添加/删除商品属性,自行添加 ...

  7. 新书上线:《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》,欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  8. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  9. GitHub Vue项目推荐|Vue+Element实现的电商后台管理系统功能丰富

    GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表. ...

随机推荐

  1. JDBC超时设置【转】

    恰当的JDBC超时设置能够有效地减少服务失效的时间.本文将对数据库的各种超时设置及其设置方法做介绍. 真实案例:应用服务器在遭到DDos攻击后无法响应 在遭到DDos攻击后,整个服务都垮掉了.由于第四 ...

  2. kubernetes concepts -- Termination Of Pod

    Pods are the smallest deployable units of computing that can be created and managed in Kubernetes. W ...

  3. C++ 引用分析

    引用 左值引用,建立既存对象的别名 右值引用,可用于为临时对象延长生命周期 转发引用,保持函数实参的类别 悬置引用,对象生命周期已经结束的引用,访问改引用为未定义行为 值类别,左值,纯右值,亡值 st ...

  4. 定义可选URL片段 定义自定义片段变量 精通ASP-NET-MVC-5-弗瑞曼

  5. es6 promise 简单总结

    话不多说,直捣主题. promise用途:异步编程的一种解决方案. 优点:比传统的解决方案——回调函数和事件——更合理和更强大. 三种状态:pending(进行中).fulfilled(已成功)和re ...

  6. SpringBoot初级知识总结,太难了,未完待续.......

    idea如何打包发布springboot 1.1.环境准备window系统,jdk8环境,springboot项目,maven3.5.4环境 1.2.进行打包发布 打开idea编辑器,打开一个写好的d ...

  7. 吉哥系列故事——恨7不成妻(数位dp)

    吉哥系列故事--恨7不成妻 传送门 Problem Description 单身! 依然单身! 吉哥依然单身! DS级码农吉哥依然单身! 所以,他生平最恨情人节,不管是214还是77,他都讨厌! 吉哥 ...

  8. Web自动化测试项目搭建目录

    Web自动化测试项目搭建(一) 需求与设计 Web自动化测试项目(二)BasePage实现 Web自动化测试项目(三)用例的组织与运行 Web自动化测试项目(四)测试报告 Web自动化测试项目(五)测 ...

  9. java.net.UnknownHostException 异常处理(个人案例)

    案例 今天在公司开发中,遇到一个比较奇怪的异常 ,java.net.UnknownHostException 异常处理  ,一直没找到什么好的办法解决 解决方案 在公司的项目开发中,项目都是连了很多个 ...

  10. File流与IO流 看这一篇就够了

    主要内容 File类 递归 IO流 字节流 字符流 异常处理 Properties 缓冲流 转换流 序列化流 打印流 学习目标 [ ] 能够说出File对象的创建方式 [ ] 能够说出File类获取名 ...