在線等!論如何實現一個複雜表格(實際上是求助帖)

前端怎麼實現一個複雜表格?

前言

甲方要求前端實現一個表格,這個表格要擁有以下功能:

  1. 點擊行列可編輯
  2. 能夠導出爲表格
  3. 在線編輯後要實時更新到後端數據庫

具體以下圖:

點擊放大 ps:灰色部分爲固定值部分html

我的吐槽: 是隻是個大學還沒畢業,練習時長不到一個月的前端實習生,不愛打籃球...呸,說多了,內心只有MMP,一臉懵,咋辦嘛,就只有硬着頭皮寫前端

準備

筆者在以前,從未接觸過這種複雜表格。因而乎,面對百度編程開始!搜索了大半天,找了幾個可能能夠實現的方法。web

  1. 手寫
  2. vxe-table
  3. easytable
  4. lb-element-table

開始

筆者選擇了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 }
                        }
                    }
                }
            }
        }
複製代碼
相關文章
相關標籤/搜索