这是第二次修改,在通过调用后台接口返回来的时候,发现了代码中的问题;现在将博客中错误的地方改过来,添加备注
文章需求:动态实现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的合并行就会出现错误。后面是修改后的代码
tableData: [
{
operators: "其他",
province: "广东",
room: "广州双线1",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "其他",
province: "广东",
room: "广州双线2",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "其他",
province: "广东",
room: "广州双线3",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "电信",
province: "浙江",
room: "广州双线2",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data) 第三条10G (no latest data,no latest data) 第四条10G"
},
{
operators: "电信",
province: "浙江",
room: "杭州双线2",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data) 第三条10G (no latest data,no latest data) 第四条10G"
},
{
operators: "电信",
province: "浙江",
room: "杭州双线2",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data) 第三条10G (no latest data,no latest data) 第四条10G"
},
{
operators: "联通",
province: "江西",
room: "杭州双线2",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "联通",
province: "浙江",
room: "浙江双线2",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条10G (no latest data,no latest data) 第二条10G (no latest data,no latest data) 第三条10G (no latest data,no latest data) 第四条10G"
},
{
operators: "移动",
province: "江西",
room: "江西双线2",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "移动",
province: "广东",
room: "广州双线2",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "移动",
province: "广东",
room: "广州双线2",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
{
operators: "移动",
province: "广东",
room: "广州双线2",
abbreviation: "GZ_DB2",
bandwidth: "10G",
flow:
"第一条1G (no latest data,no latest data)第二条1G (no latest data,no latest data)"
},
]
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); }</span><span style="color: #0000ff;">if</span><span style="color: #000000;"> (provinceObj[element.province]) { let nextPro </span>= <span style="color: #0000ff;">this</span>.tableData[index + 1<span style="color: #000000;">] </span>? <span style="color: #0000ff;">this</span>.tableData[index + 1<span style="color: #000000;">].province : undefined; let prevPro </span>= <span style="color: #0000ff;">this</span>.tableData[index - 1<span style="color: #000000;">].province </span>? <span style="color: #0000ff;">this</span>.tableData[index - 1<span style="color: #000000;">].province : undefined; </span><span style="color: #0000ff;">if</span> (element.province ==<span style="color: #000000;"> nextPro) { provinceObj[element.province].push(index); } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (element.province ==<span style="color: #000000;"> prevPro) { provinceObj[element.province].push(index); } } </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> { provinceObj[element.province] </span>=<span style="color: #000000;"> []; provinceObj[element.province].push(index); } }); </span><span style="color: #008000;">//</span><span style="color: #008000;"> 将数组长度大于1的值 存储到this.OrderIndexArr(也就是需要合并的项)</span> <span style="color: #0000ff;">for</span> (let k <span style="color: #0000ff;">in</span><span style="color: #000000;"> OrderObj) { </span><span style="color: #0000ff;">if</span> (OrderObj[k].length > 1<span style="color: #000000;">) { </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.OrderIndexArr.push(OrderObj[k]); } } //修改的地方 </span><span style="color: #0000ff;">for</span> (let i <span style="color: #0000ff;">in</span><span style="color: #000000;"> provinceObj) { </span><span style="color: #0000ff;">if</span> (provinceObj[i].length > 1<span style="color: #000000;">) { </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.handleData(provinceObj[i]) } } },<br>//新增的方法,处理当数组的长度大于2的时候 handleData(data){ let temp </span>=<span style="color: #000000;"> data; let itemArr </span>=<span style="color: #000000;"> []; let itemArrNew </span>=<span style="color: #000000;"> []; let resArr </span>=<span style="color: #000000;"> []; </span><span style="color: #0000ff;">if</span> (data.length>2<span style="color: #000000;">) { </span><span style="color: #0000ff;">for</span> (let i = 0; i < data.length; i++<span style="color: #000000;">) { </span><span style="color: #0000ff;">if</span> (data[i+1<span style="color: #000000;">]) { </span><span style="color: #0000ff;">if</span> (data[i+1] - data[i] > 1<span style="color: #000000;">) { itemArr </span>= data.slice(0,i+1<span style="color: #000000;">) itemArrNew </span>= temp.slice(i+1<span style="color: #000000;">,temp.length) </span><span style="color: #0000ff;">break</span><span style="color: #000000;">; }else{</span></pre>