element-plus的table组件 的type=“expand” 模式,如何修改小图标?

作者站长头像
站长
· 阅读数 16

问题描述

element-plus 的 table 组件 的 type=“expand” 模式,如何修改colunm的展开小图标element-plus的table组件 的type=“expand” 模式,如何修改小图标?

问题出现的环境背景及自己尝试过哪些方法

在 element-ui 也就是 vue2 支持的组件库中可以通过修改i标签 content 属性,修改 i 标签,然后修改图标

但是 element-plus 支持的是 svg 形式的图标,对于这种没有向外暴露修改接口的组件,如何去修改图标?element-plus的table组件 的type=“expand” 模式,如何修改小图标?

相关代码

粘贴代码文本(请勿用截图)element-ui 修改图标的方式

    // .el-table__expand-icon .el-icon-arrow-right:before{
    //   content: "\e6d9";
    //   border: 1px solid #ccc;
    //   padding: 0.0px;
    // }

你期待的结果是什么?实际看到的错误信息又是什么?

如何修改element-plus中没有向外暴露接口的组件的图标?

回复
1个回答
avatar
test
2024-07-16

我记得之前回答过一次类似的问题 element-plus的v-loading中element-loading-spinner使用el-icon里面的图标不生效? - SegmentFault 思否

也就是说,现在的 Ele+ 已经不是原来的那种使用字体图标库的方式,而是以直接传入 svg 的形式来实现图标组件了。所以如果想要去自定义的话,就不能只通过修改CSS伪类的 content 属性来实现了。

大概看了一下 table 组件的源码, 并没有提供一个修改 expand 图标的 slot 或者属性暴露出来。所以如果说一定要实现的话,倒是可以自己写 CSS 伪类的方式来实现。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容