Table of contents
Project scenario:
In a recent project, I came into contact with the need for linkage between drop-down boxes and table data:
Click the select drop-down box node to trigger list rendering. When the page is initialized, the first node in the drop-down box is selected by default and the data is rendered.
Problem Description:
Knowledge summary: In element-UI, as long as the height attribute is defined in the el-table element, a table with a fixed header can be realized. If there is too much data, a list scrolling effect will be generated.
Description of the problem: After the drop-down box is set to select the node by default, the bound table data is rendered.
When the page is initialized, the table data is rendered, but the list cannot scroll:
Normal drop-down box node selection, list rendering and display effects are normal:
Cause Analysis:
After processing the request and the hook function in the early stage, the problem is not clearly found, and the problem is unknown. I also hope that someone who is clear about this aspect can come to communicate...
solution:
Since I don't know the root of the problem, a stupid method is used here-forced rendering of the table structure:
Add a key value to the table structure to generate a uniqueness. Every time the data is rendered, the table structure is also rendered at the same time, which can solve this problem very well.
Part of the code is as follows:
Bind key on el-table:
Let the key be equal to the id returned each time the select node is clicked:
Bind key and node id in js:
Disadvantages: Doing this re-renders the table structure every time, and does not reuse it, which consumes a bit of performance
Although this method solves this problem, there are some inadequacies. If you have other better solutions, I hope to give advice.
Can communicate and learn together