element plus table 拖拽

element plus table 拖拽

sortablejs

package.json

"sortable.js": "^0.3.0",
 "sortablejs": "^1.14.0",
"vuedraggable": "^2.24.3",

我的table 是在 el-dialog 里面的
在开发过程中出现过两个问题
1.进入加载 数据错乱
2.拖拽后 顺序错误
先贴代码

<template>
  <div>
    <a @click="openDialog">购买套餐</a>
    <el-dialog v-model="dialogVisible">
      <el-table
        ref="sortableTable"
        :data="sortedAppList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="title" label="名称"></el-table-column>
        <el-table-column prop="describe" label="描述"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import Sortable from 'sortablejs'

const dialogVisible = ref(false)
const sortedAppList = ref([
  { id: 1, title: '汉堡1', describe: '描述' },
  { id: 2, title: '汉堡2', describe: '描述' },
  { id: 3, title: '汉堡3', describe: '描述' },
  { id: 4, title: '汉堡4', describe: '描述' },
  { id: 5, title: '汉堡5', describe: '描述' },
  { id: 6, title: '汉堡6', describe: '描述' }
])
const sortableTable = ref('')
const applite = ref([])
const changeOpenList = () => {
  // 异步获取数据
  setTimeout(() => {
    // 拖拽排序初始化
    const tableEl = sortableTable.value.$el.querySelector(
      '.el-table__body-wrapper tbody'
    )
    if (tableEl) {
      sortableTable.value.sortable = new Sortable(tableEl, {
        animation: 150,
        onEnd: (event) => {
          applite.value = sortedAppList.value
          const movedItem = applite.value[event.oldIndex]
          applite.value.splice(event.oldIndex, 1)
          applite.value.splice(event.newIndex, 0, movedItem) // 使用插入而不是替换的方式
          sortedAppList.value = []
          nextTick(() => {
            sortedAppList.value = applite.value // 更新最终的排序后数据
          })
        }
      })
    }
  }, 1000)
}

const handleSelectionChange = (selection) => {
  // 处理选择变化
  console.log(selection)
}

const openDialog = () => {
  dialogVisible.value = true
  changeOpenList()
}
</script>