In the product prototype, the selection column and index column in the table should be combined into one column, as shown in the figure below:

And ask the
  1. Keep all selection of table headers.
  2. Cannot affect the trigger of the table component check.
  3. The index starts at 1 again after the page is turned.

I tried to customize such a structure myself, but it still affected the trigger of the relevant time of the table check, so I had no choice but to give up. Then I searched through the API of elementui table component, but failed to find a suitable solution. When I was at my loss, I went to the bathroom, and suddenly I had an Epiphany. Why not try using CSS to curve the country?

Pee, that is, rework, hand up on the keyboard, health code such as flying, the final success.

If in the figure:

Since this checkbox usually appears in the first column of the table, this problem is solved by adding a ::before box to the column with a CSS class name that contains the index value, so that it does not affect the normal check event.
Things to use:
  1. The row-style property of elementui table
  2. CSS counter: counter-reset, (click to view) All major browsers already support this property.

To do this, you must first set the custom properties in the table (see figure) :

Then you can set up the core code below (all this nonsense can be solved in just a few lines).

You can observe the DOM structure of f12:

conclusion

At the end of the front end, the most difficult thing to find is CSS!!