更改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>
相关推荐
杰克尼4 分钟前
vue_day06
前端·javascript·vue.js
DcTbnk9 分钟前
ESM (放到打包里 import) 和 IIFE (URL 动态 loadScript)
前端·javascript
San3010 分钟前
深入理解 JavaScript 中的 Symbol:独一无二的值
前端·javascript·ecmascript 6
就叫飞六吧38 分钟前
css+js 前端无限画布实现
前端·javascript·css
IT 前端 张40 分钟前
Uniapp全局显示 悬浮组件/无需单页面引入
前端·javascript·uni-app
上车函予1 小时前
geojson-3d-renderer:从原理到实践,打造高性能3D地理可视化库
前端·vue.js·three.js
Lsx_1 小时前
🔥Vite+ElementPlus 自动按需加载与主题定制原理全解析
前端·javascript·element
零一科技1 小时前
Vue3拓展:实现原理 - 浅析
前端·vue.js
抱琴_1 小时前
【Vue3】从混乱到有序:我用 1 个 Vue Hooks 搞定大屏项目所有定时任务
前端·vue.js
胡琦博客2 小时前
21天开源鸿蒙训练营|Day2 ReactNative 开发 OpenHarmony 应用环境搭建实录
javascript·react native·react.js