Uniapp 多功能表格插件zb-table，使用记录

小远儿_

已于 2025-04-18 10:29:08 修改

阅读量851

点赞数 11

CC 4.0 BY-SA版权

文章标签： uni-app 前端 vue

于 2025-04-16 17:33:16 首次发布

本文链接：https://blog.csdn.net/Acffcz/article/details/147281315

1.安装

插件地址：zb-table（多功能表格） - DCloud 插件市场
直接通过HBuilderX导入即可

2.简单列表使用方式

定义数据

<script lang="ts" setup>
    import { reactive, ref, toValue } from 'vue';
    const column1 = [
        { type:'index', width:60 },//序号列,width为该列宽度
        { name: 'name', label: '姓名',width:80,emptyString:'--' },//emptyString指的是当数据为空时显示的值
        { name: 'age', label: '年纪',},
        { name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
        { name: 'address', label: '地址' },
        { name: 'date', label: '日期', },
        { name: 'province', label: '省份' },
        { name: 'city', label: '城市' },
        { name: 'zip', label: '邮编' },
    ]
    const rowClick= (row: any,index: { detail: { index: any[]; }; }) => {
		console.log(row)//展示选中数据
	}
</script>

展示数据

<template>
	<view class="content">
		<uni-card title="全部功能">
			<view style="height: 300px">
				  <zb-table
                    :columns="column1"
                    :stripe="true"
                    @rowClick="rowClick"
                    :data="data"></zb-table>
			</view>
		</uni-card>
    </view>
</template>

3.表格功能扩展

选中高亮：:highlight="true"，修改高亮颜色在源码1330行附近如下

.current-row{
  .item-td{
    background-color: #AFCDFF;
  }
}

是否开启上拉加载：:isShowLoadMore="true"
是否在表尾显示合计行：:show-summary="true"
开启末尾合计行：:show-summary="true"
自定义合计方式：:summary-method="getSummaries"

4.优化合计行计算方式

const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];
    
    // 获取数值的最大小数位数
    const getMaxDecimal = (nums) => {
        let max = 0;
        nums.forEach(num => {
            const str = num.toString();
            const dotIndex = str.indexOf('.');
            if (dotIndex === -1) return;
            const decimalPart = str.slice(dotIndex + 1);
            max = Math.max(max, decimalPart.length);
        });
        return max;
    };

    // 将数值转换为指定位数的整数
    const toScaledNumber = (num, decimalPlaces) => {
        const str = num.toString();
        const [intPart, decimalPart = ''] = str.split('.');
        const paddedDecimal = decimalPart.padEnd(decimalPlaces, '0').slice(0, decimalPlaces);
        const scaledStr = intPart + paddedDecimal;
        return parseInt(scaledStr, 10) || 0;
    };

    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '合计';
            return;
        }
        //number指的是需要合计的行
        if (column.name === 'number') {
            const values = data.map(item => Number(item[column.name]));
            const validValues = values.filter(v => !isNaN(v));
            if (validValues.length === 0) {
                sums[index] = 'N/A';
            } else {
                const maxDecimal = getMaxDecimal(validValues);
                const sumScaled = validValues.reduce((acc, num) => 
                    acc + toScaledNumber(num, maxDecimal), 0);
                const total = sumScaled / Math.pow(10, maxDecimal);
                // 格式化并去除末尾的零
                let formattedTotal = total.toFixed(maxDecimal)
                    .replace(/\.?0+$/, '')
                    .replace(/\.$/, '');
                sums[index] = `${formattedTotal} 吨`;
            }
        } else {
            sums[index] = 'N/A';
        }
    });
    return sums;
};

精确累加： 使用toScaledNumber函数将每个数值按最大小数位数补零并转换为整数，确保累加过程精确。
格式化结果： 累加后的整数总和转换回浮点数后，使用toFixed和正则表达式去除多余的末尾零，使结果更简洁。
转换为整数计算： 通过getMaxDecimal函数确定所有数值中最大的小数位数，将每个数值乘以相应的10的幂次转换为整数，避免浮点数直接相加的精度问题。
在官方例子中会出现浮点数计算精度问题例如0.1+0.2=0.30000000000000004的情况，上述代码能够解决此问题