El-Table 的秘密：让你的数据表格动起来！

2023-04-27 10:38:17

El-Table的行拖拽排序功能：轻松实现数据排序和交互

引言

El-Table 是 Element-plus 提供的一款功能强大的数据表格组件，它不仅可以呈现复杂的数据，还能提供丰富的交互功能。其中，行拖拽排序功能备受用户青睐，它允许用户轻松调整表格中数据的顺序，从而实现数据的重新排序或分组。

如何实现行拖拽排序功能？

实现 El-Table 的行拖拽排序功能非常简单，只需要在 el-table 组件中添加几个属性即可：

rowKey ：指定表格中每一行的唯一标识符，这是必须的，因为 El-Table 需要通过这个属性来区分不同的行。
sort-change ：指定当表格中的数据发生排序变化时触发的事件，我们可以在这个事件中对数据进行重新排序。
default-sort ：指定表格的默认排序方式，我们可以通过这个属性来指定表格中的数据在初始状态下的排序方式。

同时，我们还需要在 Vue 实例中定义一个名为 tableData 的数据变量，这个变量将存储表格中的数据，然后在 sortChange 事件中，我们可以通过 tableData.sort() 方法对数据进行重新排序。

代码示例：

<el-table :data="tableData" :rowKey="id" @sort-change="sortChange" :default-sort ="{prop: 'id', order: 'ascending'}">
  <el-table-column prop="id" label="ID">
  </el-table-column>
  <el-table-column prop="name" label="Name">
  </el-table-column>
  <el-table-column prop="age" label="Age">
  </el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John Doe', age: 20 },
        { id: 2, name: 'Jane Smith', age: 25 },
        { id: 3, name: 'Michael Jones', age: 30 },
      ]
    }
  },
  methods: {
    sortChange(column) {
      this.tableData.sort((a, b) => {
        if (a[column.prop] < b[column.prop]) {
          return -1;
        } else if (a[column.prop] > b[column.prop]) {
          return 1;
        } else {
          return 0;
        }
      })
    }
  }
}