当前位置: 首页 > article >正文

更改element-plus的table样式

表头样式:

  <el-table :data="props.tableData" style="width: 100%" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
</el-table>

样式:
// 表头样式
const headerCellStyle = {
  background: '#062549',
  color: '#FFFFFF',
  borderBottom: 'none'
}
// 表格样式
function cellStyle({ rowIndex }) {
  if (rowIndex % 2 == 0) {
    return { background: '#061938', color: '#FFFFFF', borderBottom: 'none' }
  } else {
    return { background: '#062345', color: '#FFFFFF', borderBottom: 'none' }
  }
}

去掉底部白线:(不生效的话在el-table外边加个div)


<style scoped lang="scss">
// 去掉底部白线
:deep(.el-table) {
  --el-table-border-color: tarnsparent !important;
  background-color: #071b39 !important;
}
</style>


http://www.kler.cn/a/465568.html

相关文章:

  • 25.Java JUC 引入(进程与线程、线程的状态、并发与并行、管程、用户线程与守护线程)
  • Apache OFBiz rmi反序列化漏洞
  • 【Go学习】-01-3-函数 结构体 接口 IO
  • yolov5和yolov8的区别
  • Windows平台下如何手动安装MYSQL
  • MATLAB中使用牛顿-拉夫逊法进行电力系统潮流计算
  • 高级RAG技巧(二)
  • 数据结构:双向循环链表
  • 开源数据集成平台白皮书重磅发布《Apache SeaTunnel 2024用户案例合集》!
  • DCU异构程序——带宽测试
  • 电子价签会是零售界的下一个主流?【新立电子】
  • 开发培训-慧集通(iPaaS)集成平台脚本开发Groovy基础培训视频
  • 如何设置禁止编辑PPT内容
  • idea无法安装插件
  • 微信小程序中使用 TypeScript 定义组件时,Component 函数确实需要多个类型参数
  • Mybatis02
  • 保护网站日常安全,网站监测能提供哪方面的帮助
  • 【剑指Offer刷题系列】判断对称二叉树
  • MySQL图形化界面工具--DataGrip
  • 高效自携式潜水装备,助力水下探索|鼎跃安全