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

相关推荐
Aotman_2 分钟前
JS 按照数组顺序对对象进行排序
开发语言·前端·javascript·vue.js·ui·ecmascript
Hi_kenyon7 小时前
VUE3套用组件库快速开发(以Element Plus为例)二
开发语言·前端·javascript·vue.js
Irene19918 小时前
Vue 3 响应式系统类型关系总结(附:computed、props)
vue.js·props·响应式类型
起名时在学Aiifox8 小时前
Vue 3 响应式缓存策略:从页面状态追踪到智能数据管理
前端·vue.js·缓存
天若有情6738 小时前
校园二手交易系统实战开发全记录(vue+SpringBoot+MySQL)
vue.js·spring boot·mysql
计算机程序设计小李同学8 小时前
个人数据管理系统
java·vue.js·spring boot·后端·web安全
EndingCoder9 小时前
Any、Unknown 和 Void:特殊类型的用法
前端·javascript·typescript
JosieBook9 小时前
【Vue】09 Vue技术——JavaScript 数据代理的实现与应用
前端·javascript·vue.js
Eason_Lou9 小时前
webstorm开发vue项目快捷跳转到vue文件
ide·vue.js·webstorm
起名时在学Aiifox9 小时前
前端文件下载功能深度解析:从基础实现到企业级方案
前端·vue.js·typescript