antd-vue 完全实现树形数据自定义前缀图标（仅用css）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

问题 我们在用antd-vue树的数据时想要自定义改变数据展开关闭的图标，除了默认的样式，我们在用一些api改变时效果总是不近人意，现在用css可以完全实现自定义图标的改变，根据需求来引用在实际开发需求过程中有的可能并不是所有适配 以下内容仅作参考，

上代码 首先是树形组件的引用，官方写的比较清楚

// 树形引用
 <a-tree
      :treeData="treeData"
      :showIcon="false"
      :showLine="true"
    >

其次是我们样式的改变，样式穿透进行更改

<style>
// 关闭时的图标
::v-deep .ant-tree-switcher_close{
  background: url('~@/assets/plusIcon.svg') no-repeat 4px 10px !important;
  i{
    display: none !important;
  }
}
// 把之前的默认图标隐藏
::v-deep  .ant-tree-switcher-noop{
  width: 0 !important;
  i{
    display: none !important;
  }
}
// 自定义配置padding距离
::v-deep .ant-tree-node-content-wrapper-normal {
  padding-left:15px !important;
}
// 打开sholine="true"时让子项的line线隐藏
::v-deep .ant-tree.ant-tree-show-line .ant-tree-child-tree  li:not(:last-child)::before{
  border-left: none !important;
}
// 调整改变line线位置并把实线改为虚线
::v-deep .ant-tree.ant-tree-show-line li:not(:last-child)::before{
  border-left: 1px dashed #d9d9d9;
  top:10px;
  left:11px
}
//打开图标的更换
::v-deep .ant-tree-switcher_open{
  background: url('~@/assets/minus.svg') no-repeat 4px 10px !important;
  i{
    display: none !important;
  }
}
</style>

其实本质上就是用样式穿透实现对antd-vue内部样式的改变，使其原来的svg图标进行隐藏替换成我们引用的图标，也可以通过把原来的连接线进行隐藏，替换成我们设置的，完全通过css的style样式进行改变，可操作性比较高，但注意样式隔离，不要影响到其他页面的样式展现

效果图如下

以上就是全部内容，提供思路仅供大家学习