在el-table数据中间添加一行合计行，并且序号重新排版

最新推荐文章于 2024-06-07 10:54:53 发布

@然而

最新推荐文章于 2024-06-07 10:54:53 发布

阅读量2.5k

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_53026081/article/details/131560805

版权

第一种方案：后端给你传的数据中加载一行合计行！！！（简单有效！）

第二种方案：使用计算属性

效果图：

如果你想在 el-table 中间添加一行合计行，并重新排版序号，你需要对表格数据进行处理，将合计行的数据插入到正确的位置。

在上述代码中，我们首先定义了 el-table，其中 el-table-column 用于定义表格列。序号列使用 type=“index” 属性，并在 template 中计算重新排版的序号。其余的 el-table-column 使用 prop 属性绑定对应的数据列。在 data 中设置了 tableData，这是原始的表格数据。在 computed 中，我们创建了 computedTableData 计算属性，通过对原始表格数据进行处理，在合适的位置插入合计行的数据。在示例中，我们假设将合计行插入到第二行的位置（索引为 1）。你可以根据实际需求调整这个位置。

需要注意的是，以上只是示例代码，具体实现方法可能需要根据你的业务逻辑进行调整。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <el-table :data="computedTableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="100">
            <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="column1" label="Column 1"></el-table-column>
        <el-table-column prop="column2" label="Column 2"></el-table-column>
        <el-table-column prop="column3" label="Column 3"></el-table-column>
    </el-table>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [
                    { column1: "Data 1", column2: "Data 2", column3: "Data 3" },
                    { column1: "Data 4", column2: "Data 5", column3: "Data 6" },
                    { column1: "Data 4", column2: "Data 5", column3: "Data 6" },
                    { column1: "Data 4", column2: "Data 5", column3: "Data 6" },
                    { column1: "Data 4", column2: "Data 5", column3: "Data 6" },
                ]
            };
        },
        computed: {
            computedTableData() {
                const newData = [...this.tableData]; // 创建一个新的数组，避免修改原始数据
                const totalRow = { column1: "合计", column2: 0, column3: 0 }; // 合计行的数据

                // 计算合计值
                this.tableData.forEach(item => {
                    totalRow.column2 += item.column2;
                    totalRow.column3 += item.column3;
                });
                // 将合计行插入到正确的位置
                newData.splice(4, 0, totalRow); // 假设将合计行插入到第二行的位置

                return newData;
            }
        }
    });
</script>
</body>
</html>

第三种：使用直接修改表格数据，和第二种思路大差不大。

效果图：

首先是要遍历后端给出的数据，然后根据条件判断，再该加数据的位置为表格添加一行合计行。try catch 用于跳出forEach循环。

//合计行处理
                        try {
                            this.tableData_bk.forEach((bk, indexBk) => {
                                if (this.tableData_bk[0]._prop?.is_current === 'T') {
                                    this.showSummaryBk = true
                                    throw new Error(); //抛出异常
                                }
                                if (bk._prop?.is_current === 'T' && this.tableData_bk[indexBk - 1]._prop?.is_current === 'F') {
                                    this.showSummaryBk = true
                                    this.pagval_bk = this.tablePage_bk[1]
                                    if (indexBk != 0) {
                                        this.tableData_bk.splice(indexBk, 0, {
                                            "heji": "结转合计",
                                            "in_amt": this.sum_in_amt_his_bk,
                                            "out_amt": this.sum_out_amt_his_bk,
                                            "rec_relord": "0",
                                        })
                                    }
                                    this.addIndexBk = indexBk;
                                    throw new Error(); //抛出异常
                                } else {
                                    this.showSummaryBk = false
                                }
                            })
                        } catch (e) {

                        }

index重排算法：

首先，定义了一个变量 i，它是根据传入的 index 值计算得出的表格中某行的实际索引。
- index 参数代表表格中的索引值。
- this.tablePage_bk[1] 表示表格的当前页码，this.tablePage_bk[0] 表示表格每页的行数。
- index + 1 是将索引值转换为从 1 开始的表格行号。
- (this.tablePage_bk[1] - 1) * this.tablePage_bk[0] 是根据页码计算需要跳过的前几页的行数。
接下来，使用条件语句对 i 进行处理。
- 如果 index 等于 this.addIndexBk，则将 i 的值赋给 this.ibk 并返回空字符串。
- 否则，如果 i 大于 this.ibk 且 this.ibk 不等于 0，进入下一个条件判断。
- 如果 this.pagval_bk 小于 this.tablePage_bk[1] 且 this.pagval_bk 不等于 0，则将 i 的值增加 1。
- 返回 i - this.ibk 的结果。
如果以上条件都不满足，则直接返回 i 的值

 index_bk(index) {
                let i = index + 1 + (this.tablePage_bk[1] - 1) * this.tablePage_bk[0]
               //添加合计行的位置，使他的index为空 仅包括本页数据
                 if (index == this.addIndexBk) {
                    this.ibk = i
                    return ''
                }
                //this.ibk 是在总表格中合计行的位置
                if(i > this.ibk && this.ibk != 0){
                    if(this.pagval_bk < this.tablePage_bk[1] && this.pagval_bk != 0){
                        i = i + 1
                    }
                    return i - this.ibk
                }
                return i
            },

@然而

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
在el-table数据中间添加一行合计行，并且序号重新排版

在 computed 中，我们创建了 computedTableData 计算属性，通过对原始表格数据进行处理，在合适的位置插入合计行的数据。在示例中，我们假设将合计行插入到第二行的位置（索引为 1）。首先是要遍历后端给出的数据，然后根据条件判断，再该加数据的位置为表格添加一行合计行。如果你想在 el-table 中间添加一行合计行，并重新排版序号，你需要对表格数据进行处理，将合计行的数据插入到正确的位置。需要注意的是，以上只是示例代码，具体实现方法可能需要根据你的业务逻辑进行调整。表示表格的当前页码，
复制链接

扫一扫