vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3表格拖动排序

使用Vue3优雅地实现表格拖动排序

作者:知否技术

在 Vue.js 中主要通过第三方库实现表格拖动排序功能,其中最常用的库是 SortableJS,下面我们就来看看如何使用SortableJS实现表格拖动排序吧

在 Vue.js 中主要通过第三方库实现表格拖动排序功能,其中最常用的库是 SortableJS。

1. 安装 sortablejs

npm i sortablejs --save

2. 初始化表格数据

这里使用 ElementPlus 作为前端组件库

注意要给 el-table 绑定 row-key 属性,并设置 ref。

  <el-table
    ref="tableRef"
    border
    :data="tableData"
    :row-key="(row) => row.id"
    style="width: 100%"
  >
    <el-table-column type="index" label="序号" width="55" />
    <el-table-column prop="id" label="id" width="100"> </el-table-column>
    <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
  </el-table>

js 部分

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
const tableRef = ref();
// 表格数据
const tableData = ref([
  { id: 110, age: 20, name: "李白" },
  { id: 120, age: 21, name: "杜甫" },
  { id: 130, age: 22, name: "白居易" },
  { id: 130, age: 27, name: "知否君" },
]);
</script>

3. 使用 sortablejs

3.1 导入 sortablejs

import Sortable from "sortablejs";

3.2 使用 sortablejs 创建拖动表格方法

const sortableRow = ref(null);
const sortableColumn = ref(null);
// 拖动表格行
const onSortableRow = () => {
  sortableRow.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__body-wrapper tbody"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 获取新的行位置
        const currRow = tableData.value.splice(oldIndex, 1)[0];
        // 重新排列行位置
        tableData.value.splice(newIndex, 0, currRow);
      },
    }
  );
};
// 拖动表格列
const onSortableColumn = () => {
  sortableColumn.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__header-wrapper thead tr"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 1.获取表格列
        const table = tableRef.value;
        const oldColumns = table.store.states.columns;
        // 2. 重新排列列的顺序
        const newColumns = [...oldColumns.value];
        const movedColumn = newColumns.splice(oldIndex, 1)[0];
        newColumns.splice(newIndex, 0, movedColumn);
        oldColumns.value = newColumns;
      },
    }
  );
};

3.3 在周期函数中调用方法

// 组件挂载之后执行
onMounted(() => {
  onSortableRow();
  onSortableColumn();
});

3.4 销毁实例

// 销毁
onBeforeUnmount(() => {
  if (sortableRow.value) {
    sortableRow.value.destroy();
    sortableRow.value = null;
  }
  if (sortableColumn.value) {
    sortableColumn.value.destroy();
    sortableColumn.value = null;
  }
});

4. 完整代码

<template>
  <div>
    <el-card style="width: 30%">
      <el-table
        ref="tableRef"
        border
        :data="tableData"
        :row-key="(row) => row.id"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="id" label="id" width="100"> </el-table-column>
        <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

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

const tableRef = ref();
// 表格数据
const tableData = ref([
  { id: 110, age: 20, name: "李白" },
  { id: 120, age: 21, name: "杜甫" },
  { id: 130, age: 22, name: "白居易" },
  { id: 130, age: 27, name: "知否君" },
]);
// 组件挂载之后执行
onMounted(() => {
  onSortableRow();
  onSortableColumn();
});
const sortableRow = ref(null);
const sortableColumn = ref(null);
// 拖动表格行
const onSortableRow = () => {
  sortableRow.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__body-wrapper tbody"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 获取新的行位置
        const currRow = tableData.value.splice(oldIndex, 1)[0];
        // 重新排列行位置
        tableData.value.splice(newIndex, 0, currRow);
      },
    }
  );
};
// 拖动表格列
const onSortableColumn = () => {
  sortableColumn.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__header-wrapper thead tr"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 1.获取表格列
        const table = tableRef.value;
        const oldColumns = table.store.states.columns;
        // 2. 重新排列列的顺序
        const newColumns = [...oldColumns.value];
        const movedColumn = newColumns.splice(oldIndex, 1)[0];
        newColumns.splice(newIndex, 0, movedColumn);
        oldColumns.value = newColumns;
      },
    }
  );
};
// 销毁
onBeforeUnmount(() => {
  if (sortableRow.value) {
    sortableRow.value.destroy();
    sortableRow.value = null;
  }
  if (sortableColumn.value) {
    sortableColumn.value.destroy();
    sortableColumn.value = null;
  }
});
</script>

<style scoped></style>

效果图

到此这篇关于使用Vue3优雅地实现表格拖动排序的文章就介绍到这了,更多相关Vue3表格拖动排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文