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

相关推荐
小满zs1 小时前
React第十九章(useContext)
前端·javascript·react.js
xue03051 小时前
React 组件间的通信
前端·javascript·react.js
乐闻x1 小时前
Parcel 常用插件:增强功能与性能的最佳选择
前端·javascript
菜菜-plus1 小时前
SpringBoot,SpringCloudAlibaba,GateWay,Nacos,OpenFeign,Vue
vue.js·spring boot·gateway
焦思懿--19期--工职大2 小时前
vue3watch的停止监视分析
前端·javascript·vue.js
fury_1233 小时前
js:三元的判断
前端·javascript·html
我与java相爱相杀3 小时前
类与对象以及ES6的继承
前端·javascript·react.js
还是大剑师兰特3 小时前
MIF格式详解,javascript加载导出 MIF文件示例
开发语言·javascript·ecmascript
gobeyye4 小时前
RabbitMQ 进阶
javascript·rabbitmq·php