vue el-table实现拖拽排序

天天向上10242026-03-30 20:57

vue el-table实现拖拽排序

安装

bash 复制代码

npm i sortablejs --save

使用

html 复制代码

<template>
  <div>
      <!-- 列表 (支持拖拽排序) -->
        <el-table :data="pointList" ref="dragTableRef" row-key="id" style="width: 100%">
          <el-table-column width="60">
            <template #header>
              <i class="fa-solid fa-sort"></i>
            </template>
            <template #default>
              <i class="fa-solid fa-grip-vertical cursor-move"></i>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" min-width="140"></el-table-column>
          <el-table-column prop="code" label="编码" min-width="180"></el-table-column>
        </el-table>
  </div>
</template>

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

const dragTableRef = ref(null);

// 列表
const pointList = ref([
  {
    id: 1,
    name: '温度',
    code: 'TEMP-001',
  },
  {
    id: 2,
    name: '液压压力',
    code: 'PRESS-002',
  },
  {
    id: 3,
    name: '发电机振动',
    code: 'VIB-003',
  },
  {
    id: 4,
    name: '系统流量',
    code: 'FLOW-004',
  },
  {
    id: 5,
    name: '角度',
    code: 'ANGLE-005',
  },
]);

onMounted(() => {
   initSortable();
});


// 初始化拖拽排序
const initSortable = () => {
  const tableEl = dragTableRef.value?.$el || dragTableRef.value;
  if (!tableEl) {
    console.warn('表格DOM未找到');
    return;
  }

  const el = tableEl.querySelector('.el-table__body-wrapper tbody');
  if (!el) {
    console.warn('表格行容器未找到');
    return;
  }

  const sortable = new Sortable(el, {
    handle: '.fa-grip-vertical', // 拖拽图标的类名
    animation: 150,
    preventOnFilter: true,
    onEnd: ({ oldIndex, newIndex }) => {
      const currRow = pointList.value.splice(oldIndex, 1)[0];
      pointList.value.splice(newIndex, 0, currRow);
      console.log('排序完成，新顺序：', pointList.value);
    },
  });
};
</script>

<style scoped>
</style>