Element Table table component multi-field (multi-column) sorting method

need:

To sort multiple columns in the element table, click on the date sort, then click on the name sort, and pass the two sort fields to the backend for sorting.

Problems encountered:

The Table component of element only supports single-column sorting. When you click on the sorting of another column, the previous sorting will be automatically canceled. I searched online for methods and found this article that proposed using :header-cell-class-name and @sort-change to handle the style problem of multi-column sorting. I tried for a long time and found that the sort-change event would return null when canceling the sort, so I couldn't locate which column canceled the sort. In short, the problem could not be solved by relying on element-table events.

solve:

By customizing the header, paste the two small icons directly into the header. Then bind the click sorting events respectively. In this way, we can get both the sorting status (ascending, descending, unsorted) and the sorted column name. At this point, the readers should understand that the specific code is in the intranet and it is not easy to paste it out. If you have any questions, please comment and I will try my best to answer~

This is the end of this article about the multi-field (multi-column) sorting method of the element Table component. For more relevant content on multi-field sorting of element Table, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!