el-table组件树形数据修改展开箭头

css 复制代码
<style lang="scss" scoped>
::v-deep .el-table__expand-icon .el-icon-arrow-right:before {
  content: ">"; // 箭头样式
  font-size: 16px;
}

::v-deep .el-table__expand-icon{ // 没有展开的状态
  background-color: rgba(241, 242, 245, 1);
  color: rgba(229, 229, 229, 1);
  border-radius: 4px;
  margin-right: 12px!important;
}

::v-deep .el-table__expand-icon--expanded{ // 展开的状态
  background-color: #3D6DD5;
  color: #FFFFFF;
}

::v-deep .el-table__cell{
  padding-left: 40px;
}
</style>

最终样式

顺带说一下,这里el-table-column标签上的align="center"的话,可能会导致缩进有问题(看不出来是父级还是子级),原因是首列字数不是固定导致的,如果首列字数全部一致的这个应该没有这个问题

相关推荐
换日线°32 分钟前
前端炫酷展开效果
前端·javascript·vue
CappuccinoRose2 小时前
React框架学习文档(七)
开发语言·前端·javascript·react.js·前端框架·reactjs·react router
Hi_kenyon2 小时前
Ref和Reactive都是什么时候使用?
前端·javascript·vue.js
摇滚侠2 小时前
【程序员入门系列】jQuery 零基础入门到精通!Jquery 选择器 API
前端·javascript·jquery
im_AMBER2 小时前
Leetcode 111 两数相加
javascript·笔记·学习·算法·leetcode
止观止4 小时前
告别 require!TypeScript 5.9 与 Node.js 20+ 的 ESM 互操作指南
javascript·typescript·node.js
zhougl9964 小时前
Vue 中使用 WebSocket
前端·vue.js·websocket
酒鼎4 小时前
学习笔记(7-01)函数闭包
javascript
半梅芒果干4 小时前
vue3 实现无缝循环滚动
前端·javascript·vue.js
冰敷逆向4 小时前
京东h5st纯算分析
java·前端·javascript·爬虫·安全·web