前端基础学习-element-ui表格表头做成斜线表头

这部分代码样式部分参照表头斜线
首先上效果图

这里主要是针对二级表头对其样式进行选择修改，这里需要注意一定要是二级表头才能做出这样的效果

html代码

        <el-table  :data="slashList" border height="400"><el-table-column label="信息" show-overflow-tooltip width="140" align="right"><el-table-column prop="title" label="标题" show-overflow-tooltip width="120" align="left"></el-table-column></el-table-column><el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column><el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column><el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column></el-table>

这里的表格数据是通过mock模拟的，前面博文有说过，就不再赘述了
css代码
这部分主要参照了开头引入的链接，注意不要放在scope中

<style>
.el-table thead.is-group th {background: none;
}
.el-table thead.is-group tr:first-of-type th:first-of-type {border-bottom: none;
}
.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.3;display: block;transform: rotate(-57deg);transform-origin: top;
}
.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.3;display: block;transform: rotate(-56deg);transform-origin: bottom;
}
</style>

前端基础学习-element-ui表格表头做成斜线表头相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
前端基础学习html部分小结
前端基础学习html部分小结 1 了解知识 1.1 网页的组成 html(Hyper Text Markup Language)指的是超文本标记语言,可以加入图片.声音.动画.多媒体等内容.还可以从一 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
前端基础：通过HTML表格标签布局《餐饮菜谱》
前端基础:通过HTML表格标签布局<餐饮菜谱> 布局,是前端工作的第一步,也是前端页面能够得到展示的技术手段.对于表格式布局是简单的页面布局的基础,它是无法解决浏览器兼容性问题,因此这种布 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...

前端基础学习-element-ui表格表头做成斜线表头

前端基础学习-element-ui表格表头做成斜线表头相关推荐

最新文章

热门文章