table如何分组拖拽排序？

Question

请教大佬们个问题，vue2中我有一个基础的el-table表格，表格里分置顶区域和非置顶区域，需求是置顶区域之间可以互相拖拽排序，非置顶区域可以互相拖拽排序，非置顶和置顶之间不可拖拽排序，

比如1.2.3条数据是置顶的，可以互相拖拽排序，4.5.6是非置顶数据，可以拖拽排序，但1.2.3和4.5.6之间不可互相拖拽，感谢各位大佬解惑

Answer 1

拖拽的时候：当前位置 -> 目标位置

const nowIndex = ''; //当前位置
const targetIndex = ''; //目标位置
const pinnedIndex‌ = [1,2,3]; //获取置顶位置集合
const nonPinnedIndex‌ [4,5,6]; //获取非置顶位置集合

if(（pinnedIndex.includes(nowIndex) && pinnedIndex.includes(targetIndex)） || （nonPinnedIndex.includes(nowIndex) && nonPinnedIndex.includes(targetIndex)）) {
    //允许拖拽
} else {
     //不允许拖拽
}

Answer 2

先安装sortablejs

npm install sortablejs

<template>
  <div>
    <!-- 置顶区域 -->
    <el-table :data="topData" row-class-name="top-row" ref="topTable">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
    </el-table>

    <!-- 非置顶区域 -->
    <el-table :data="normalData" row-class-name="normal-row" ref="normalTable">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      topData: [
        { id: 1, name: '置顶项1' },
        { id: 2, name: '置顶项2' },
        { id: 3, name: '置顶项3' },
      ],
      normalData: [
        { id: 4, name: '普通项1' },
        { id: 5, name: '普通项2' },
        { id: 6, name: '普通项3' },
      ],
    };
  },
  mounted() {
    this.initSortable();
  },
  methods: {
    initSortable() {
      // 置顶区域拖拽
      const topTable = this.$refs.topTable.$el.querySelector('.el-table__body tbody');
      Sortable.create(topTable, {
        group: 'top-group', // 置顶组标识
        animation: 150,
        onEnd: ({ oldIndex, newIndex }) => {
          const movedItem = this.topData.splice(oldIndex, 1)[0];
          this.topData.splice(newIndex, 0, movedItem);
        },
      });

      // 非置顶区域拖拽
      const normalTable = this.$refs.normalTable.$el.querySelector('.el-table__body tbody');
      Sortable.create(normalTable, {
        group: 'normal-group', // 非置顶组标识
        animation: 150,
        onEnd: ({ oldIndex, newIndex }) => {
          const movedItem = this.normalData.splice(oldIndex, 1)[0];
          this.normalData.splice(newIndex, 0, movedItem);
        },
      });
    },
  },
};
</script>

<style>
.top-row {
  background-color: #f5f7fa; /* 置顶区域样式 */
}
.normal-row {
  background-color: #ffffff; /* 非置顶区域样式 */
}
</style>