更改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>
相关推荐
爱因斯坦乐11 小时前
Vue项目整合
前端·javascript·vue.js
FlyWIHTSKY11 小时前
TS、TSX、JS、JSX 文件扩展名详解
开发语言·javascript·ecmascript
ct97812 小时前
组件间的通信
前端·javascript·vue.js
左手吻左脸。12 小时前
Vue 全栈面试题大全(2026 最新版最详细)
前端·javascript·vue.js
两个西柚呀12 小时前
js中的同步和异步,三种处理异步任务的方式
前端·javascript
小新11013 小时前
最简单但完整的 Vue 响应式示例(一个简单的计数器按钮)
前端·javascript·vue.js
川冰ICE13 小时前
JavaScript进阶④|Symbol与元编程,对象的隐藏身份
开发语言·javascript·ecmascript
水煮白菜王13 小时前
开源 AI 桌宠 Clawd on Desk:让 Claude Code 的状态从终端‘蹦‘到桌面
javascript·人工智能·开源
吃口巧乐兹14 小时前
异步异常处理:AggregateException 的拆解与最佳实践
javascript
柒和远方14 小时前
每日一学V017:用 Prompt 做 NLP:解构赋值与 AI 全栈的第一次实战
javascript·架构·代码规范