更改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>
相关推荐
Z_Wonderful12 小时前
Qiankun 子应用数据互通 + 资源共享 完整方案(React+Vue)
前端·vue.js·react.js
你的牧游哥12 小时前
Electron核心api详解
前端·javascript·electron
05Nuyoah12 小时前
CSS 基础认知和基础选择器
前端·javascript·css·node.js
We་ct13 小时前
前端包管理工具与Monorepo全面解析
前端·javascript·npm·pnpm·yarn·monorepo·包管理
Ruihong13 小时前
Vue 3 defineOptions 宏,用 VuReact 编译成 React 长什么样?
vue.js·react.js·面试
六月的可乐13 小时前
AI Agent 架构设计与实践:React、Plan-Exec、Reflect 与混合模式(附开源代码)
前端·javascript·aigc
花归去13 小时前
在 Vue 项目中配置 postcss-preset-env
vue.js·webpack·postcss
油丶酸萝卜别吃13 小时前
高效处理数组差异:JS中新增、删除、交集的最优解(Set实现)
开发语言·前端·javascript
LIO13 小时前
Vue3 + TS 企业级工程化项目全套实战(Vue3 + Vite + Pinia + VueRouter + Element Plus)
前端·vue.js
gskyi13 小时前
时间格式化神器:智能显示相对时间
开发语言·javascript·ecmascript