n-data-table拖拽排序

n-data-table是一个基于Ant Design Vue库的表格组件，它提供了丰富的功能，包括拖拽排序。在`n-data-table`中，你可以通过集成Vue的`v-model`和拖放事件（如`@drop`、`@dragover`、`@dragstart`等），实现列的拖拽排序。用户可以轻松地将表头的列按照他们想要的顺序移动，改变数据展示的顺序。

基本步骤如下：
1. 给每个表头单元格添加可拖放属性，比如`draggable`设置为`true`。
2. 绑定拖放事件处理函数，负责监听拖动开始、移动和放置，更新列的索引数组。
3. 在后台，响应用户的排序操作，更新数据源的排序字段。

<n-data-table :columns="columns" :data="tableData" @sort-change="handleSortChange">
  <!-- ... -->
</n-data-table>

<script>
export default {
  methods: {
    handleSortChange(column) {
      this.tableData.sort((a, b) => a[column.key] - b[column.key]);
      // 更新列的索引信息
      const newColumnOrder = this.columns.map((col) => col.index);
      this.$set(this.columns, 'order', newColumnOrder);
    },
  },
}
</script>