使用element-ui 组件动态合并table的行/列（第二次修改）
这是第二次修改，在通过调用后台接口返回来的时候，发现了代码中的问题；现在将博客中错误的地方改过来，添加备注
文章需求：动态实现table表格中行/列的自动合并
使用框架及UI类库：Vue+Element-ui
代码地址：https://github.com/dreamITGirl/VueProgect
最终实现的表格数据
实现思路：
在table组件中，提供了一个属性:span-method,它是一个Function，本身有4个参数，分别是row,rowIndex,colum,columIndex;这四个值可以直接拿到。先处理连续相同的列的值，做标记，然后，在合并的方法中，根据我们处理好的数组，去对应的合并行或列
实现代码：
//处理table数据的方法，将连续相同的数据汇总
merge() {
let OrderObj = {};
let provinceObj = {};
this.tableData.forEach((element, index) => {
element.rowIndex = index;
if (OrderObj[element.operators]) {
//如果下一个数据中的operators和这一列的数据相同，则合并，反之，不合并；（增加这一个判断的目的是为了防止隔行出现相同时，列合并）；
//二次修改的地方，在nextItem中，index取不到当前值，因为这时候循环过来的index已经是+1之后的值了，所以，nextItem是不需要再+1的
let nextItem = this.tableData[index + 1].operators
? this.tableData[index + 1].operators
: undefined;
改为
let nextItem = this.tableData[idndex].operators ? this.tableData[index].operators : undefined
let prevItem = this.tableData[index - 1].operators ? this.tableData[index - 1].operators : undefined;
if (element.operators == nextItem) {
OrderObj[element.operators].push(index);
} else if (element.operators == prevItem) {
OrderObj[element.operators].push(index); }
} else {
OrderObj[element.operators] = [];
OrderObj[element.operators].push(index);
}
if (provinceObj[element.province]) {
let nextPro = this.tableData[index + 1] ? this.tableData[index + 1].province : undefined;
let prevPro = this.tableData[index - 1].province ? this.tableData[index - 1].province : undefined;
if (element.province == nextPro) {
provinceObj[element.province].push(index);
} else if (element.province == prevPro) {
provinceObj[element.province].push(index); }
} else {
provinceObj[element.province] = [];
if(index != 0){
provinceObj[element.province].push(index);
}
}
}); // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
for (let k in OrderObj) { if (OrderObj[k].length > 1) { this.OrderIndexArr.push(OrderObj[k]); } } for (let i in provinceObj) { if (provinceObj[i].length > 1) { this.provinceArr.push(provinceObj[i]); } }
}
//合并的方法
objectSpanMethod({ row, rowIndex, column, columnIndex }) {
if (columnIndex === 0) {
for (let i = 0; i < this.OrderIndexArr.length; i++) {
let element = this.OrderIndexArr[i];
for (let j = 0; j < element.length; j++) {
let item = element[j];
if (rowIndex === item) {
if (j === 0) {
return {
rowspan: element.length,
colspan: 1
};
} else if (j !== 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
//因为需求是前两列中有相同的就合并，所以需要再次判断出来第一列中哪些行需要合并；
if (columnIndex === 1) {
for (let j = 0; j < this.provinceArr.length; j++) {
let element = this.provinceArr[j];
for (let k = 0; k < element.length; k++) {
let item = element[k];
if (rowIndex === item) {
if (k === 0) {
return {
rowspan: element.length,
colspan: 1
};
} else if (k !== 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
}
=============================================
上面的代码会导致一个问题，就是当上述数据中，当运营商是移动时，且也有省份和其他运营商的省份出现相同且连续时，即table的数据如下时，也就是移动中有和其他的省份出现相同且连续的时候，代码算法就会出现问题。这时算出的出现广州的数组位置index数组就是[0，1，2，8，9]，这样的话，table的合并行就会出现错误。后面是修改后的代码
merge() {
let OrderObj = {};
let provinceObj = {};
this.tableData.forEach((element, index) => {
element.rowIndex = index;
if (OrderObj[element.operators]) {
let nextItem = this.tableData[index + 1] //为防止报错，先判断this.tableData[index+1]项是否存在，否则js会报错
? this.tableData[index + 1].operators
: undefined;
let prevItem = this.tableData[index - 1].operators
? this.tableData[index - 1].operators
: undefined;
if (element.operators == nextItem) {
OrderObj[element.operators].push(index);
} else if (element.operators == prevItem) {
OrderObj[element.operators].push(index);
}
} else {
OrderObj[element.operators] = [];
OrderObj[element.operators].push(index);
}
if (provinceObj[element.province]) {
let nextPro = this.tableData[index + 1]
? this.tableData[index + 1].province
: undefined;
let prevPro = this.tableData[index - 1].province
? this.tableData[index - 1].province
: undefined;
if (element.province == nextPro) {
provinceObj[element.province].push(index);
} else if (element.province == prevPro) {
provinceObj[element.province].push(index);
}
} else {
provinceObj[element.province] = [];
provinceObj[element.province].push(index);
}
});
// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
for (let k in OrderObj) {
if (OrderObj[k].length > 1) {
this.OrderIndexArr.push(OrderObj[k]);
}
}
//修改的地方
for (let i in provinceObj) {
if (provinceObj[i].length > 1) {
this.handleData(provinceObj[i])
}
}
},
//新增的方法，处理当数组的长度大于2的时候
handleData(data){
let temp = data;
let itemArr = [];
let itemArrNew = [];
let resArr = [];
if (data.length>2) {
for (let i = 0; i < data.length; i++) {
if (data[i+1]) {
if (data[i+1] - data[i] > 1) {
itemArr = data.slice(0,i+1)
itemArrNew = temp.slice(i+1,temp.length)
break;
}else{
}
}
}
if (itemArr.length>0 || itemArrNew.length>0) {
this.provinceArr.push(itemArr)
this.provinceArr.push(itemArrNew)
}else{
}
}else{
this.provinceArr.push(data)
}
},
使用element-ui 组件动态合并table的行/列（第二次修改）的更多相关文章
- （Element UI 组件 Table）去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- ReactNative Android之原生UI组件动态addView不显示问题解决
ReactNative Android之原生UI组件动态addView不显示问题解决 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com ...
- element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- vue-cli按需引入Element UI组件
一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...
- vue2.0+Element UI 实现动态表单（点击按钮增删一排输入框）
对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...
- 动态合并GridView数据行DataRow的列
前段时间,Insus.NET一直在演示GridView控件Header头行或列:<动态变更GridView控件列名>和<动态合并或定制GridView控件Header头某些列> ...
- Element UI组件说明
-<el-card>-查询及展示列表页面-[v-show]属性控制显示隐藏-<el-card class="box-card" >-多标签页面-<el ...
- 页面动态table动态合并table
function hebingRows(col, atrrb) { var trs = $("table tbody tr"); var rows = 1; for (var i ...
随机推荐
- python 波波版压缩软件
#压缩软件 import os import zipfile import tkinter import tkinter.filedialog import tkinter.messagebox '' ...
- QTP Code Segment
Dim WshShellset WshShell = CreateObject("WScript.Shell")WshShell.SendKeys "{DOWN}&quo ...
- python介绍(变量,if,while)
python介绍(变量,if,while): python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹 打发时间,决心开发一个新 ...
- redux 介绍及配合 react开发
前言 本文是 Redux 及 Redux 配合 React 开发的教程,主要翻译自 Leveling Up with React: Redux,并参考了 Redux 的文档及一些博文,相对译文原文内容 ...
- webacp4.0
'use strict';const path = require('path'); var APP_PATH = path.resolve(__dirname, 'src');const webpa ...
- Tkinter初体验
一.基本步骤 1.导入Tkinter模块 2.创建根窗口 3.填充组件 4.组件关联逻辑 5.进入主循环 二.Code #coding:utf-8 ''' 网关流量校验器 @author: Hongz ...
- mysql基于GTIDS复制
GTIDS的环境:一台master 192.168.200.111多个slave: 192.168.200.112 192.168.200.113 修改master服务器:[root@localhos ...
- css3--css3模块
CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 1.选择器(.基本选择器,层次选择器,伪类选择器,伪元素,属性选择器,通配符) 2.盒模 ...
- springboot基于注解动态配置多数据源以及多数据源的事务统一
参考文档:https://www.cnblogs.com/zhangboyu/p/7622412.html https://blog.csdn.net/qq_34322777/article/deta ...
- Linux下的Jenkins作为hub，Windows作为node节点，在Android手机上执行自动化脚本
1.在Linux上放selenium-server-standalone-2.53.0.jar,在jar包目录下执行命令java -jar selenium-server-standalone-2.5 ...