更改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>
相关推荐
冰暮流星3 小时前
javascript之this关键字
开发语言·前端·javascript
百度Geek说4 小时前
CodingAgent 的原始森林困境:一张地图能解决什么?
开发语言·javascript·ecmascript·coding agent
怕浪猫4 小时前
Electron 开发实战(十三):性能优化策略|极速启动、低内存、流畅渲染、极致瘦身
前端·javascript·electron
想要成为糕糕手4 小时前
JavaScript 异步编程完全指南
javascript·面试·promise
sunny.day4 小时前
js原型与原型链
开发语言·javascript·原型模式·js原型链
如果超人不会飞4 小时前
用TinyRobot Bubble组件打造灵活强大的AI对话气泡
前端·vue.js
橘子星4 小时前
打破串行枷锁:深入理解 JS 同步、异步与 Promise 实战
前端·javascript
如果超人不会飞4 小时前
新手避坑:使用 TinyRobot 入门阶段常见误区总结
前端·vue.js
渣波4 小时前
全栈开发的“影分身”之术(mock):别再手动造数据了,你的 CRUD 不配让我等!
前端·javascript
如果超人不会飞4 小时前
一文读懂 TinyRobot:前端 AI 组件库定位、价值与适用场景
前端·vue.js