<script> 
Export the default {
Name: "HelloWorld," 
Data () {
Return {
TableData: [
[" Monday ", "Monday", "Monday" and "Thursday", "Friday", "Saturday"], 
[" language ", "mathematics", "English", "history", "physical", "chemical"], 
[" language ", "English", "mathematics", "physical", "history", "sports"], 
[" language ", "English", "physical", "mathematics", "sports", "history"], 
[" mathematics ", "language", "chemical" and "physical", "history", "sports"], 
[" mathematics ", "language", "chemical" and "physical", "sports", "history"], 
] 
}; 
}, 

Created () {
Enclosing tableData=https://bbs.csdn.net/topics/this.rowspanData (enclosing tableData) 
}, 

Methods: {
//merge 
RowspanData (data) {
Let rowspanData []=https://bbs.csdn.net/topics/
First: the for (let I=0; I & lt; Data. The length; I++) {
Let rowsArray=[]//line 
Second: the for (let j=0; J & lt; Data [I]. Length; J++) {
//a list 
Let obj={
Name: data [I] [j], 
Rowspan: 1,//
Colspan: 1//column 
} 
If (I===0) {
RowsArray. Push (obj) 
} 
If (I & gt; 0 {
If (data [I] [j]===data [I - 1] [j]) {
//? Only took a value 
The console. The log (data [I] [j]); 
The console. The log (data [j] [I - 1]). 
RowspanData [j]. [I - 1] rowspan++ 
} else {
RowsArray. Push (obj) 
} 
} 
} 
RowspanData. Push (rowsArray) 
} 
//the console. The log (rowspanData); 
Return rowspanData 
}, 

//merge column 
ColspanData (data) {
Let colspanData []=https://bbs.csdn.net/topics/
First: the for (let I=0; I & lt; Data. The length; I++) {
Let rowsArray=[]//line 
Second: the for (let j=0; J & lt; Data [I]. Length; J++) {
//a list 
Let obj={
Name: data [I] [j], 
Colspan: 1,//
Rowspan: 1/line/
} 
If (rowsArray. Length & gt; 0 {
ColspanData: for (let k=0; K & lt; RowsArray. Length; K++) {
If (data [I] [j]===rowsArray [k]. Name) {
RowsArray [k]. Colspan++; 
The continue second 
} 
} 
} 
RowsArray. Push (obj) 
} 
ColspanData. Push (rowsArray) 
} 
Return colspanData 
} 
} 
}; 
</script> 
<style scoped> 
Table {
Border: 1 px solid # 666; 
} 

Table td {
Border - bottom: 1 px solid # 666; 
Border - right: 1 px solid # 666; 
} 
</style> 

Is the vue code above, want to handle arrays into the array format below, the following data is only, for example,

 tableData: [{
Name: "on Monday," 
Colspan: 3,//
Rowspan: 1/line/
}, 

{
Name: "language," 
Colspan: 1,//
Rowspan: 3/line/
} 


] 

The final data can use vue v - a for loop, please help to look at,

 & lt; Table width="100%" cellspan="0" & gt; 
 
 
 

CodePudding user response:

Did it by himself for a few days, didn't do it, the company projects, CSDN for help