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

最新推荐文章于 2023-11-29 14:58:59 发布

是谁的心儿啊

最新推荐文章于 2023-11-29 14:58:59 发布

阅读量4.8k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： antd-design-vue 文章标签： vue.js javascript react.js

本文链接：https://blog.youkuaiyun.com/dashinihao/article/details/121334747

antd-design-vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Antd Vue的树形组件中自定义展开和关闭图标的样式，通过CSS实现图标替换及线条调整。通过设置`::v-deep`选择器，更改了关闭图标为自定义SVG图片，隐藏了默认图标，并调整了节点内容的内边距和线条样式。示例代码展示了具体实现方法，帮助开发者根据需求定制树形组件的视觉效果。

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

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

最终效果图