去掉dhtmlxGantt甘特图树形icon图标

286 阅读1分钟

参考链接:www.cnblogs.com/ibeyondi/p/…

  • 去掉树形的文件夹图标
/* 注意,style标签中不能加scoped,否则不会生效 */
<style>
/* 去掉文件夹图标 */
.gantt_tree_icon {
  &.gantt_folder_closed,
  &.gantt_file,
  &.gantt_folder_open {
    display: none
  }
}

/* 把展开收起图标替换成element-ui的icon */
/* 这里没有找到在js中配置图标的方法,为省事,使用css */
/* 扒了element-ui的icon样式表 */
.gantt_tree_icon.gantt_open {
  background-image: none;
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &::before {
    content: "\e6e0";
  }
}

.gantt_tree_icon.gantt_close {
  background-image: none;
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &::before {
    content: "\e6df";
  }
}
</style>

注意:以上代码若没有生效,试试样式穿透,给他加上deep

效果图:

image.png