How does the front end implement a complex table?

preface

Party A requires the front end to implement a form, which shall have the following functions:

  1. Click the row to edit
  2. It can be exported as a table
  3. Live updates to the back-end database after online editing

The details are as follows:

Ps: The gray part is the part with fixed value

Personal joke: Is it just a front end intern who hasn’t graduated from university and has been practicing for less than a month. He doesn’t like playing basketball… Bah, said much, in the mind only MMP, a face meng, how to do, only hard scalp to write

To prepare

I have never been exposed to such complex forms before. So, facing Baidu programming began! I searched for most of the day, looking for several possible ways to achieve this.

  1. handwritten
  2. vxe-table
  3. easytable
  4. lb-element-table

start

The author chose VXE-table and then began to write.

Write after just understand have much afflictive ！！！！！

These so-called excellent components, in fact, seem to have to implement their own cross-row logic. (Ha ha ha, this should be normal, a little fun)

Think in different ways

Actually, it’s not hard to cross columns. It’s hard to cross columns. How do I split the last few values of a piece of data into four rows?

At first, I was thinking of nesting tables in the next few cells and using tables to sanction tables. I tried, but it didn’t work. I don’t know if it’s my fault. Then,, want to cross the front of the data processing, the front of the data across four lines, sounds like it is very good. Implementation, EMMM not to say, on my renderings and code

rendering

So it looks something like this, but I just did the first couple of lines, and I didn’t give them a value, so there’s a problem.

To tell the truth, this do rubbish, but do not know how to do so, this article, in fact, is a help post!! Bosses, give me strength!! I’ll update the actual code after I fix it. Below is the most garbage code

colspanMethod({ row, $rowIndex, column, columnIndex, Data {if}) (row. Id = = = 'a' | | row. The id = = = '(a)') {if (columnIndex = = = 1) {return {3} rowspan: 1, the colspan:; } 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 } } } } } }Copy the code