Recently, I made a feature to use element el-Table component to implement table, and implement the sorting function of part columns. It seems very simple function, according to the el-Table component document to start development.

The configuration is shown below.

I added a sort-change event to tableData because it needed to sort by the back-end interface. When debugging, there was a problem. After executing the sort-change event, the data obtained by tableData was in a different order from the data displayed in table. After research, it is found that both sor-change and sortable events are triggered and one event should be removed. The el-table-column sort doesn’t affect the tableData in :data, it affects the data in the ElTableBody, After sorting, dataArray in tableData and dataArray in ElTableBody are not in the same order. The sort-change event is a user-defined method. Change method: Write sortable of each el-table-column as custom attribute. This will trigger only the methods in sort-change.