elementUI 树形数据table将自带的向下icon图标修改为加减号图标

m0_53682699

于 2023-12-26 08:30:00 发布

阅读量859

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/m0_53682699/article/details/135102348

版权

文章描述了如何使用CSS样式调整Vue表格（如ElementUI的el-table）中树形数据的默认展开/收起图标，将其从下箭头改为加减号。作者给出了相应的SCSS代码片段以实现这一变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：将树形数据table自带的向下icon图标修改为加减号图标

直接上代码：

<style lang="scss" scoped>
::v-deep(.el-table__expand-icon) {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
::v-deep(.el-table__expand-icon .el-icon-arrow-right:before) {
  content: "\e6d9";
  border: 1px solid #f4f4f4;
  padding: 1px;
}
::v-deep(.el-table__expand-icon--expanded .el-icon-arrow-right:before) {
  content: "\e6d8";
}
</style>