小知识(5) el-table行样式失效问题

一、实现效果

子级呈现不同颜色去区分

二、最初代码

tips: 我这里使用的vue3 + elementplus

复制代码
<el-table :row-class-name="tableRowClassName" >
  ...
</el-table>

function tableRowClassName({ row, rowIndex }) {
  if (row.children.length === 0) {
    return 'success-row';
  }
  return '';
}

<style lang="scss" scoped>
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

三、解决

去掉style中的scoped即可,哈哈哈 ^_^ ^_^ ^_^

复制代码
<style lang="scss">
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

快去动动自己的小手手操作起来看看效果吧,冲冲冲!!!

相关推荐
LuckySusu8 小时前
【vue篇】Vue 自定义指令完全指南:从入门到高级实战
前端·vue.js
LuckySusu8 小时前
【vue篇】Vue 响应式核心:依赖收集机制深度解密
前端·vue.js
LuckySusu8 小时前
【vue篇】Vue.js 2025:为何全球开发者都在拥抱这个前端框架?
前端·vue.js
LuckySusu8 小时前
【vue篇】Vue 单向数据流铁律:子组件为何不能直接修改父组件数据?
前端·vue.js
LuckySusu8 小时前
【vue篇】React vs Vue:2025 前端双雄终极对比
前端·vue.js
李鸿耀8 小时前
仅用几行 CSS,实现优雅的渐变边框效果
前端
码事漫谈9 小时前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER9 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦9 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码9 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js