三层结构的数据显示到表格中合并表格行

表格添加合并方法

三层结构的数据显示到表格中合并表格行_第1张图片

在接口中拿到数据并处理数据,接口返回的数据格式

三层结构的数据显示到表格中合并表格行_第2张图片

处理数据,处理完的表格数据的结构和正常表格数据结构一样,声明length1,length2,啊,来判断表格第一列和第二列的数据应该合并多少行

三层结构的数据显示到表格中合并表格行_第3张图片

三层结构的数据显示到表格中合并表格行_第4张图片

表格

三层结构的数据显示到表格中合并表格行_第5张图片

getcompareObjResult() {

const query = {

hisid: this.$route.params.hisId

}

compareObjResult(query).then(res => {

const temp = res.data.data

const targetList = []

const length1 = [0]

const length2 = [0]

let a

temp.forEach(item => {

const dbinfo = item

const dblist = item.DETAIL

// const rowCount = item.DETAIL.length

a = 0

dblist.forEach((item2, index) => {

item2.TABLE = dbinfo.TABLE

const dbinfo2 = item2

const dblist2 = item2.DETAIL

// const rowCount2 = item2.DETAIL.length

// console.log(dblist2, 7777777777)

if (dblist2.length === 0) {

const item = {

CHAR_OCTET_LENGTH: '',

COLNAME: '',

COLNO: '',

DBNAME: dbinfo2.DBNAME,

IS_NULLABLE: '',

LENGTH: '',

NULLABLE: '',

SCALE: '',

TABLE: '',

TYPENAME: ''

}

dblist2.push(item)

}

dblist2.forEach((item3, index3) => {

if (index3 === dblist2.length - 1) {

length1.push(dblist2.length)

a += dblist2.length

if (index === dblist.length - 1) {

length2.push(a)

}

}

// if (index === 0) {

// item3.rowspan2 = rowCount2

// } else {

// item3.rowspan = 0

// }

// item3.rowspan = dbinfo2.rowspan

item3.TABLE = dbinfo2.TABLE

item3.DBNAME = dbinfo2.DBNAME

targetList.push(item3)

})

})

})

 

let k = 0

let t = 0

 

length2.forEach((v, i, nameArr) => {

if (nameArr[i + 1]) {

targetList[k].length2 = nameArr[i + 1]

k += nameArr[i + 1]

}

})

length1.forEach((v, i, typeArr) => {

if (typeArr[i + 1]) {

this.$set(targetList[t], 'length3', typeArr[i + 1])

t += typeArr[i + 1]

// }

}

})

 

this.tableList = targetList

 

// 处理数据,把合并的数据重置为每一行

}).catch(err => {

console.log(err)

})

}

 

你可能感兴趣的:(表格合并行,三层数据结构)