<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. Django后台管理系统的使用

    目录 django后台管理系统的使用 检查配置文件 检查根urls.py文件 启动项目,浏览器输入ip端口/admin 如: 127.0.0.1/8000/admin 回车 注册后台管理系统超级管理 ...

  2. Git基础知识 —— 获取Git仓库

    前言 官方提供了两种获取Git仓库的方法,第一种是在本地现有项目目录下导入所有文件到Git中,第二种就是从Git仓库中clone项目到本地 这里就不说Git的安装了哈,有需要的小伙伴可以查看该博文:h ...

  3. python 进程事件

    1.作用 通过信号量,控制全部进程进入阻塞状态,也可以通过控制信号量,解除全部进程的阻塞 注意:定义的事件对象,默认状态是阻塞 2.常用方法 """ 对象.set() 作 ...

  4. 团队项目-Beta冲刺1(七个小矮人)

    团队项目-Beta冲刺1(七个小矮人) 一.格式描述 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScien ...

  5. laravel aritisan命令大全

    1常用命令 显示某个命令的帮助 php artisan -h make:controller 实例命令 php artisan make:controller -r Api/TestControlle ...

  6. iOS开发tip-图片方向

    概述 相信稍微接触过iOS图片相关操作的同学都遇到过图片旋转的问题,另外使用AVFoundation进行拍照的话就会遇到前后摄像头切换mirror问题就让人更摸不着头脑了.今天就简单和大家聊一下iOS ...

  7. Python3基础之正则表达式

    正则表达式 在线测试工具 http://tool.chinaz.com/regex/ 同一个位置上可以出现的字符的范围. 字符组 : [字符组] 在同一个位置可能出现的各种字符组成了一个字符组,在正则 ...

  8. Python中__init__的用法和理解

    在Python中定义类经常会用到__init__函数(方法),首先需要理解的是,两个下划线开头的函数是声明该属性为私有,不能在类的外部被使用或访问.而__init__函数(方法)支持带参数类的初始化, ...

  9. mysql 记录一次内存清理

    摘自:https://blog.csdn.net/wyzxg/article/details/7279986/ 摘要:Linux对内存的管理与Windows不同,free小并不是说内存不够用了,应该看 ...

  10. MVC的概念

    MVC模式的概念: 1.Model(业务模型):应用程序中用于处理应用程序数据逻辑的部分,通常模型对象负责在数据库中存取数据. 说白了就是确定要打的地基等一系列信息的. 2.view(视图):应用程序 ...