<template lang="">
  <div>
    <div style="width: 150px;border: 1px solid red">
      <el-tree
        ref="tree"
        :data="treeData"
        :props="defaultProps"
        :expand-on-click-node="false"
        default-expand-all
        @node-click="handleNodeClick"
      >
        <div slot-scope="{ node, data, el }" 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>
          <span class="top-right">
            <i
              class="el-icon-circle-plus"
              @click.stop.prevent="() => addFun(data)"
            />
            <i
              class="el-icon-delete"
              @click.stop.prevent="() => deleteFun(data)"
            />
          </span>
        </div>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowTooltip: false,
      treeData: [
        {
          label: "一级 JOJO奇妙冒险",
          children: [
            {
              label: "二级 JOJO黄金之风",
              children: [
                {
                  label: "三级 JOJO之茸茸"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1"
                }
              ]
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    // 超出显示
    mouseOver(event) {
      console.log(event);
      this.isShowTooltip =
        event.currentTarget.scrollWidth <= event.currentTarget.clientWidth;
      console.log("222");
    },
    handleNodeClick(data) {
      console.log(data);
    },
    addFun(data) {
      console.log(data);
    },
    deleteFun(data) {
      console.log(data);
    }
  }
};
</script>
<style scoped>
.tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  /* padding-right: 8px; */
}
.over-ellipsis {
  display: block;
  width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
}
.top-right {
  display: block;
  min-width: 50px;
  width: 50px;
  text-align: right;
  position: absolute;
  right: 0px;
}
</style>

