el-tree 实现左边显示名称 右边显示数量

`el-tree` 是 Element UI 提供的一个基于 Vue 的树形组件，它可以用于构建动态的、可展开收起的目录结构。如果你想在 `el-tree` 中同时展示每个节点的名称（通常是节点的文字标题）和数量信息，你可以通过自定义节点的渲染属性或者使用 `render-content` 函数来实现。

下面是一个简单的例子：

<template>
  <el-tree
    :data="treeData"
    default-expand-all
    :props="defaultProps"
    :render-content="renderTreeNode"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        // 树形数据，包含名称和数量字段
        { name: '父节点1', children: [{ name: '子节点1', number: 5 }] },
        { name: '父节点2', children: [{ name: '子节点2', number: 3 }] }
      ],
      defaultProps: {
        children: 'children',
        label: 'name', // 显示节点名称
        leaf: 'number' // 当前节点无子节点时显示的数量
      }
    };
  },
  methods: {
    renderTreeNode(h, { node, data }) {
      return h('span', [
        `${node.label} (数量: ${node.leaf})`
      ]);
    }
  }
};
</script>

在这个例子中，`label` 属性用来显示节点名称，而 `leaf` 则是在没有子节点的情况下显示数量。`render-content` 钩子函数允许我们自定义每个节点的渲染方式。