The project uses the table of element ui to drag the header to change the width of the column, and uses sortablejs to realize that the column of the table can be dragged to the position of other columns, resulting in the following problems:
1. After a certain column width becomes larger or smaller, only the current column can be dragged, and other columns cannot be dragged.
Solution: After the column width is changed, destroy the current dragging instance, and then recreate the dragging instance.
this.sortDemo.destroy()This method can be viewed on the sortablejs official website Sortable.js Chinese website
2. When the table does not have a horizontal scroll bar, if a certain column width becomes larger or smaller, other column widths will also become larger or smaller.
Root cause: Min-width is set for each column of the table. When there is no horizontal scroll bar in the table, and the width of a certain column becomes larger or smaller, min-width will distribute the remaining width proportionally to the column with min-width set, so that the overall width of the table can be stretched.
Conclusion: This problem does not occur when the table has a horizontal scrollbar.
3. When the table has no data, the column cannot be dragged and dropped, but can be dragged and dropped after changing the column width.
Solution: After the table data is updated, no matter whether the table data interface returns data or not, you need to remount the drag and drop listener event before you can drag and drop columns.
this.reDrawTable()