vue3代码解读：列表拖拽排序

一、表格行排序 

const onSortableRow = () => {
  sortableRow.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__body-wrapper tbody"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 获取新的行位置
        const currRow = tableData.value.splice(oldIndex, 1)[0];
        // 重新排列行位置
        tableData.value.splice(newIndex, 0, currRow);
      },
    }
  );
};

1、代码解析

1. 定义 onSortableRow 函数：

   • onSortableRow 是一个函数，用于初始化 SortableJS。

2. 使用 Sortable.create 初始化拖拽功能：

   • Sortable.create 是 SortableJS 的核心方法，用于创建一个可拖拽的列表。

   • tableRef.value.$el.querySelector(".el-table__body-wrapper tbody")：选择表格的 tbody 元素，这是需要拖拽的区域。

   • animation: 150：设置动画持续时间为 150 毫秒。

   • onEnd：在拖拽结束时触发的回调函数，用于处理行的重新排序。

3. 处理行的重新排序：

   • newIndex 和 oldIndex：分别是拖拽后的新索引和拖拽前的旧索引。

   • tableData.value.splice(oldIndex, 1)[0]：从原始数组中移除当前行，并返回该行。

   • tableData.value.splice(newIndex, 0, currRow)：将当前行插入到新的位置。

 2、tableData.value.splice(oldIndex, 1)[0]与tableData.value.splice(oldIndex, 1)的区别：

• 1. tableData.value.splice(oldIndex, 1)[0]

这个表达式的含义是从 tableData.value 数组中删除一个元素，并返回被删除的元素。

• splice(oldIndex, 1)：

  • oldIndex 是要删除的元素的索引。

  • 1 表示删除一个元素。

  • splice 方法返回一个数组，包含被删除的元素。

• [0]：

  • 由于 splice 返回的是一个数组，[0] 用于获取数组中的第一个元素，即被删除的元素。

• 2.tableData.value.splice(oldIndex, 1)

这个表达式的含义是从 tableData.value 数组中删除一个元素，并返回一个包含被删除元素的数组。

• splice(oldIndex, 1)：

  • oldIndex 是要删除的元素的索引。

  • 1 表示删除一个元素。

  • splice 方法返回一个数组，包含被删除的元素。

区别总结

• 返回值类型：

  • tableData.value.splice(oldIndex, 1)[0] 返回的是被删除的单个元素。

  • tableData.value.splice(oldIndex, 1) 返回的是一个包含被删除元素的数组。

• 使用场景：

  • 如果你需要直接操作被删除的单个元素，使用 tableData.value.splice(oldIndex, 1)[0]。

  • 如果你需要处理多个被删除的元素，或者需要保留返回的数组形式，使用 tableData.value.splice(oldIndex, 1)。

实际应用

在你的代码中，tableData.value.splice(oldIndex, 1)[0] 用于获取被删除的单个元素，并将其重新插入到新的位置。这种方式在处理拖拽排序时非常常见，因为它允许你直接操作被移动的元素。

二、表格列排序

const onSortableColumn = () => {
  sortableColumn.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__header-wrapper thead tr"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 1、获取表格列
        const table = tableRef.value;
        console.log("table: ", table);
        const oldColumns = table.store.states.columns;
        // 2、重新排列表格列的顺序
        const newColumns = [...oldColumns.value];
        const movedColumn = newColumns.splice(oldIndex, 1)[0];
        newColumns.splice(newIndex, 0, movedColumn);
        oldColumns.value = newColumns;
      },
    }
  );
};

1、代码解析

1. 定义 onSortableColumn 函数：

   • onSortableColumn 是一个函数，用于初始化 SortableJS，实现表格列的拖拽排序功能。

2. 使用 Sortable.create 初始化拖拽功能：

   • Sortable.create 是 SortableJS 的核心方法，用于创建一个可拖拽的列表。

   • tableRef.value.$el.querySelector(".el-table__header-wrapper thead tr")：选择表格的 thead tr 元素，这是需要拖拽的区域。

   • animation: 150：设置动画持续时间为 150 毫秒。

   • onEnd：在拖拽结束时触发的回调函数，用于处理列的重新排序。

3. 处理列的重新排序：

   • newIndex 和 oldIndex：分别是拖拽后的新索引和拖拽前的旧索引。

   • table.store.states.columns：获取表格的列数据。

   • newColumns.splice(oldIndex, 1)[0]：从原始列数组中移除当前列，并返回该列。

   • newColumns.splice(newIndex, 0, movedColumn)：将当前列插入到新的位置。

   • oldColumns.value = newColumns：更新列的顺序。

2、注意事项

1. 确保 tableRef 是有效的：

   • 使用 ref 来引用 el-table 组件，确保在 onMounted 钩子中调用 Sortable.create，这样可以确保 DOM 元素已经渲染完成。

2. 处理动态数据：

   • 如果表格数据是动态加载的，可能需要在数据加载完成后重新初始化 Sortable。

3. 样式问题：

   • 确保表格的样式不会干扰拖拽功能。例如，el-table__header-wrapper 和 thead tr 的样式可能需要调整。

4. 兼容性问题：

   • SortableJS 通常在现代浏览器中表现良好，但在一些旧版本的浏览器中可能会有问题。确保测试了目标浏览器的兼容性。