【ElementUI实现table表格行拖拽切换顺序】

实现效果

逻辑思路

1. 通过el-table的row-class-name设置行的自定义class类名.
2. 在 mounted 和 updated 生命周期钩子中调用this.$nextTick，确保 DOM 元素渲染完成后，使用 document.querySelectorAll 获取所有 .drag-row 元素。
   

3. 设置dom的 draggable(用于标识元素是否允许使用浏览器原生行为或 HTML 拖放操作 API 拖动。)为true，并增加拖拽事件处理函数：
   • ondragstart：记录拖拽开始的索引，并设置拖拽效果。
   • ondragover：在拖拽经过时，阻止默认行为，允许放置。
   • ondrop：在拖拽放下时，交换源位置和目标位置的数据，并更新列表。
     ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/47ab30a43183451ea109e9c62ec70073.png
     

在拖拽事件内 通过 修改数据的index的方式实现 行位置的移动
handleDragStart 方法：
- 记录当前拖拽行的索引 draggingIndex。
- 使用 event.dataTransfer.setData 方法存储拖拽数据，方便在 ondrop 中使用。

handleDrop 方法：
- 获取拖拽的源索引 sourceIndex 和目标索引 targetIndex。
- 通过数组的 splice 方法删除源位置的项目，并插入到目标位置。
- 更新组件的数据 projects，触发 Vue 的响应式更新，表格会重新渲染显示新的排序。

实现代码

<template>
  <div class="sort-container">
    <span class="title">项目排序span>
    
    <el-table
      :data="projects"
      row-class-name="drag-row"
      @row-contextmenu.prevent
      border
    >
      <el-table-column prop="index" label="序号" width="200">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        template>
      el-table-column>
      <el-table-column prop="name" label="项目名称">el-table-column>
    el-table>
  div>
template>
 
<script>
export default {
  data() {
    return {
      projects: [
        { id: '1', name: '男子10米气步枪' },
        { id: '2', name: '女子50米步枪三姿' },
        { id: '3', name: '男子双向飞碟' },
        { id: '4', name: '女子25米手枪' },
        { id: '5', name: '男子50米步枪卧射' },
      ],
      draggingIndex: null,// 当前正在拖拽的行索引
    };
  },
  mounted() {
    // 组件挂载后添加拖拽事件
    this.addDragEvents();
  },
  updated() {
    // 数据更新后重新添加拖拽事件
    // 使用 this.$nextTick 获取表格行的 DOM 元素
    this.$nextTick(() => {
      this.addDragEvents();
    });
  },
  methods: {
    // 添加拖拽事件
    addDragEvents() {
      // 获取所有带有类名 'drag-row' 的表格行
      const rows = document.querySelectorAll('.drag-row');
      // 遍历每一行，添加拖拽事件
      rows.forEach((row, index) => {
        row.draggable = true; // 设置行元素为可拖拽
        // 开始拖拽时的事件处理
        row.ondragstart = (event) => this.handleDragStart(event, index);
        // 拖拽经过时的事件处理
        row.ondragover = (event) => this.handleDragOver(event);
        // 拖拽放下时的事件处理
        row.ondrop = (event) => this.handleDrop(event, index);
      });
    },
    // 处理拖拽开始事件
    handleDragStart(event, index) {
      this.draggingIndex = index; // 记录当前拖拽行的索引
      event.dataTransfer.effectAllowed = 'move'; // 设置拖拽效果为移动
      event.dataTransfer.setData('text/plain', index); // 将索引存储到拖拽数据中
    },
    // 处理拖拽经过事件
    handleDragOver(event) {
      event.preventDefault(); // 阻止默认事件，允许放置
      event.dataTransfer.dropEffect = 'move'; // 设置拖拽效果为移动
    },
    // 处理拖拽放下事件
    handleDrop(event, targetIndex) {
      const sourceIndex = this.draggingIndex; // 获取开始拖拽时记录的索引
 
      // 如果源索引和目标索引相同，直接返回
      if (sourceIndex === targetIndex) return;
 
      // 创建项目列表的副本
      const projects = [...this.projects];
      // 删除源位置的项目，并存储被拖拽的项目
      const [movedItem] = projects.splice(sourceIndex, 1);
      // 在目标位置插入被拖拽的项目
      projects.splice(targetIndex, 0, movedItem);
 
      // 更新项目列表数据
      this.projects = projects;
      this.draggingIndex = null; // 重置拖拽索引
    },
  },
};
script>
 
<style lang='scss' scoped>
.sort-container{
    padding: 15px;
 
    .title{
        font-size: 24px;
        font-weight: bold;
    }
 
    .el-table{
        margin-top: 20px;
    }
}
/* 自定义拖拽行样式 */
.drag-row {
  cursor: move;
  user-select: none;
}
.drag-row:hover {
  background-color: #f0f9ff;
}
style>```