更改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>
相关推荐
Hello-Mr.Wang5 分钟前
Vue3使用vue-web-screen-shot实现截图功能
前端·javascript·vue.js
白筱汐41 分钟前
element plus 根据嵌套数据合并表格
前端·javascript
大明881 小时前
Vue 中导致 detached 元素产生的常见行为
前端·vue.js
hachi03131 小时前
el-table-column如何获取行数据的值
javascript·vue.js·elementui
一壶纱1 小时前
箭头函数
前端·javascript
spionbo2 小时前
Vue 开发中动态添加 HTML 元素的方法与实践
前端·javascript
大王棒棒的2 小时前
五冶项目学习总结
前端·javascript·vue.js
thosefree2 小时前
SnowAdmin - 功能丰富、简单易用的开源的后台管理框架,基于 Vue3 / TypeScript / Arco Design 等技术栈打造
javascript·vue.js
江城开朗的豌豆2 小时前
JavaScript篇:Symbol:JavaScript里最神秘的‘记号’,你会用了吗?
前端·javascript·面试