Vue|Vue ElementUI table实现给表格一个单元格斜线分隔线
【Vue|Vue ElementUI table实现给表格一个单元格斜线分隔线】1、为了实现需求表头的一个单元格划分分割线如下图
文章图片
2、vue中使用elementui的table实现（本人用elementui比较多）
话不多说，效果图如下：
文章图片
代码如下：
区域
类型
/* 如果单元格的padding */
.elChgTbeClmn .cell {
padding: 0px !important;
}
.elHeadCon {
height: 50px;
position: relative;
}
.headerCon1 {
position: absolute;
left: 0;
bottom: 0;
}
.headerCon2 {
position: absolute;
right: 0;
top: 0;
}
.headerLine {
width: 1px;
height: 150px;
transform: rotate(-68deg);
/*这里需要自己调整，根据线的位置*/
transform-origin: top;
background-color: red;
}推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- tableView|tableView 头视图下拉放大 重写
- VueX--VUE核心插件
- 前端代码|前端代码 返回顶部 backToTop
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)