效果

效果如图：

（最上面一层还有一个一级表头，图示单元格为二级表头）

实现

利用render函数，将单元格上下两部分内容写到一个单元格里，并使其位置错开，可以按照美感自己手动调：

children: [{title: '',key: '品种',align: 'center',width: 150,renderHeader: (h, params) => {return h('div', {style: {width: '100px',height: '50px',display: 'flex','flex-direction': 'column','border-right': '1px solid #e8eaec'}}, [h('strong', {style: {'margin-bottom': '10px','margin-left': '40px'}}, '品种'),h('strong', {style: {'margin-right': '40px'}}, '策略类名')])
}]

在其中插入我们想加的斜线，方法有很多种，我直接用的连字符 ‘_________’ ,然后修改其样式，进行平移旋转等：

h('strong', {style: {'position': 'absolute','transform': 'rotate(22deg) translateY(15px) translateX(-10px)','color': '#e8eaec','left': '0px','top': '38px'}}, '_________________________'),

不要忘记加 'position': 'absolute' 否则单元格会被撑的很大，absolute可以使斜线脱离文档流~

就成啦！

iView的表格做一个带斜线的表头相关推荐

结构建模设计——Solidworks软件之使用钣金折弯功能做一个带折弯固定口的铝合金面板
[系列专栏]:博主结合工作实践输出的,解决实际问题的专栏,朋友们看过来! <QT开发实战> <嵌入式通用开发实战> <从0到1学习嵌入式Linux开发> <A ...
table表格做一个表头斜线样式
具体代码实现如下: <!doctype html> <html lang="en"> <head><meta charset=" ...
简简单单做一个带过期时间的内存缓存
做手机验证码的时候,一般都有五分钟或十分钟的限时机制,所以就需要把"号码–验证码"的信息暂存起来,过期便无效--类似于 Redis 自带过期的机制就适合了.不过应用 Redis 此 ...
视频网站开发：JavaWeb做一个带自定义小表情的评论功能
前几天一直在做视频网站的评论功能,如今虽然说做的不是很好,但也算是挺满意的实现了.自我感觉做的最好的最有花样的就是为评论功能添加了小表情评论.见如下效果图 1.首先第一步,收集你想要使用的小表情,我因 ...
Android等待对话框（做一个带动态效果的对话框）
又到了动画总结的时间了,今天要总结的是一个对话框形式的动画效果,老样子gif图不太清晰,但是总体的效果是可以看的清楚的,一个动态的等待对话框,我只是简单的实现了一些动画,如果需要更复杂的需求,可以联系 ...
微信小程序傻瓜制作_傻瓜式教程：做一个带优惠券的微信小程序
优惠券一直是电商零售商家们常用的营销手段之一,如今在各种微信小程序商城中,我们也常常能见到优惠券.为什么商家这么喜欢使用优惠券呢?当然是因为它确实能有效地刺激客户消费.商家发放优惠券,利用一种对比效应 ...
用表格做一个简单地个人简历
有注释 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
html、css做一个带搜索图标的搜索框
html.css图像代替提交按钮做个搜索框图像形式的提交按钮与普通提交按钮在功能上基本相同,只是它用图像代替了默认的提交按钮,外形上更加美观.需要注意的是,必须为其定义src属性指定图像的url地 ...
树莓派3B+做一个带智能语音的树莓派魔镜
先上图
iview的表格自定义_iview table组件自定义表头
在实际项目开发中,我们经常会用到各种各样的表格,比如在表格表头中填加按钮,下拉菜单,图标等等,在网上搜了一段时间发现比较少,所以写好之后就想着分享出来给有需要的人参考参考,例如下面这种表头带图标的: ...

iView的表格做一个带斜线的表头

iView的表格做一个带斜线的表头

效果

实现

iView的表格做一个带斜线的表头相关推荐

最新文章

热门文章