ps:灰色部分爲固定值部分html
我的吐槽: 是隻是個大學還沒畢業,練習時長不到一個月的前端實習生,不愛打籃球...呸,說多了,內心只有MMP,一臉懵,咋辦嘛,就只有硬着頭皮寫前端
筆者在以前,從未接觸過這種複雜表格。因而乎,面對百度編程開始!搜索了大半天,找了幾個可能能夠實現的方法。web
筆者選擇了vxe-table,而後動手寫。數據庫
這些所謂的好用到爆的組件,其實好像都是要本身去實現跨行列的邏輯。(哈哈哈,這應該是很正常的,小小吐槽一下)編程
其實跨列一點都不難,難的是跨列。怎麼作到一條數據的後幾個值分紅四行?後端
一開始,我想的是在後面幾個格子裏嵌套表格,用表格制裁表格。試了一下,沒成功,不知道是否是我本身的問題。接着,想把前面的數據進行跨行處理,前面的數據跨四行,聽起來好像是很不錯的。。實現起來,emmm 不說了 ,上個人效果圖和代碼編輯器
大概就是這個樣子的吧,這裏我只作了前面幾行的合併,由於沒給值,因此有點問題。url
說實話,這個作的很垃圾,可是不知道咋辦 因此,本文,實際上是一個求助帖!!! 大佬們,賜我力量!!! 我解決後會更新實際代碼。。 下面的是最垃圾的代碼spa
colspanMethod({ row, $rowIndex, column, columnIndex, data }) {
if (row.id === '一' || row.id === '(一)') {
if (columnIndex === 1) {
return {
rowspan: 1,
colspan: 3
};
}
if (columnIndex === 2) {
return {
rowspan: 1,
colspan: 22
};
}
} else {
const fields = ['id','name','html','investEstimate','startDate','endDate']
const cellValue = XEUtils.get(row, column.property)
if (cellValue && fields.includes(column.property)) {
const prevRow = data[$rowIndex - 1]
let nextRow = data[$rowIndex + 1]
if (prevRow && XEUtils.get(prevRow, column.property) === cellValue) {
return { rowspan: 0, colspan: 0 }
} else {
let countRowspan = 1
while (nextRow && XEUtils.get(nextRow, column.property) === cellValue) {
nextRow = data[++countRowspan + $rowIndex]
}
if (countRowspan > 1) {
return { rowspan: countRowspan, colspan: 1 }
}
}
}
}
}
複製代碼