antd-vue 树改变前面图标隐藏默认子图标

2022-05-10 09:04:29 阅读：334 来源： 互联网

标签：none vue tree deep ant important antd 图标

默认最好一级子图标不可以改变，方法是隐藏默认的，这样就可以。

<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>

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

注：在vue3中

::v-deep 已经过时，改为:deep(之前的样式)

没有实现下面样式的效果，这个是参考一位兄弟的，在底下有URL，

一开始默认还是显示图标，然后移上去的时候，就不显示了。

　　"ant-design-vue": "2.2.8",


那么在这个版本下，如何实现呢：
1）找到ant-design-vue的安装位置（在依赖目录node_modules下)

2）找到样式，然后在我们的项目中加入修改不显示

1、这个样式是鼠标移上去子项中的图标会消失

　　2、这个是隐藏图标（正解）。

3、这个样式不管什么时候，父子项的前面图标全隐藏。

这样的话，我们只要绑定treeData就可以了

达到我想要的效果。

最后，style中的注解是：/* */

<style scoped>
  /* 关闭时的图标 */
  /*:deep(.ant-tree-switcher_close) {
    background: url('sun.svg') no-repeat 4px 10px !important;
    i {
      display: none !important;
    }
  }*/

  :deep(.ant-tree-switcher-noop) {
    width: 0 !important;
    i {
      display: none !important;
    }
  }
  /*:deep(.ant-tree li span.ant-tree-switcher) {
    display: none;
  }*/

  /*把之前的默认图标隐藏*/
  :deep(.ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop) {
    display: none;
  }

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

参考：https://blog.csdn.net/dashinihao/article/details/121334747

标签：none,vue,tree,deep,ant,important,antd,图标
来源： https://www.cnblogs.com/jiduoduo/p/16252052.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

antd-vue 树改变前面图标 隐藏默认子图标

antd-vue 树改变前面图标隐藏默认子图标