antd-vue 树改变前面图标 （完全实现自定义图标）

问题 我们在用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>

 最终效果图