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>
相关推荐
EveryPossible5 分钟前
静态箭头连线
开发语言·javascript·ecmascript
伍哥的传说6 分钟前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒11 分钟前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi52015 分钟前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
小熊学Java16 分钟前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端
安卓开发者22 分钟前
鸿蒙Next Web组件生命周期详解:从加载到销毁的全流程掌控
前端
我叫汪枫3 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
百思可瑞教育5 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
雾恋8 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊8 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js