vue3+element-plus table表格自定义背景，表头，斑马条纹颜色

又耳邓&丘山岳

已于 2024-05-17 13:05:38 修改

阅读量1.3w

点赞数 27

分类专栏：样式修改文章标签： vue.js elementui

于 2023-11-30 16:24:35 首次发布

本文链接：https://blog.csdn.net/m0_67796383/article/details/134714825

版权

样式修改专栏收录该内容

3 篇文章

订阅专栏

效果图

表格代码

          <el-table :data="tableData"
            style="width: 99.97%;--el-table-border-color: none;border-right: 1px #143275 solid;border-left: 1px #143275 solid;border-bottom: 1px #143275 solid;"
            :highlight-current-row="false"
            :header-cell-style="{ backgroundColor: '#143275', color: '#ffffff', fontSize: '14px', textAlign: 'center', borderLeft: '0.5px #154480 solid', borderBottom: '1px #154480 solid' }"
            :cell-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', borderBottom: '0.5px #143275 solid', borderLeft: '0.5px #143275 solid' }"
            :row-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', }" :row-class-name="tableRowClassName"
            empty-text="暂无数据" max-height="818">
            <el-table-column prop="date" label="项目编号" />
            <el-table-column prop="name" label="项目名称" />
            <el-table-column prop="state" label="项目交期" />
            <el-table-column prop="city" label="机型" />
            <el-table-column prop="city" label="数量" />
            //合并列
            <el-table-column label="生产进度">
              <el-table-column prop="zip" label="焊接" />
              <el-table-column prop="zip" label="喷镀" />
            </el-table-column>
          </el-table>

注：element-plus的table表格里面有自带的斑马条纹属性 stripe不需要写，否则自定义斑马条纹颜色样式不生效

js代码（后加的，感谢网友提示）

// 改变斑马线的颜色

const tableRowClassName = ({ row, rowIndex }) => {

if (rowIndex % 2 == 0) {

return "";

} else {

return "warning-row";

}

};

css代码

/*  
// 表格部分样式
 // 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
  color: #93dcfe;
  font-size: 24px;
}

/* 表格内背景颜色  */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
  border: 0px;
  color: #93dcfe;
  font-size: 24px;
  height: 5px;
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}

/* // 去掉最下面的那一条线  */
.el-table::before {
  height: 0px;
}

/* // 设置表格行高度 */
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 54px;
}

/* // 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover>td {
  background: #063570 !important;
}

/* // 取消当前行高亮 */
::v-deep .el-table tbody tr {
  pointer-events: none;
}

/* 修改表头样式-加边框 */
/* ::v-deep .el-table__header-wrapper {
  border: solid 1px #04c2ed;
} */

/* // 表格斑马自定义颜色 */
::v-deep .el-table__row.warning-row {
  background: #01205A;
}


/* 去掉表格里的padding */
::v-deep .el-table .cell,
.el-table th div {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}