快捷導航

ElementUI-Table 表格實現(xiàn)行拖拽效果

更新時間：2025年10月09日 09:16:45 作者：宣晨光

在Vue中實現(xiàn)表格拖拽功能,需引入依賴,配置ref、row-key及row-drag-end事件,使用mounted鉤子和key、$nextTick/$set確保數(shù)據(jù)刷新,添加樣式完成拖拽效果,本文介紹ElementUI-Table表格實現(xiàn)行拖拽效果,感興趣的朋友一起看看吧

1、引入依賴

npm install sortablejs --save

2、table表格設(shè)置

1、添加屬性 ref="multipleTable" row-key="id" @row-drag-end="handleDragEnd"

2、添加列

<el-table-column width="50" align="center">
            <template >
              <i class="el-icon-rank drag-handle"></i>
            </template>
          </el-table-column>

<el-table  v-loading="loading" :data="tableData" 
          :highlight-selection-row="true"      :key="componentKey"
          ref="multipleTable"  row-key="id" @row-drag-end="handleDragEnd" >
          <el-table-column width="50" align="center">
            <template >
              <i class="el-icon-rank drag-handle"></i>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序號" type="index" align="center" min-width="5%" />
</el-table>

顯示效果如下

3、添加事件

1、必須是 mounted ，不可以使用created

2、解決無法二次拖拽、拖拽后表格數(shù)據(jù)無法重新渲染問題

補充： :

1、key="componentKey"

2、// 重新初始化拖拽功能
this.$nextTick(() => {
this.initDragAndDrop();
});

3、 this.$set(this, 'materialList', newData);

<script>
import Sortable from "sortablejs";
export default {
  name: "demo",
  data() {
    return {
        tableData: [], // 確保初始化為空數(shù)組
        sortable: null,
      componentKey: 1000,
    }
  },
created() {
    this.getList();
  },
  mounted() {
    this.initDragAndDrop();
  },
  methods: {
    initDragAndDrop() {
      // 獲取表格的tbody元素
      const tbody = this.$refs.multipleTable.$el.querySelector('.el-table__body-wrapper tbody');
      // 初始化Sortable
      this.sortable = new Sortable(tbody, {
        handle: '.drag-handle', // 指定拖拽手柄
        animation: 150, // 動畫時間
        ghostClass: 'sortable-ghost', // 拖拽時的占位元素樣式
        onEnd: (event) => {
          // 拖拽結(jié)束時觸發(fā)
          this.handleDragEnd(event);
        }
      });
      console.log(this.sortable);
    },
    // 處理拖拽結(jié)束事件
    handleDragEnd(evt) {
      // 如果位置沒有變化，不做處理
      if (evt.oldIndex === evt.newIndex) {
          return;
        }
        // 獲取拖拽的行數(shù)據(jù)
        const draggingRow = this.materialList[evt.oldIndex];
        // 從原數(shù)組中移除并插入到新位置
        var newData = JSON.parse(JSON.stringify(this.materialList));;
        newData.splice(evt.newIndex, 0, newData.splice(evt.oldIndex, 1)[0]);
        console.log(newData)
        const nextRow = newData[evt.newIndex + 1];
        // 通知父組件數(shù)據(jù)已更新
        this.$set(this, 'materialList', newData);
        // 強制刷新組件以確保視圖更新
        this.componentKey += 1;
        // 發(fā)送拖拽信息
        this.$emit('drag-end', {
          id: draggingRow.materialDeviceId,   // 拖拽行的ID
          originalIndex: evt.oldIndex, // 原始位置(0開始)
          originalPosition: evt.oldIndex + 1, // 原始位置(1開始)
          newIndex: evt.newIndex,      // 新位置(0開始)
          newPosition: evt.newIndex + 1,      // 新位置(1開始)
          moved: evt.oldIndex !== evt.newIndex // 是否發(fā)生了移動
        });
        // TODO + -
        console.log(`拖拽完成 - ID: ${draggingRow.materialDeviceId}, 從第${evt.oldIndex + 1}行移到第${evt.newIndex + 1}行`);
        console.log('下一個位置：' , nextRow.materialDeviceId , nextRow.orderNum , nextRow.name)
        // 重新初始化拖拽功能
        this.$nextTick(() => {
          this.initDragAndDrop();
        });
    },
    /** 查詢素材分配列表 */
    getList() {
      listDevice(this.queryParams).then(response => {
        // 確保響應(yīng)數(shù)據(jù)不為null
        this.tableData= response.rows ? response.rows : [];
        this.total = response.total ? response.total : 0;
      }).catch(error => {
        // 添加錯誤處理，防止數(shù)據(jù)為null
        console.error('獲取數(shù)據(jù)失敗:', error);
        this.tableData= [];
        this.total = 0;
      });
    },
  }
}  
</script>

4、添加樣式

<style scoped>
.el-icon-rank{
  font-size: x-large;
}
/* 拖拽相關(guān)樣式 */
.cursor-move {
  cursor: move;
  color: #909399;
  transition: color 0.2s;
}
.cursor-move:hover {
  color: #409EFF;
}
/* 拖拽時的占位符樣式 */
::v-deep .sortable-ghost {
  opacity: 0.5;
  background-color: #f5f7fa;
}
/* 選中行樣式 */
::v-deep .sortable-chosen {
  background-color: #e6f7ff !important;
}
/* 正在拖拽的行樣式 */
::v-deep .dragging-row {
  background-color: #fffbe6 !important;
}
</style>