Enter Newline Enter Newline Keyboard up and down arrow controls data movement -el-table

1. Requirement description

Input enter (Enter) in a row of the el-table; Will bring up the goods popover; The product can be moved up and down to the view in the popup window through the up and down arrow, and the data will fall into the current line of the bottom table after the press enter

Then the underlying table automatically focuses on the next input of the current row, and makes the following judgment when the last input returns.

** When the last input returns on the current line; Determine whether the current row has data; ** ** No data: focus on the first input of the current row; No new rows ** ** If data is available, add rows **Copy the code

2. Functional split:

1. Enter a line feed 2. Press Enter to bring up the popover. By default, the first data in the popover is highlighted

3. In the pop-up window, press the arrow up and down on the keyboard. In the popup window, the data is automatically switched and highlighted in the first position

4. In the popup window, the data has been selected. After the press enter, the data falls into the corresponding row of the underlying table, and the underlying focus automatically focuses on the next input

3. Implementation ideas:

Tbody ->tr-> TD ->div->div… ->input

Page input is as follows:

So bind the current input ref through this.
$refs[`inputPref${this.activelineIndex} ‘].$el retrieves the DOM element associated with the Vue instance

The dom is as follows:

Find the DOM of the input parent element td; Then find td adjacent to parent element TD; Adjacent TD then look inward for input; Find and focus; If you can’t find it, add a new line (newline)

The three methods are as follows:

4. Page usage

5. Mouse up and down arrow control line up and down

Listen to the keys on the keyboard