el-tree树结构在名称后面添加其他文字

//在 el-tree 中使用 render-content 插槽来展示文件大小
<template>
  <div>
    <el-tree
      ref="tree"
      v-loading="treeData.loading"
      :data="treeData.data"
      node-key="id" 
      :props="defaultProps"
      :render-content="renderTreeNode">
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: {
        loading: false,
        data: [
          {
            id: 1,
            name: '文件1',
            fileSize: 391055,
            fileCount: 1,
            children: []
          },
          // 更多节点数据...
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'name' // 这里假设节点的显示文本是 name 属性
      }
    };
  },
  methods: {
    // 显示文件大小及数量
    renderTreeNode (h, { node, data, store }) {
      const fileSizeDisplay = this.safeFormatFileSize(data.fileSize);
      const fileCountDisplay = data.fileCount || '0';
      return h('span', [
        h('span', data.name),
        h('span', { style: { marginLeft: '2px', color: '#ccc' } }, `(${'大小'}:${fileSizeDisplay}, ${'数量'}：${fileCountDisplay})`)
      ]);
    },
    //确保 data.fileSize 存在且不是 null
    safeFormatFileSize (val) {
      const safeBytes = val ? val : 0;
      return this.formatFileSize(safeBytes);
    },
    //转译字节变成文件大小
    formatFileSize (bytes) {
      if (bytes === 0) return '0B';
      const sizes = ['B', 'KB', 'MB', 'GB'];
      let i = 0;
      while (bytes >= 1024 && i < sizes.length - 1) {
        bytes /= 1024;
        i++;
      }
      return `${bytes.toFixed(2)}${sizes[i]}`;
    },
  }
};
</script>

<style scoped>

</style>