修改arco design中table里树形结构的图标

最新推荐文章于 2025-04-10 16:39:34 发布

丑萝卜

最新推荐文章于 2025-04-10 16:39:34 发布

阅读量2k

点赞数 2

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_42353366/article/details/122672972

版权

本文介绍了一种更改前端组件中图标显示的方法，通过修改CSS样式来替换默认的展开和关闭图标，实现图标外观的自定义。

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

就是前面这个图标，要求换一个，看文档也没看懂在哪换

然后我就想到了一个非常便捷的方法

首先找到这个图标的位置，拿到到class

.arco-icon-minus是展开

.arco-icon-plus是关闭

然后给这俩加上一个背景，然后把颜色改成透明色。

完美运行

    /deep/ .arco-icon-plus{
		background-image: url(../assets/icon/collapse-right.png);
		background-size: 100% 100%;
		width: 20px!important;
		height: 20px!important;
		color: #FFFFFF00;
		
	}
	/deep/ .arco-icon-minus{
		background-image: url(../assets/icon/collapse-bottom.png);
		background-size: 100% 100%;
		width: 20px!important;
		height: 20px!important;
		color: #FFFFFF00;
	}

/deep/是强制改css，只能在less内使用。