vue3+ts 不使用插件实现table列表的拖拽排序。

置顶大大大大大白呢

已于 2024-06-04 11:02:08 修改

阅读量412

点赞数 8

分类专栏： vue3相关的功能点文章标签： vue.js 前端

于 2024-03-13 11:30:42 首次发布

本文链接：https://blog.csdn.net/weixin_46263560/article/details/136674986

版权

vue3相关的功能点专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章详细描述了如何在Vue项目中使用ElementUI的el-table组件实现表格数据的拖拽排序功能，包括模板代码和相关事件处理函数。

摘要由CSDN通过智能技术生成

一、效果展示：

二、完整代码：

<template>
  <el-table :data="tableData" style="width: 100%" :row-class-name="activeClass" class="outputTable">
    <el-table-column prop="sort" label="Sort" width="180" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue';

const tableData = ref<any>([
  {
    sort:'1',
    date: "2016-05-03",
    name: "Tom1",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    sort:'2',
    date: "2016-05-02",
    name: "Tom2",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    sort:'3',
    date: "2016-05-04",
    name: "Tom3",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    sort:'4',
    date: "2016-05-01",
    name: "Tom4",
    address: "No. 189, Grove St, Los Angeles",
  },
])

const dragIndex = ref<any>();
const newDragIndex = ref<any>();
const activeClass = ({ row, rowIndex }) => {
  if (rowIndex === newDragIndex.value) {
    return "isDragBox active-drag";
  }
  return "isDragBox";
};

const dragStartItem = (idx) => {
  dragIndex.value = idx;
};
const dragOverItem = (index) => {
  newDragIndex.value = index;
};
const dragEndItem = () => {
  const data =  tableData.value[dragIndex.value];
  tableData.value.splice(dragIndex.value, 1);
  tableData.value.splice(newDragIndex.value, 0, data);
  tableData.value.forEach((item, index) => {
    return (item.sort = index);
  });
};

const handleSort = () => {
  nextTick(() => {
    const dragBox = document.querySelectorAll(".outputTable .isDragBox");
    dragBox.forEach((i: any, idx) => {
      i.setAttribute("draggable", "true");
      i.ondragstart = () => dragStartItem(idx);
      i.ondragover = () => dragOverItem(idx);
      i.ondragend = () => dragEndItem();
    });
  });
};
handleSort()

</script>