vue的表格拖拽最省心实现方案

概括

以下是一个结合el-table+VueDraggable的实现方案，用于后台项目效果基本是秒出

效果

代码

<script setup>
import { ref } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';
import 'element-plus/dist/index.css';

const list = ref([
  { name: 'Joao', id: 1 },
  { name: 'Jean', id: 2, filter: true },
  { name: 'Jean', id: 2 },
  { name: 'Jean', id: 2 },
  { name: 'Jean', id: 2 },
  { name: 'Johanna', id: 3, filter: true },
  { name: 'Juan', id: 4 },
  { name: 'Jack', id: 5 },
  { name: 'Jill', id: 6 },
  { name: 'Jerry', id: 7, filter: true },
  { name: 'Jacob', id: 8 },
  { name: 'Jasmine', id: 9 },
  { name: 'Jim', id: 10 },
  { name: 'Jessica', id: 11 },
  { name: 'Jordan', id: 12 },
]);

const tableRowClassName = ({ row, rowIndex }) => {
  if (row.filter) {
    return 'filtered';
  }
  return '';
};

const removeItem = (index) => {
  list.value.splice(index, 1);
};
</script>

<template>
  <div class="table-container">
    <VueDraggable
      v-model="list"
      target="tbody"
      :animation="150"
      filter=".filtered"
    >
      <el-table :data="list" :row-class-name="tableRowClassName">
        <el-table-column label="Id" prop="id" width="100" />
        <el-table-column label="Name" prop="name" width="150" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button link type="danger" @click="removeItem(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </VueDraggable>
  </div>
</template>

<style scoped>
.table-container {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
<style>
.el-table .filtered {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>

亲自试试 stackblitz.com/edit/vitejs…

遇到的问题

• 国内浏览器会有拖拽后错乱的问题，需要写一个key,无论你用不用el-table，都要特别注意一下，另如果是el-table加就关注一下row-key

• 滚动拖拽，如果是el-table设置height属性，下面拖拽，实现出来的效果是不好的，所以如果能接受header不置顶就直接采用我上面的代码，如果不行的话，得拆分开，换个写法即可

结语

我做的是一个后台项目，不需要什么样式，所以要用el-table，再我经过一番对比后，觉得这个实现起来几乎是秒出效果，唯一有一点是滚动拖拽不是那么的丝滑，在高度不限定的时候尤为明显。

欢迎大家的建议，讨论和点赞收藏!