element-push el-table 自定义添加表格数据拖拽排序

element-push el-table 自定义添加表格数据拖拽排序

SortableJS 是一个功能强大的 JavaScript 拖拽库。可用于列表拖拽排序、以及低代码拖拽配置等场景。

Sortable.js 中文网：https://www.sortablejs.com
通过以下命令进行安装下载sortablejs组件库

npm install sortablejs

下载完成之后

// 全局引入main.js ，可在需要拖拽的文件下引入
import Sortable from "sortablejs";

utils文件下新建sortable.ts

// 引入 sortable
import Sortable from "sortablejs";
// 定义一个变量来存储Sortable实例。后续销毁时会用到

let sortableInstance: Sortable | null = null;
 /**参数 
 * getSortInfo 排序方法
 * domvalue 点击拖拽的dom
 * disabled 是否禁用拖拽排序，可根据需求进行添加
 */
 
export const enableRowDrop = (
  getSortInfo: Function,
  domvalue?: HTMLElement
) => {
  const tbody = domvalue?.querySelectorAll(
    ".el-table__body-wrapper table tbody"
  )[0];
  // 销毁现有Sortable实例（如果存在）
  if (sortableInstance) {
    sortableInstance.destroy();
  }
  // 使用更新后的isSort值创建新的Sortable实例
  sortableInstance = new Sortable(tbody, {
    // 是否禁用拖拽排序
    disabled: false,
    animation: 250,
    handle: ".movesort",
    dragClass: "drop-dragClass",
    ghostClass: "drop-ghostClass",
    chosenClass: "drop-chosenClass",
    // 关键代码
    onEnd(evt: any) {
      // 结束拖拽
      getSortInfo(evt);
    },
  });
};

// 列出一些，其他查看官网
group: "name",  // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
sort: true,  // boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序
delay: 0, // number 定义鼠标选中列表单元可以开始拖动的延迟时间；
touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
disabled: false, // boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；
store: null,  // @see Store
animation: 150,  // ms, number 单位：ms，定义排序动画的时间
easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
handle: ".my-handle",  // 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
filter: ".ignore-elements",  // 过滤器，不需要进行拖动的元素
preventOnFilter: true, //  在触发过滤器`filter`的时候调用`event.preventDefault()`
draggable: ".item",  // 允许拖拽的项目类名
ghostClass: "sortable-ghost",  // drop placeholder的css类名
chosenClass: "sortable-chosen",  // 被选中项的css 类名
dragClass: "sortable-drag",  // 正在被拖拽中的css类名

页面使用

// 页面引入方法
//el-table中添加属性 row-key="index"， index 是表格数据中唯一的值
<template>
    <el-table
      class="tables"
      :border="true"
      :data="tableData"
      style="width: 100%"
      row-key="index"
    >
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="age" label="年龄" align="center" />
      <el-table-column prop="sex" label="性别" align="center" />
      <el-table-column prop="weight" label="体重(kg)" align="center" />
      <el-table-column prop="height" label="身高(cm)" align="center" />
      <el-table-column label="操作" align="center">
         <template #header>
          <el-button type="success" :icon="Plus" @click="addDataInfo">
            添加
          </el-button>
        </template>
        <template #="scope">
          <el-button type="success" link :icon="Rank" class="movesort">
            移动顺序
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</template>
<script setup>
import { Rank, Plus } from "@element-plus/icons-vue";
import { enableRowDrop } from "@/utils/sortable";
const tableData = ref([
  {
    index: 1,
    name: "Tom1",
    age: "78",
    sex: "男",
    weight: "103",
    height: "177",
  },
  {
    index: 2,
    name: "Tom2",
    age: "15",
    sex: "男",
    weight: "80",
    height: "167",
  },
  {
    index: 3,
    name: "Tom3",
    age: "14",
    sex: "女",
    weight: "100",
    height: "189",
  },
  {
    index: 4,
    name: "Tom4",
    age: "23",
    sex: "男",
    weight: "120",
    height: "168",
  },
]);
const addDataInfo = () => {
  tableData.value.push({
    index: tableData.value.length + 1,
    name: `Tom${tableData.value.length + 1}`,
    age: "78",
    sex: "男",
    weight: "103",
    height: "177",
  });
};
const domSortable = () => {
  // 移动顺序
  const addtableDataSortInfo = (evt) => {
    if (evt.oldIndex !== evt.newIndex) {
      const changeData = tableData .value.splice(evt.oldIndex || 0, 1);
      tableData .value.splice(evt.newIndex || 0, 0, changeData[0]);
    }
  };
  nextTick(() => {
    enableRowDrop(addtableDataSortInfo, dragTable.value.$el,open.value);
  });
};
</script>