更改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>
相关推荐
珑墨20 分钟前
【迭代器】js 迭代器与可迭代对象终极详解
前端·javascript·vue.js
Fantastic_sj28 分钟前
[代码例题] var 和 let 在循环中的作用域差异,以及闭包和事件循环的影响
开发语言·前端·javascript
JANG10241 小时前
【Linux】常用指令
linux·服务器·javascript
粉末的沉淀1 小时前
tauri:关闭窗口后最小化到托盘
前端·javascript·vue.js
绝世唐门三哥1 小时前
使用Intersection Observer js实现超出视口固定底部按钮
开发语言·前端·javascript
南山安1 小时前
Vue学习:ref响应式数据、v-指令、computed
javascript·vue.js·面试
思茂信息2 小时前
CST电动车EMC仿真——电机控制器MCU滤波仿真
javascript·单片机·嵌入式硬件·cst·电磁仿真
小胖霞2 小时前
企业级全栈 RBAC 实战 (11):菜单管理与无限层级树形表格
vue.js·前端框架·前端工程化
鲸落落丶2 小时前
Vue Router路由
前端·javascript·vue.js
米方2 小时前
ElementPlus 穿梭框支持批量穿梭
前端·javascript·vue.js