el-table使用后端返回数据展示表格合计数据

const getSummaries = (param) => {

    const { columns,data } = param

    const sums = []

    columns.forEach((cloumn, index) => {

        switch (index) {

            case 0:

                sums[index] = "合计"

                break;

            case 3:

                sums[index] = “接口数据”

                break;

            case 4:

                sums[index] = “接口数据”

                break;

            default:

                break;

        }

    });

    return sums

}

 

在Vue的Element UI库中,`el-table`组件通常用于展示表格数据,如果需要计算表的最后一列(通常是总计或汇总),你可以这样做: 1. 首先,在数据结构中为每一行预留一个字段,例如`total`,用于存储该行的数据汇总结果。如果你的数据是从后端获取,你需要确保后端返回数据包含这个字段。 ```json [ { column1: '值1', column2: '值2', ..., total: 总计计算后的值, // 其他列... }, ... ] ``` 2. 在`el-table-column`的定义中,创建一个专门显示总和的列,并动态绑定到每个行的`total`属性。可以使用`v-bind`或`computed`来实现动态渲染。 ```html <template> <el-table :data="tableData"> <el-table-column type="index" label="#" width="45"></el-table-column> <!-- 其它列... --> <el-table-column label="总计" prop="total" show-overflow-tooltip v-if="isTotalColumnVisible" ></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [], isTotalColumnVisible: false, // 初始时隐藏总和列 }; }, computed: { getSum(row) { // 这里可以根据你的业务逻辑计算每行的总计 return row.column1 + row.column2; // 示例代码,替换为实际计算公式 }, }, methods: { fetchData() { /* 后端请求数据 */ }, async onLoad(data) { this.tableData = await data; this.isTotalColumnVisible = true; // 加载完成后显示总和列 this.tableData.forEach((row, index) => { row.total = this.getSum(row); // 动态计算并赋值给每行的total属性 }); }, }, mounted() { this.fetchData(); }, }; </script> ``` 在这个例子中,`onLoad`函数会在数据加载完成时被调用,计算每个行的总计并设置到相应的`total`字段上。然后在模板中,`isTotalColumnVisible`变量控制是否显示总和列。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值