拖拽排序

拖拽适合调整任务、菜单、展示列表等人工维护的顺序。每条记录需要一个稳定且唯一的主键；默认字段为 id，其他字段通过 rowKey 指定。

安装依赖

在挂载表格前加载 Sortable。模块化项目可以安装 sortablejs 并在应用入口中设置：

import Sortable from 'sortablejs';
window.Sortable = Sortable;

也可以在 HTML 的 head 中使用项目自己的静态资源地址：

<script src="/vendor/Sortable.min.js"></script>

该文件需要由项目提供。本页已经加载 Sortable，无需在控制台重复引入。

行拖拽与数据同步

3.9.5+

拖拽完成后，CRUD 自动同步绑定的 data 数组。回调可用于保存排序结果，不再需要手动调用 refreshTable。

效果预览可直接操作下方示例

本例只开启 rowSort，便于观察行顺序。按住一行拖到另一行，核对下方的 ID 顺序；再点击「修改当前首行」确认数据仍对应正确的行。「恢复初始顺序」可以重置演示。

正在加载示例…

<template>
  <div class="sortable-example">
    <div class="sortable-actions">
      <el-button @click="editFirst">修改当前首行</el-button>
      <el-button @click="reset">恢复初始顺序</el-button>
    </div>
    <avue-crud :option="option" :data="data" @sortable-change="sortableChange" />
    <div class="sortable-result" aria-live="polite">
      <strong>绑定数组的 ID 顺序：{{ ids }}</strong>
      <p>{{ eventText }}</p>
      <pre>{{ dataText }}</pre>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const initialRows = () => [
  { id: 101, name: '整理需求', owner: '张三' },
  { id: 102, name: '编写示例', owner: '李四' },
  { id: 103, name: '验证交互', owner: '王五' },
  { id: 104, name: '发布文档', owner: '赵六' }
];
const data = ref(initialRows());
const eventText = ref('尚未拖拽。按住一行后上下移动，松开完成排序。');
const ids = computed(() => data.value.map(row => row.id).join(' → '));
const dataText = computed(() => JSON.stringify(
  data.value.map(({ id, name, owner }) => ({ id, name, owner })),
  null, 2
));
const option = ref({
  rowKey: 'id',
  rowSort: true,
  border: true,
  addBtn: false,
  menu: false,
  refreshBtn: false,
  columnBtn: false,
  column: [
    { label: 'ID', prop: 'id', width: 90 },
    { label: '任务', prop: 'name', minWidth: 180 },
    { label: '负责人', prop: 'owner', minWidth: 100 }
  ]
});

function sortableChange(oldIndex, newIndex, row, sortedList) {
  // 这里只记录事件。Avue 会同步 data，无需再次 splice 或 refreshTable。
  eventText.value = '记录 ' + row.id + '：下标 ' + oldIndex + ' → ' + newIndex +
    '；可提交的 ID 顺序：' + sortedList.map(item => item.id).join(', ');
}
function editFirst() {
  const row = data.value[0];
  row.name = row.name.endsWith('（已修改）')
    ? row.name.replace('（已修改）', '')
    : row.name + '（已修改）';
}
function reset() {
  data.value = initialRows();
  eventText.value = '已恢复初始顺序。';
}
</script>

<style scoped>
.sortable-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sortable-actions .el-button { margin-left: 0; }
.sortable-result {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  background: var(--el-fill-color-light);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.sortable-result p { margin: 8px 0; }
.sortable-result pre { margin: 0; white-space: pre-wrap; font-size: 13px; }
</style>

配置	作用
rowSort: true	只开启行拖拽
columnSort: true	只开启列拖拽
sortable: true	同时开启行与列拖拽
rowKey: 'id'	指定稳定的记录主键，不要使用数组下标

保存排序结果

sortable-change(oldIndex, newIndex, row, sortedList) 返回移动前后的下标、被移动的行，以及排好序的新数组。下标从 0 开始。需要保存到服务端时，可提取主键：

const onSortableChange = (oldIndex, newIndex, row, sortedList) => {
  const ids = sortedList.map(item => item.id);
  // 将 ids 交给项目的请求方法保存顺序。
};

回调触发时，默认的数据同步尚未完成，因此请使用 sortedList 保存结果；下一次 Vue 更新后，data 会反映新顺序。如果已有代码在回调中同步替换数组或原地换序，也可以保留，但不要再异步重复执行一次相同的移动。

范围与常见问题

• 拖拽调整当前传入的数组。分页场景只调整当前页；跨页的全局顺序需要业务接口处理。
• 当前存在列排序、筛选或展开行，导致显示顺序与 data 不一致时，不会执行行换序。先清除相关状态，再调整人工顺序。
• 不要同时通过列的 sortable 自动排序和行拖拽维护同一份顺序。
• 若拖拽没有响应，先确认 Sortable 已在组件挂载前加载，再检查主键是否唯一且保持不变。

列拖拽与列宽调整可查看 表格列配置项。