Element Plus el |
您所在的位置：网站首页 › 表格样式怎样设置不变 › Element Plus el |
Element Plus el
|
Element Plus el-table的样式调整详解
前言：网上查如何调整el-table表格内部样式，一大堆资料说直接用css调整原生样式，来回捣鼓半天还是不满意，而且版不同样式引用还不一定有效果，最后看官方文端摸索了一下调整方法，记录如下供大家参考： 调整表头样式，直接在el-table内部绑定header-cell-style，接收的数据格式为对象cell-style调整每一列的样式，接受的数据格式同样为对象，当然也可以使用函数动态变化返回值。el-table-column中设置 align=“center”，让单元格内容居中，不需要其他多余设置其他更多效果可参考官方文档 // vue3 组件为elementplus // 动态调整样式 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 } 效果图：
我们发现底部还有白线，通过网页控制台选中查看，发现还是有内部样式捣乱。 此时果断用deep深度选择器对其进行修改，这里我使用的是scss，不同的语言，deep深度选择器的使用可能有差别。 :deep(.el-table tr) { background-color: #162556; } :deep(.el-table__inner-wrapper::before) { background-color: #173d91; }修改后的样式： 后续：其实这个表格还是有不完美的地方左右两边的线无法清除掉。更奇怪的是，白色背景下，左右两边的线是不存在的，可是换一个深色背景，左右两边的线却显示出来，期待后续能够解决这个问题。 |
【本文地址】