第三十五篇：element UI tree 树图文字过多超出隐藏带...鼠标经过显示超出的文字_el-tree文字超出隐藏

问题说明：tree树状图展开的时候问题太长被覆盖

办法解决：上代码

html:

<el-tree
              :data="typeList"
              :props="{ children: 'children',label: 'value'}"
              accordion
              @node-click="handleNodeClick">
               <div slot-scope="{ node }" class="tree-node">
                    <el-tooltip
                    :content="node.label"
                    :disabled="isShowTooltip"
                    :open-delay="300"
                    placement="top"
                    effect="dark"
                    >
                    <span class="over-ellipsis" @mouseover="mouseOver($event)">
                        {{ node.label }}
                    </span>
                    </el-tooltip>
                </div>
          </el-tree>
           
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

methods:鼠标经过事件

 mouseOver(event) {
      console.log(event);
      //在data里边记得要定义一个isShowTooltip默认为false
      this.isShowTooltip =
        event.currentTarget.scrollWidth <= event.currentTarget.clientWidth;
      // console.log("222");
    },
1
2
3
4
5
6
7

css部分

.tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  /* padding-right: 8px; */
}
.over-ellipsis {
  display: block;
  width: 140PX;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16