Using el-table-column sortable to sort data in vue3 - how to echo the user's selection to the table display status

element-plus

When the sorting conditions are changed through other settings, the filtering status of the displayed table needs to be changed accordingly. 

In the template, use sortableproperties to set the table columns to be sortable and bind a variable to save the sorted state.

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" sortable :sort-orders="['ascending', 'descending']" :sort-by="sortColumn" @sort-change="handleSortChange"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

In the above example, we set the column named "name" to be sortable and use the :sort-ordersattribute to specify the sort order. :sort-byThe attribute binds a variable to save the currently sorted column and @sort-changethe event listens for sort changes.

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 28 },
        { name: 'Jane', age: 32 },
        { name: 'Bob', age: 25 },
      ],
      sortColumn: null,
    };
  },
  methods: {
    handleSortChange({ prop, order }) {
      this.sortColumn = prop;
      // 在这里处理排序的逻辑
      // 可以根据prop和order来对数据进行排序
      this.sortData(prop, order);
    },
    sortData(prop, order) {
      // 根据prop和order对数据进行排序的逻辑
      // 更新tableData中的数据排序
    },
  },
};
</script>

In the above code, we created refa sortColumnreactive variable named to save the current sorted column. In handleSortChangethe method, we update sortColumnthe value and call sortDatathe method to handle the sorting logic. You can sort the data based on propthe ordersum values.

Please note that the sorting logic in the code is sample code. You need to implement it accordingly according to your own needs and data structure, and update the tableDatadata sorting in it.