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

javascript 复制代码
//在 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>
相关推荐
前端爆冲1 分钟前
项目中无用export的检测方案
前端
小旋风012347 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
旧味清欢|12 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾29 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin41 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly