更改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>
相关推荐
涔溪12 小时前
Vue3 的核心语法
前端·vue.js·typescript
国服第二切图仔13 小时前
Electron for 鸿蒙pc项目实战之tab标签页组件
javascript·electron·harmonyos·鸿蒙pc
Neptune113 小时前
深入浅出:理解js的‘万物皆对象’与原型链
前端·javascript
阿迷不想上班13 小时前
windows自动任务定期执行
javascript
Zohnny13 小时前
3.组合式函数
vue.js
盗德13 小时前
最全音频处理WaveSurfer.js配置文档
前端·javascript
Heo13 小时前
关于Gulp,你学这些就够了
前端·javascript·面试
祈澈菇凉14 小时前
Next.js 零基础开发博客后台管理系统教程(八):提升用户体验 - 表单状态、加载与基础验证
前端·javascript·ux
有意义14 小时前
从日常使用到代码实现:B 站签名编辑的 OOP 封装思路与实践
javascript·代码规范·ecmascript 6