前言：

      对element的tree进行二次处理，让他的内容多的时候可以自动换行

可以换行：

实现效果：

封装组件subjectTree.vue

<template>
  <el-tree
    class="subjectTree"
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick">
    <div slot-scope="{ node, data }" class="onlyThree">
      <span class="tree_label" :title=" node.label">{{ node.label }}</span>
      <span
        v-if="data.total || data.total === 0"
        class="tree_label"
        title="数量"
      >({{ data.total }})</span
      >
    </div>
  </el-tree>
</template>

<script>
export default {
  components: {},
  props: [],
  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'
      }
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }

}
</script>

<style lang='scss' scoped>
//-start--这句话最好设置在公共样式里面，要不不生效
  .el-tree-node__content{
    height:auto!important;
  }
//-end--这句话最好设置在公共样式里面，要不不生效


  .onlyThree{
   width: calc(100% - 24px);
   overflow:hidden;
   text-overflow:ellipsis;//显示为省略号
   white-space:nowrap;//不换行
   text-align: left;
    padding-bottom: 2%;
    span{
      white-space:pre-wrap;
    }
  }
</style>

调用：

import subjectTree from './conponents/subjectTree.vue'

components: {
  subjectTree
},

页面：

<div style="width:200px;height:auto;background: pink;height: 500px;margin-top: 200px;overflow-x: hidden">

      <subjectTree></subjectTree>
    </div>

不换行显示省略号

实现效果：

封装组件subjectTree.vue

<template>
  <el-tree
    class="subjectTree"
    :data="data"
    :props="defaultProps"
    @node-click="handleNodeClick">
    <div slot-scope="{ node, data }" class="onlyThree">
      <span class="tree_label" :title=" node.label">{{ node.label }}</span>
      <span
        v-if="data.total || data.total === 0"
        class="tree_label"
        title="数量"
      >({{ data.total }})</span
      >
    </div>
  </el-tree>
</template>

<script>
export default {
  components: {},
  props: [],
  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'
      }
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    }
  }

}
</script>

<style lang='scss' scoped>
//-start--这句话最好设置在公共样式里面，要不不生效
  .el-tree-node__content{
    height:auto!important;
  }
//-end--这句话最好设置在公共样式里面，要不不生效


  .onlyThree{
   width: calc(100% - 24px);
   overflow:hidden;
   text-overflow:ellipsis;//显示为省略号
   white-space:nowrap;//不换行
   text-align: left;
    padding-bottom: 2%;
    
  }
</style>

调用方法同上

到此为止