background

When the el-Table component of Elmenet-UI displays too many rows of data and browsed the data outside the current window, it cannot intuitively obtain the meaning of each column. This requires fixing the list header at the top of the window to provide a good experience for you to use. The table must support fixed columns and scrolling

The development train of thought

There are about three main development ideas

  • Add a hidden table to the real table, used when the table head is out of the windowposition:fixedSecure to top of window
  • Listen for window scrolling events to change dynamicallyel-tableThe CSS property of the header, which is fixed to the top of the screen when it leaves the window
  • useel-tableFixed header properties of

Development on pit

First of all, say the pros and cons of three kinds of development ideas.

  1. First of all, if the hidden table is used, it is more complicated to develop, and the events of the real table need to be monitored and synchronized to the hidden table.
  2. useel-tableThe fixed properties of “does not solve the real problem.el-tableThe fixed table header property needs to be provided for the tableheightProperty, which causes two problems. One is that the page will have two scroll bars and reduce the amount of data displayed on the page to some extent. Also letel-tableThey lose the ability to be highly adaptive
  3. The third way of thinking is actuallyposition:stickyIs a variant form of, becauseposition:stickyThat requires an ancestor nodeoverflowAttributes arevisible. And most browsers support a level ofpartial, there may be compatibility issues. So I’m still listening for scroll events to dynamically add classes.

The development of implementation

To solve this problem, we should first understand several leading problems

el-tableFixed column implementation

El-table realizes fixed columns by superimposing three tables. First, the three columns are complete tables. Absolute layout and Overflow: Hidden adjust the width of the two fixed columns to the width of the set fixed columns. One problem with this is that when we use position: Fixed to fix the table, the width of the table header will be the width of the window due to BFC, and the fixed column width will no longer be the correct width.

Fixed column internal layout

The fixed column header and table parts are arranged with absolute. This will cause rows of the fixed column table and the non-fixed column table to not align after we remove the table header from the document flow

The main code