本文介绍: 前言网上如何调整eltable表格内部样式,一大堆资料直接css调整原生样式,来回捣鼓半天还是不满意,而且版不同样式引用还不一定有效果最后官方文端摸索了一下调整方法效果图我们发现底部还有白线,通过网页控制台选中查看发现还是内部样式捣乱。此时果断用deep深度选择器对其进行修改这里使用的是scss不同语言deep深度选择器的使用可能有差别。修改后的样式:后续:其实这个表格还是有不完美的地方左右两边的线无法清除掉。更奇怪的是,白色背景下,左右

Element Plus eltable的样式调整详解

前言网上如何调整eltable表格内部样式,一大堆资料说直接用css调整原生样式,来回捣鼓半天还是不满意,而且版不同样式引用还不一定有效果最后官方文端摸索了一下调整方法记录如下大家参考

// 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="单位名称"&gt;</el-table-column&gt;
      <el-table-column align="center" prop="value" label="数值大小%"&gt;</el-table-column&gt;
      </el-table&gt;
<script setup&gt;
 // 动态调整样式
 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&gt;

在这里插入图片描述

我们发现底部还有白线,通过网页控制台选中查看发现还是有内部样式捣乱。
在这里插入图片描述

此时果断用deep深度选择器对其进行修改这里我使用的是scss不同的语言,deep深度选择器的使用可能有差别。

:deep(.el-table tr) {
  background-color: #162556;
}
:deep(.el-table__inner-wrapper::before) {
  background-color: #173d91;
}

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注