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 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇4 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水5 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇6 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827526 小时前
vue中 vue.config.js反向代理
前端
Java&Develop6 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器