小知识(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>

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

相关推荐
一个不爱写代码的瘦子3 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院3 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc
前端老鹰3 小时前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
OpenTiny社区3 小时前
OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!
前端·开源·agent
耶耶耶1113 小时前
web服务代理用它,还不够吗?
前端
Liamhuo4 小时前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_4 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生4 小时前
React 组件渲染
前端·react.js
sjd_积跬步至千里4 小时前
CSS实现文字横向无限滚动效果
前端
维他AD钙4 小时前
前端基础避坑:3 个实用知识点的简单用法
前端