本文介绍: 前言:网上查如何调整el–table表格内部样式,一大堆资料说直接用css调整原生样式,来回捣鼓半天还是不满意,而且版不同样式引用还不一定有效果,最后看官方文端摸索了一下调整方法。效果图:我们发现底部还有白线,通过网页控制台选中查看,发现还是有内部样式捣乱。此时果断用deep深度选择器对其进行修改,这里我使用的是scss,不同的语言,deep深度选择器的使用可能有差别。修改后的样式:后续:其实这个表格还是有不完美的地方左右两边的线无法清除掉。更奇怪的是,白色背景下,左右
Element Plus el–table的样式调整详解
前言:网上查如何调整el–table表格内部样式,一大堆资料说直接用css调整原生样式,来回捣鼓半天还是不满意,而且版不同样式引用还不一定有效果,最后看官方文端摸索了一下调整方法,记录如下供大家参考:
- 调整表头样式,直接在el-table内部绑定header–cell–style,接收的数据格式为对象
- cell–style调整每一列的样式,接受的数据格式同样为对象,当然也可以使用函数动态变化返回值。
- el-table–column中设置 align=“center”,让单元格内容居中,不需要其他多余设置
- 其他更多效果可参考官方文档
// vue3 组件为elementplus
<el-table
:data="tableData"
:header-cell-style="{
'text-align': 'center',
'font-size': '18px',
'background': '#162556 !important',
'color': '#ffffff',
'border': 'none !important'
}"
:cell-style=changeCellStyle
>
<el-table-column align="center" prop="name" label="单位名称"></el-table-column>
<el-table-column align="center" prop="value" label="数值大小%"></el-table-column>
</el-table>
<script setup>
// 动态调整样式
function changeCellStyle(row) {
// 可自行输出row查看样式
const styleObject = {
'background': '#090e2e !important',
'color': '#ffffff',
'border-bottom': '2px solid #173d91',
'font-size' : '18px',
'cursor': 'pointer'
}
if(row.column.label == 'xxxx') {
styleObject.color = '#00f1ed'
}else{
if(row.row.value < warningValue) {
styleObject.color = 'red'
}
}
return styleObject
}
</script>
- 效果图:
我们发现底部还有白线,通过网页控制台选中查看,发现还是有内部样式捣乱。
此时果断用deep深度选择器对其进行修改,这里我使用的是scss,不同的语言,deep深度选择器的使用可能有差别。
:deep(.el-table tr) {
background-color: #162556;
}
:deep(.el-table__inner-wrapper::before) {
background-color: #173d91;
}
原文地址:https://blog.csdn.net/qq_39088036/article/details/128257301
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_48324.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。