文件大小计算(默认b, 转换成KB和MB, 案例用的是Antd-Table)

28 篇文章 1 订阅
const formatNumber = num => {
    let decimal = num.toString().split('.')[1];
    if (decimal && decimal.length <= 2) {
        return num;
    } else {
        // return num.toFixed(2); 四舍五入的写法
        return Math.floor(num * 100) / 100;
    }
};

{
            title: '文件大小',
            dataIndex: 'filesSize',
            key: 'filesSize',
            // width: 100,
            ellipsis: true,
            render: (text, record, index) => {
                // // txt显示字符
                // if (record?.compFileManageVO?.fileFormat == 'txt') {
                //  return <span title={`${record?.compFileManageVO?.fileCharacters || 0}字符`}>{record?.compFileManageVO?.fileCharacters || 0}字符</span>;
                // }

                // 其余显示大小
                let fileSize = text || 0;
                let format = '';
                if (fileSize < 1048576) {
                    // 显示KB
                    fileSize = fileSize / 1024;
                    format = 'KB';
                } else {
                    // 显示MB
                    fileSize = fileSize / 1024 / 1024;
                    format = 'MB';
                }
                return <span title={`${formatNumber(fileSize)}${format}`}>{`${formatNumber(fileSize)}${format}`}</span>;
            }
}


  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的代码,可以看出这是一个使用antd-v的table tree组件。要实现全部展开和全部折叠的功能,可以通过控制每一行的展开状态来实现。 首先,你可以在data中添加一个属性来表示每一行的展开状态,例如isExpanded。然后,在expandIcon方法中,根据isExpanded的值来确定展开图标的类型。 要实现全部展开的功能,你可以遍历data数组,将每一行的isExpanded属性设置为true。要实现全部折叠的功能,你可以将每一行的isExpanded属性设置为false。 最后,重新渲染table组件,根据每一行的isExpanded属性来确定展开图标的类型。 以下是一个示例代码,用于实现全部展开和全部折叠的功能: ```javascript // 在data中添加isExpanded属性 data.forEach(item => { item.isExpanded = true; // 默认全部展开 }); // 在expandIcon方法中根据isExpanded属性确定展开图标的类型 expandIcon(props) { if (props.record.children.length > 0) { if (props.record.isExpanded) { return ( <span class="table-icon" onClick={(e) => { props.onExpand(props.record, e); }}> <a-icon type="caret-down" /> </span> ); } else { return ( <span class="table-icon" onClick={(e) => { props.onExpand(props.record, e); }}> <a-icon type="caret-right" /> </span> ); } } else { return <span style="margin-right:19px"></span>; } } // 添加全部展开和全部折叠的功能 handleExpandAll() { data.forEach(item => { item.isExpanded = true; }); // 重新渲染table组件 // ... } handleCollapseAll() { data.forEach(item => { item.isExpanded = false; }); // 重新渲染table组件 // ... } ``` 通过调用handleExpandAll和handleCollapseAll方法,你可以实现全部展开和全部折叠的功能。 #### 引用[.reference_title] - *1* [antd-vue的树形table组件修改展开图标](https://blog.csdn.net/qq_40567849/article/details/124443188)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值