el-tree

<template>
 <div>
 <el-tree
    class="subjectTree box"
    :data="data"
    :props="defaultProps"
    :expand-on-click-node='false'
    :highlight-current='true'
    @node-click="handleNodeClick">
    <div slot-scope="{ node, data }" class="onlyThree">
      <span class="tree_label" :title=" node.label">{{ node.label }}</span>
      <span class="tree_label" title="数量" >(1111)</span >
      <div class="pos_top">

        <i class="el-icon-edit "  @click.stop="myClick1($event)"></i>
        <i class="el-icon-edit " @click.stop="myClick1($event)"></i>
        <i class="el-icon-edit " @click.stop="myClick1($event)"></i>
      </div>
    </div>
  </el-tree>
 </div>
</template>



<script>

  export default {
    data() {
      return { data: [{
        label: '一级 1开导开导开导开导看开导开导开导开导',
        children: [{
          label: '二级 1-1开导开导开导开导看开导开导开导开导'
        }]
      }, {
        label: '一级 21开导开导开导开导看开导开导开导开导',
        children: [{
          label: '二级 2-11开导开导开导开导看开导开导开导开导'
        }, {
          label: '二级 2-21开导开导开导开导看开导开导开导开导',
          children: [{
            label: '三级 2-2-11开导开导开导开导看开导开导开导开导'
          }]
        }]
      }, {
        label: '一级 31开导开导开导开导看开导开导开导开导',
        children: [{
          label: '二级 3-11开导开导开导开导看开导开导开导开导',
          children: [{
            label: '三级 3-1-11开导开导开导开导看开导开导开导开导'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      myClick1(e){
        console.log(e);
      }
    }
  };
</script>

<style lang="scss" scoped>
.box{
    width: 300px;
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ccc;
}
 /deep/ .el-tree-node__content{
    height:auto!important;
        align-items: flex-start;
  }
   .onlyThree{
   width: calc(100% - 80px);
  //  overflow:hidden;
   text-overflow:ellipsis;//显示为省略号
   white-space:nowrap;//不换行
   text-align: left;
    padding-bottom: 2%;
    position: relative;
    span{
      white-space:pre-wrap;
    }
  }
  .pos_top{
    position: absolute;
    right: -50px;
    top: 0;
  }
</style>