Table of contents
Tips: If you find it cumbersome, just read the summary!
1. Problems
el-table realizes the idea of editing table:
1. To write an editable table: one column in the table is a drop-down box. The implementation method is very simple: insert the drop-down box el-select in el-table-column (elemen provides a slot), and it can be displayed normally (other components or custom components can also be inserted at will, and they can be displayed normally)
2. Add and delete operations
1) Addition: the form data tableData is written as responsive, just push data in tableData
2) Delete: When you click a row in the table, you will get the slot data provided by elementen: scope.$index of the currently clicked row; when deleting, just find the subscript scope.$index in tableData and delete it.
3. In fact, the idea is quite simple; the writing is almost done, and I tested it, but I didn’t expect to have a problem @--@
Specific problem; many rows are inserted in the el-table, and the cell where the drop-down box is located selects a different value. Then perform the delete operation. There is no problem with 1-3 rows of data, but there is a problem with 4 rows and above. I clicked to delete a row, but the value originally selected in the drop-down box in the row adjacent to this row was lost. , but there is a corresponding value in the drop-down item, and the style is also the selected style. If the drop -down data with the selected style is selected again, it still cannot be filled into the input box of el-select. There is no problem in selecting other values, and it can be filled normally ! ! ! ! The specific situation is shown in Figure 1-1 below.
2. Reasons and solutions
1.. Display the value bound by el-select in html, and see that the value bound by el-select has value. It's outrageous, it doesn't end like this.
2. Because the drop-down box was not written by me, it was packaged by someone else, I thought it was a problem with someone else’s package; I replaced it with the el-select provided by element : repeat the operations in 1 and 3, and it still appeared There is a corresponding value in the drop-down item; the selected value in the drop-down box is gone. However, when the drop-down data with the selected style is selected this time, the input input box of el-select can be filled normally. (Hey, there is indeed a problem with that component, but it is not the focus of this discussion)
3. Check the deletion method I wrote: Ah, I made a mistake again. While deleting the array, I searched for the data according to the initial array subscript. Speechless, this mistake has really been made no less than three times. Although it is not the cause of this problem (because I only delete one line, it can be deleted completely, and the way of deleting multiple lines is deadly), but it is also a reason for the deletion problem! I hope I won't make a mistake next time.
4. Check it with the Vue plug-in in devtools, the value of el-input really does not have @****@, as shown in Figure 2-1
5. Why, if I delete a piece of data, will it affect other data? Why is there only a problem with the cell where the drop-down box is located? God, if you don't understand, it's outrageous ! ! ! Overtime overtime@—@
6. I was depressed for more than an hour. Finally, when I checked a few pieces of data last time, the select all button of el-table was actually selected. Guess if the el-table can't tell which data is which, so I delete who, it is also unclear and confused .
7. I guessed it right. After each piece of data is marked with a unique row-key, there is no problem , as shown in Figure 2-2! ! ! ! ! !
It's outrageous. It is best to use el-table to ensure that the row-key is required, and the row-key corresponding to each piece of data in the el-table data is unique; otherwise, it may lead to various outrageous errors! ! !
3. Summary
1. Editable table ideas:
1) Insert editable components (drop-down boxes, input boxes, etc.) into el-table-column (elemen provides slots)
2) Add and delete operations
a. Increase: the form data tableData is written as responsive, just push data in tableData
b. Delete: When you click the row of the table, get the slot data provided by elementen: the currently clicked row scope.$index; when deleting, directly find the subscript scope.$index in the tableData and delete it.
2. The reason why the rows that are not deleted when the el-table is deleted are affected by the deleted row :
1) Check whether your deletion logic is correct, especially when deleting in batches, do not delete while looking for the original subscript in the array to delete; you will never be able to delete; use a temporary variable to store the items that do not need to be deleted. Then assign it to tableData and that's it!
2) Check whether you add a unique identification field rowKey to each row of data, and assign it to el-table (:row-key="rowKey"); you can judge each data when deleting. If there is no unique identification, you can manually Set one, such as setting it as the subscript of the array (if rowKey is 'id', add element.id=elementIndex to each piece of data)
3. When using el-table, it is best to ensure that the row-key is required, and the row-key corresponding to each piece of data in the el-table data is unique; otherwise, it is likely to cause various outrageous errors.
1) The semi-selected style in the uppermost corner of the table is invalid; for details, please refer to: When el-table is partially selected, the full-selected style is displayed, class:is-indeterminate is lost and the solution_Qinqing's Blog-CSDN Blog
2) Deleting rows of the table affects the data of other rows: this article
4. Step on the pit every day, eat a pit and gain a wisdom, grow up quickly&&**&&
/*
Hope it helps you!
If there is any mistake, welcome to correct me, thank you very much!
*/