el-table表格合并同类项（指定列）

最新推荐文章于 2024-09-26 16:58:44 发布
最新推荐文章于 2024-09-26 16:58:44 发布
阅读量269 收藏
点赞数 2
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m939499/article/details/142520630
版权 
<el-table :data="tableData" border :span-method="objectSpanMethod" style="width: 100%" height="450">
                <el-table-column label="日期" prop="date" type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="reportDate" label="日期" :width="flexColumnWidth('reportDate', tableData)">
                    <template slot-scope="scope">
                        <div class="table" style="color: #1677ff; cursor: pointer" @click="getDetail(scope.row)">{{
                            scope.row.reportDate }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="weather" label="天气" :width="flexColumnWidth('weather', tableData)">
                    <template slot-scope="scope">
                        <div class="table">{{ scope.row.weather }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="workContent" label="工作内容" :width="flexColumnWidth('workContent', tableData)">
                    <template slot-scope="scope">
                        <div class="table">{{ scope.row.workContent }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="urls" label="照片&视频" :width="flexColumnWidth('urls', tableData)">
                    <template slot-scope="scope">
                        <div class="table">{{ scope.row.urls }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="participantName" label="作业人员"
                    :width="flexColumnWidth('participantName', tableData)">
                    <template slot-scope="scope">
                        <div class="table">{{ scope.row.participantName }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="workHours" label="工时(h)" :width="flexColumnWidth('workHours', tableData)">
                    <template slot-scope="scope">
                        <div class="table">{{ scope.row.workHours }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="organization" label="参与组织" :width="flexColumnWidth('organization', tableData)">
                    <template slot-scope="scope">
                        <div class="table">{{ scope.row.organization }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="feedback" label="问题反馈" :width="flexColumnWidth('feedback', tableData)">
                    <template slot-scope="scope">
                        <div class="table">{{ scope.row.feedback }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="oss_ids" label="问题照片" :width="flexColumnWidth('oss_ids', tableData)">
                    <template slot-scope="scope">
                        <div class="table">{{ scope.row.oss_ids }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="plan" label="明日计划" :width="flexColumnWidth('plan', tableData)">
                    <template slot-scope="scope">
                        <div class="table">{{ scope.row.plan }}</div>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getListPagination" />

 data中数据：

data中内容
 // 存放所有的表头 一定要与tableData一致
            colFields: [
                "reportDate",
                "weather",
                "workContent",
                "urls",
                "participantName",
                "workHours",
                "organization",
                "feedback",
                "oss_ids",
                "plan",
            ],
            spanArr: [], //存储合并单元格的开始位置

 js部分

getList() {
            this.queryParams.json.taskId = this.taskForm.id
            let queryParams = {
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
                json: JSON.stringify(this.queryParams.json)
            }
            this.tableData = []
            getServiceReportList(queryParams).then(res => {
                if (res.rows.length) {
                    res.rows.forEach(item => {
                        this.tableData.push(item)
                    })
                    this.total = res.total
                    this.getSpanArr();
                } else {
                    this.tableData = []
                }
            })
        },
getSpanArr() {
            for (let i = 0; i < this.tableData.length; i++) {
                let row = i;
                if (row === 0) {
                    // i 表示行 j表示列
                    for (let j = 0; j < this.colFields.length; j++) {
                        this.spanArr[i * this.colFields.length + j] = {
                            rowspan: 1,
                            colspan: 1,
                        };
                    }
                } else {
                    for (let j = 0; j < this.colFields.length; j++) {
                        const field = this.colFields[j];
                        const currentValue = this.tableData[row][field];
                        const previousValue = this.tableData[row - 1][field];
                        const currentReportDate = this.tableData[row]["reportDate"];
                        const previousReportDate = this.tableData[row - 1]["reportDate"];

                        if (field === "reportDate") {
                            // 日期
                            if (currentValue !== previousValue) {
                                this.spanArr[row * this.colFields.length + j] = {
                                    rowspan: 1,
                                    colspan: 1,
                                };
                            } else {
                                let beforeItem = this.spanArr[(row - 1) * this.colFields.length + j];
                                this.spanArr[row * this.colFields.length + j] = {
                                    rowspan: 1 + beforeItem.rowspan,
                                    colspan: 1,
                                };
                                beforeItem.rowspan = 0;
                                beforeItem.colspan = 0;
                            }
                        } else if (field === "weather" || field === 'date') {
                            // 天气
                            if (currentValue !== previousValue || currentReportDate !== previousReportDate) {
                                this.spanArr[row * this.colFields.length + j] = {
                                    rowspan: 1,
                                    colspan: 1,
                                };
                            } else {
                                let beforeItem = this.spanArr[(row - 1) * this.colFields.length + j];
                                this.spanArr[row * this.colFields.length + j] = {
                                    rowspan: 1 + beforeItem.rowspan,
                                    colspan: 1,
                                };
                                beforeItem.rowspan = 0;
                                beforeItem.colspan = 0;
                            }
                        }
                        else if (field === "workContent") {
                            // 工作内容
                            if (currentValue !== previousValue || currentReportDate !== previousReportDate) {
                                this.spanArr[row * this.colFields.length + j] = {
                                    rowspan: 1,
                                    colspan: 1,
                                };
                            } else {
                                let beforeItem = this.spanArr[(row - 1) * this.colFields.length + j];
                                this.spanArr[row * this.colFields.length + j] = {
                                    rowspan: 1 + beforeItem.rowspan,
                                    colspan: 1,
                                };
                                beforeItem.rowspan = 0;
                                beforeItem.colspan = 0;
                            }
                        } else if (field === "urls" || field === "participantName") {
                            // 照片
                            if (currentValue !== previousValue || this.tableData[row]["workContent"] !== this.tableData[row - 1]["workContent"] || currentReportDate !== previousReportDate) {
                                this.spanArr[row * this.colFields.length + j] = {
                                    rowspan: 1,
                                    colspan: 1,
                                };
                            } else {
                                let beforeItem = this.spanArr[(row - 1) * this.colFields.length + j];
                                this.spanArr[row * this.colFields.length + j] = {
                                    rowspan: 1 + beforeItem.rowspan,
                                    colspan: 1,
                                };
                                beforeItem.rowspan = 0;
                                beforeItem.colspan = 0;
                            }
                        }
                        else if (field === "feedback" || field === "oss_ids" || field === "plan") {
                            // 问题反馈、问题照片、明日计划
                            if (currentValue !== previousValue || currentReportDate !== previousReportDate) {
                                this.spanArr[row * this.colFields.length + j] = {
                                    rowspan: 1,
                                    colspan: 1,
                                };
                            } else {
                                let beforeItem = this.spanArr[(row - 1) * this.colFields.length + j];
                                this.spanArr[row * this.colFields.length + j] = {
                                    rowspan: 1 + beforeItem.rowspan,
                                    colspan: 1,
                                };
                                beforeItem.rowspan = 0;
                                beforeItem.colspan = 0;
                            }
                        } else {
                            // 其他列不合并
                            this.spanArr[row * this.colFields.length + j] = {
                                rowspan: 1,
                                colspan: 1,
                            };
                        }
                    }
                }
            }

            // 对数据进行倒序处理
            let stack = [];
            for (let i = 0; i < this.colFields.length; i++) {
                for (let j = 0; j < this.tableData.length; j++) {
                    if (j === 0) {
                        if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
                            stack.push(this.spanArr[j * this.colFields.length + i]);
                        }
                    } else {
                        if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
                            stack.push(this.spanArr[j * this.colFields.length + i]);
                        } else {
                            stack.push(this.spanArr[j * this.colFields.length + i]);
                            while (stack.length > 0) {
                                let pop = stack.pop();
                                let len = stack.length;
                                this.spanArr[(j - len) * this.colFields.length + i] = pop;
                            }
                        }
                    }
                }
            }

        },

        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            return this.spanArr[rowIndex * this.colFields.length + columnIndex];
        },

此文章仅为记录一下当时做表格合并同类项 的方法，如需参考可详细看一下代码，这里不做过多解释

LEARNING TO SCHEDULE COMMUNICATION IN MULTI-AGENT REINFORCEMENT LEARNING
weixin_41697507的博客
06-24 4123
ABSTRACT Many real-world reinforcement learning tasks require multiple agents to make se- quential decisions under the agents’ interaction, where well-coordinated actions among the agents are crucial ...
web杂谈
yin_wuzhe的专栏
04-23 3111
前言：本人作为一个前端小白，梳理一下这段时间开发前端一个页面的过程，希望对自己起到备忘并思考的作用，希望我的经验对于别人也有一点帮助的作用。由于本文碎碎念的部分过长，导致本文过长。还请读者见谅。—更新中（更新周期大概还会持续一个月）前端框架现如今，前端框架也越来越多了，比如ember,angular,以及这里要说到的vuejs.。下面的内容首先要介绍vue.js的原理。Vue.js ？ 原理 vue
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
关于el-table列的单元格合并
weixin_44270521的博客
05-23 2042
关于表格合并
el-table表格内同一列相同的数据合并为一行
最新发布
码上暴富
09-26 356
【代码】el-table表格内同一列相同的数据合并为一行。
el-table——可合并单元格的表格
07-11 402
<el-table v-loading="loading" :data="tableData" border :span-method="colSpanMethod" > </el-table> //需要的合并效果：data spanArrs: { ...
el-table实现表格合并
sh11223312的博客
06-12 838
（Element UI 的表格组件）时，你可以通过自定义合并单元格的逻辑来实现表格单元格的合并。Element UI 提供了。，从而实现表格行的合并。我这里的需求是排除第4、5和6列的合并（基于0索引），其他列根据。来判断当前行是否与前一行相同，如果相同则增加合并数量，否则重置合并计数。：这个方法用于计算每一行需要合并的数量，并存储在。以下是一个详细的思路和示例，展示如何在。属性，用于控制行或列的合并。： 这个方法根据列索引和。中的值来确定单元格的。
el-table合并相同数据列
L2395183536的博客
08-16 2545
element-plus的文档给的合并行和列的示例都是写死的指定行或列，应用场景太小，对于下图需求完全不能满足。我们需要实现将表头第一行根据相同数据项进行合并列，以下是实现代码。
el-table 合并相同值单元格
qq_43664930的博客
07-04 1188
el-table 合并相同值单元格
基于element-ui的table实现树级表格操作及单元格合并
trottoir-blog
10-31 4719
基于element-ui的table，在一张表内实现多级树状数据展示及同属性的单元格合并，并在表格内实现增删改操作。
web前端面试题（必背面试题）
热门推荐
Z_Gleng的博客
05-25 3万+
自己总结的常见的面试题 总字数13万+ 大概有200+左右道题 会不定期更新
程序员编程笔记
weixin_40789007的博客
09-20 4735
1.查看电脑当前进程和端口cmd netstat -pid netstat -a 查看全部端口信息:netstat –ano 2.创建文件夹 mkdir 文件名或文件路径 3.删除文件夹 rmdir 4.删除文件 del 5.打开计算机calc 6.打开画图mspaint 7.用echo "写入新数据">d:\a.txt，echo 字符串 >文件路径 文件名(会覆盖原内容) 8.用echo "写入新数据">>d:\a.txt，echo 字符串 >文件路径 文件名.
el-table的表格合并
Principal_Z的博客
07-29 266
表格样式 话不多说，上代码 html部分 <el-table :data="abilityTable" :span-method="abilitySpanMethod" style="width: 100%"> <el-table-column prop="" label="" align="center"> </el-table-column> <el-table-column prop="" align="center" l
el-table 表格合并
qq_46302247的博客
09-01 1621
【代码】el-table 表格合并。
el-table合并指定列
weixin_52115201的博客
03-29 497
使用:span-method="merge"
el-table 合并指定列
DejaVus的博客
08-29 506
el-table
＜el-table＞ 把表格内同一列相同的数据合并为一行
叁金Coder
08-29 1611
el-table>
Oracle DUL Data Unloader数据恢复工具信息汇总
ORACLE数据库数据恢复、性能优化、故障诊断来问问MACLEAN
09-05 1万+
Oracle DUL 是Oracle公司内部的数据库恢复工具，由在荷兰的Oracle Support，Bernard van Duijnen开发： DUL不是Oracle的一个产品 DUL不是一个受Oracle支持的产品 DUL被严格限制为Oracle Support售后支持部门内部使用 DUL的使用在国外需要经过Oracle公司的内部审批，首先你必须购买了Oracle的标准服务PS才可能用到DUL，否则甚至没有资格使用DUL DUL被严格控制的一个原因是其采用了部分Oracle源代码，所以必须被严格控制
《利用python进行数据分析》读书笔记
老兵Coding
06-15 3125
《利用python进行数据分析》是一本利用python的Numpy、Pandas、Matplotlib库进行数据分析的基础介绍，非常适合初学者。 重要的python库 NumPy http://numpy.org Pandas http://pandas.pydata.org matplotlib http://matplotlib.org IPython 和 Jupyter http://ipython.org http://jupyter.org Scipy http://scipy.org sci
el-table表格动态合并行、合并行列及详解_el-table 合并行
2401_85124666的博客
06-12 6239
在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下： 而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下： 所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单 是el-table上属性，其值是一个，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下： 首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值