使用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 ...
随机推荐
- 迪杰斯特拉算法（Dijkstra）
模板一: 时间复杂度O(n2) int dijkstra(int s,int m) //s为起点,m为终点 { memset(dist,,sizeof(dist)); //初始化,dist数组用来储存 ...
- 金额格式化，例子：fmoney("12345.675910", 3)，返回12,345.676
/** * 金额格式化 * 例子:fmoney("12345.675910", 3),返回12,345.676 * @data 备注lhh 2016-09-18 */ functi ...
- poj3264 Balanced Lineup（树状数组）
题目传送门 Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 64655 Accepted: ...
- 同事遇到了一个问题（在DllMain函数之前抢控制权）
同事有个需求,他的进程会加载一个DLL,他需要在那个DLL的DllMain函数执行之前控制DLL,修改DLL的内存. 以上工作要求全部在应用层执行. 这个其实有点悲剧. 因为这个需求其实有点坑,因为需 ...
- NSQ消息队列
前面的总结中提到过这个玩意,所以简单说说,win上面的测试验证 网上有比较合适的博文,我先推荐几篇 https://blog.csdn.net/a2247889821/article/details/ ...
- 转载：tomcat性能的优化
考虑一下这种场景,你开发了一个应用,它有十分 优秀的布局设计,最新的特性以及其它的优秀特点.但是在性能这方面欠缺,不管这个应用如何都会遭到客户拒绝.客户总是期望它们的应用应该有更好的性能.如 果你在产 ...
- 愚蠢的sql语法错误（sum (xxx))
sum和()之间打了一个空格,导致一致报sql语法错误,看了半天不知道怎么回事orz
- ambari安装hadoop
前言 hadoop除了社区版之外,还有两个主流的分支,一个是cdh版本,一个是hdp版本,其中ambari是hdp版本的部署工具 1.ambari安装准备 https://docs.hortonwor ...
- 获取浏览器IP
public static string GetLoginIP(HttpRequestBase request) { string loginip = " ...
- USB驱动程序设计
1.USB驱动模型 ①USB HOST控制器驱动 ②USBhexin ③USB客户端驱动 设备4个层次:设备(device).配置(Config).接口(Interface).端点(Endpoint) ...