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"的话,可能会导致缩进有问题(看不出来是父级还是子级),原因是首列字数不是固定导致的,如果首列字数全部一致的这个应该没有这个问题

相关推荐
用户23678298016825 分钟前
Canvas:实现一个高颜值二维码生成器
javascript
剑神一笑41 分钟前
从字符串到时间线:实现一个 Cron 表达式解析器
javascript·typescript·reactjs
前端那点事1 小时前
深度解析:Vue中computed的实现原理(易懂不晦涩)
前端·vue.js
前端那点事1 小时前
Vue中深克隆的3种实现方案(附详细注释+测试)
前端·vue.js
❆VE❆1 小时前
基于 contenteditable 实现变量插入富文本编辑器
前端·javascript·vue.js
烤麻辣烫1 小时前
json与fastjson
前端·javascript·学习·json
小陈同学呦1 小时前
JavaScript 深浅拷贝详解
前端·javascript
小陈同学呦2 小时前
fetch和axios区别
前端·javascript
森叶2 小时前
Electron 实战:用 utilityProcess 开子进程,去端口化承载协议处理,并由主进程拦截渲染请求后统一中转
前端·javascript·electron
Hilaku3 小时前
做了 6 年前端,技术不差却拿不到 Offer?
前端·javascript·程序员