vue3+ElementPlus+Table+Fixed属性导致行背景颜色失效

1.修改表格偶数行多选框背景颜色(静态)

javascript 复制代码
:deep(
    .el-table__body-wrapper tr:nth-child(even) td.el-table-fixed-column--left
  ) {
  background: #1d2745;
}

2.修改表格偶数行背景颜色(静态)

javascript 复制代码
:deep(
    .el-table__body-wrapper tr:nth-child(even) td.el-table-fixed-column--right
  ) {
  background: #1d2745;
}

3.动态控制背景颜色

javascript 复制代码
watch(dataTheme, newValue => {
  const rootStyle = document.documentElement.style;
  if (newValue) {
    rootStyle.setProperty("--fixed-column-left-even-bg", "#1d2745");
    rootStyle.setProperty("--fixed-column-left-odd-bg", "#101836");
    rootStyle.setProperty("--fixed-column-right-even-bg", "#1d2745");
  } else {
    rootStyle.setProperty("--fixed-column-left-even-bg", "transparent");
    rootStyle.setProperty("--fixed-column-left-odd-bg", "transparent");
    rootStyle.setProperty("--fixed-column-right-even-bg", "transparent");
  }
});



:deep(
    .el-table__body-wrapper tr:nth-child(even) td.el-table-fixed-column--left
  ) {
  background: var(--fixed-column-left-even-bg, #1d2745);
}

:deep(
    .el-table__body-wrapper tr:nth-child(odd) td.el-table-fixed-column--left
  ) {
  background: var(--fixed-column-left-odd-bg, #101836);
}

:deep(
    .el-table__body-wrapper tr:nth-child(even) td.el-table-fixed-column--right
  ) {
  background: var(--fixed-column-right-even-bg, #1d2745);
}
相关推荐
天天扭码4 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder7 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte11 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang16 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子1 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z1 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录1 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子1 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神1 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao2 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui