300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 教你把ElementTable单元格的四个角变圆/自定义特定单元格样式

教你把ElementTable单元格的四个角变圆/自定义特定单元格样式

时间:2020-06-26 23:30:36

相关推荐

教你把ElementTable单元格的四个角变圆/自定义特定单元格样式

自定义单元格样式

<el-table:cell-style="setSellStyle"></el-talbe>

用setSellStyle这个方法去控制<el-table的单元格样式

methods: {setSellStyle({row, column, rowIndex, columnIndex }) {if (column.label === '名称') {return "background:#e8e8e8;border: 1px solid #ffffff;borderRadius: 13px 0 0 5px;"}if (columnIndex === 4) {return "background:#e8e8e8;border: 1px solid #ffffff;borderRadius: 0 13px 5px 0"} else {return "background:#e8e8e8;border: 1px solid #ffffff;"}}

方法中可以传入行号列号四个值

column.label:例如我的第一列的表头叫名称,那就可以通过列的label来返回样式,

columnIndex:我的列表一共有五列,列号是从0开始的,最后一列的编号就是4,通过列号来返回样式。

这里我改变了单元格的背景色,以及单元格边框样式

border-radius:

border-radius:2px;

等价于↓

border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;

border-radius:13px 0 0 5px;

等价于↓

border-top-left-radius:13px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:5px;

填写像素的值顺序为:左上↖、右上↗、右下↘、左下↙ 。刚好从左上开始顺时针一圈

————————————————————————————

👉推荐!!!【腾讯云】爆款2核4G云服务器首年74元/年
👉推荐!!!【腾讯云】1核2G5M轻量应用服务器50元/年
【腾讯云】云数据库低至9.9/年!MySQL7.4元/月
【阿里云】ECS云服务器特惠
【阿里云】服务器首购优惠
如果文章对您有帮助,扫个红包码呗

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。