el-table 合并单元格为何部分成功,部分失败?
时间:2024-11-14 12:30:53 338浏览 收藏
知识点掌握了,还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战,手把手教大家学习《el-table 合并单元格为何部分成功,部分失败? 》,在实现功能的过程中也带大家重新温习相关知识点,温故而知新,回头看看说不定又有不一样的感悟!
el-table合并部分内容成功,部分不成功的问题探讨
问题详情:需要实现的表格效果如下图所示,前四列内容固定不变,采用新的表格合并方法。
[图片]
已有渲染代码如下:
<el-table :data="waterData" border :span-method="handleSpanM"> <!-- 前4列固定 --> <el-table-column width="65"><template slot-scope="scope">{{scope.row.name }}</template></el-table-column> <el-table-column width="70" label="系数"> <template slot-scope="scope"><el-input size="mini" v-model="scope.row.factor"></el-input></template> </el-table-column> <el-table-column width="120" label="等级分数"> <template slot-scope="scope"><el-input size="mini" v-model="scope.row.grade"></el-input></template> </el-table-column> <el-table-column width="180" label="符号选择"> <template slot-scope="scope"><div class="symbol"><span style="display: none;">{{ scope.row.symbol }}</span><span class="symbol_range"></span></div></template> </el-table-column> <!-- 后6列可编辑,列头也需要设置成可编辑的 --> <el-table-column v-for="(column,index) in 6" :key="`column-${index}`" width="120"> <template slot="header"><div><el-input size="small" v-model="waterForm[`water${index + 1}_label`]"></el-input> </div> </template> <template slot-scope="scope"><div><el-input size="small" v-model="waterForm[`water${index + 1}_factor`]"></el-input></div> </template></el-table-column> </el-table>
问题分析
系统能实现预期效果,但第4列一直无法合并。
解决方案
新的表格合并方法如下:
merge(tableData) { // 要合并的数组的方法 this.companyArr = []; this.companyPos = 0; this.simpleArr = []; this.simplePos = 0; this.symbolArr = []; this.symbolPos = 0; for (var i = 0; i < tableData.length; i++) { if (i === 0) { // 第一行必须存在 this.companyArr.push(1); this.companyPos = 0; this.simpleArr.push(1); this.simplePos = 0; this.symbolArr.push(1); this.symbolPos = 0; } else { // 第一列 if (tableData[i].name === tableData[i - 1].name) { this.companyArr[this.companyPos] += 1; this.companyArr.push(0); } else { this.companyArr.push(1); this.companyPos = i; } // 第二列 if ( tableData[i].name === tableData[i - 1].name && tableData[i].factor === tableData[i - 1].factor ) { this.simpleArr[this.simplePos] += 1; this.simpleArr.push(0); } else { this.simpleArr.push(1); this.simplePos = i; } // 第四列 if ( tableData[i].name === tableData[i - 1].name && tableData[i].factor === tableData[i - 1].factor && tableData[i].symbol === tableData[i - 1].symbol ) { this.symbolArr[this.symbolPos] += 1; this.symbolArr.push(0); } else { this.symbolArr.push(1); this.symbolPos = i; } } } }, // 合并行 arraySpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 合并第一列 const _row_1 = this.companyArr[rowIndex]; const _col_1 = _row_1 > 0 ? 1 : 0; // 如果被合并了_row=0则它这个列需要取消 return { rowspan: _row_1, colspan: _col_1, }; } else if (columnIndex === 1) { // 合并第二列 const _row_2 = this.simpleArr[rowIndex]; const _col_2 = _row_2 > 0 ? 1 : 0; return { rowspan: _row_2, colspan: _col_2, }; } else if (columnIndex === 3) { // 合并第四列 const _row_3 = this.symbolArr[rowIndex]; const _col_3 = _row_3 > 0 ? 1 : 0; return { rowspan: _row_3, colspan: _col_3, }; } }
后几列表头不可编辑的修复
// data waterForm: { water1_label: "前10分钟", water2_label: "前20分钟", water3_label: "前30分钟", water4_label: "前40分钟", water5_label: "前50分钟", water6_label: "前60分钟", },
以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。
相关阅读
更多>
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
最新阅读
更多>
-
169 收藏
-
107 收藏
-
384 收藏
-
163 收藏
-
147 收藏
-
216 收藏
课程推荐
更多>
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 507次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习