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>
相关推荐
mCell8 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip8 小时前
Node.js 子进程:child_process
前端·javascript
excel11 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙15 小时前
[译] Composition in CSS
前端·css
白水清风15 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix15 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780015 小时前
new、原型和原型链浅析
前端·javascript