Vue element Tree树节点----被选中/总数

最近写项目遇到的问题
1、不同级别加个小标志
2、获取----被选中的数/总数
3、最后一级横向排列

1、树状图组件
<el-tree
      ref="tree"
      show-checkbox
      node-key="id"
      :data="treeData"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :render-content="renderContent"
      class="filter-tree"
      default-expand-all
      @node-click="getNodeClick"
      @check-change="getCheckedNodes"
    />
2、数据结构
data() {
    return {
      treeData: [{
        id: 1,
        label: 'Level one 1',
        type: 1,
        children: [{
          id: 4,
          label: 'Level two 1-1',
          type: 2,
          children: [{
            id: 9,
            label: 'Level three 1-1-1',
            type: 3
          }, {
            id: 10,
            label: 'Level three 1-1-2',
            type: 3
          }]
        }, {
          id: 11,
          label: 'Level three 1-2',
          type: 2,
          children: [{
            id: 12,
            label: 'Level three 1-2-1',
            type: 3
          }, {
            id: 13,
            label: 'Level three 1-2-2',
            type: 3
          }, {
            id: 14,
            label: 'Level three 1-2-3',
            type: 3
          }, {
            id: 15,
            label: 'Level three 1-2-4',
            type: 3
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },    

3、数字处理和样式的处理
  mounted() {
    this.changeCss()
  },
  //树节点内容渲染（数据目前仅支持三级树状结构）
   renderContent(h, { node, data }) {
      if (data.children) {
        return (
          <span>
            <span style='background-color:#409EFF;font-size:12px;padding:2px;color:white'>{node.level === 1 ? '一级' : node.level === 2 ? '二级' : ''}</span>&nbsp;&nbsp;&nbsp;
            {node.label + '  ☛   ' + '(' + (node.level === 2 ? (node.childNodes || []).filter((i) => i.checked).length : (node.childNodes || []).reduce((prev, item) => {
              return prev + (item.childNodes || []).filter((i) => i.checked).length
            }, 0)) + '/' + (node.level === 2 ? (node.childNodes || []).length : (node.childNodes || []).reduce((prev, item) => {
              return prev + (item.childNodes || []).length
            }, 0)) + ')'}
          </span>
        )
      }
      //三级时样式调整
      let classname = ''
      if (node.level === 3) {
        classname = 'levename'
      }
      return <p class={classname}> <span style='background-color:#409EFF;font-size:12px;padding:2px;color:white'>三级</span>&nbsp;&nbsp;&nbsp;{node.label}</p>
    },
    changeCss() {
      var levelName = document.getElementsByClassName('levename') // levelname是上面的最底层节点的名字
      for (var i = 0; i < levelName.length; i++) {
        // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
        levelName[i].parentNode.style.cssFloat = 'left' // 最底层的节点，包括多选框和名字都让他左浮动
        levelName[i].parentNode.style.styleFloat = 'left'
        levelName[i].parentNode.onmouseover = function() {
          this.style.backgroundColor = '#fff'
        }
      }
    },
    getNodeClick() {
      this.$nextTick(() => {
        this.changeCss()
      })
    }