Vue3+Sortablejs对ElementPlus表格内容进行排序

---

前言

• 本文介绍使用Vue3结合Element-Plus以及Sortablejs第三方库实现对表格内容进行排序
• Element-Plus的ElMessage组件在我的环境下不能使用（有可能是和antd冲突）
• 效果演示：
  视频链接和提取码: 0t1p

---

一、环境准备

1. vue/cli脚手架版本：@vue/cli 5.0.6
2. package.json环境依赖：

 "dependencies": {
	"element-plus": "^2.2.12",
	"vue": "^3.2.37", 
    "vue-router": "^4.0.12",
    "vue-types": "^4.1.1"
	"sortablejs": "^1.14.0",
}

3. 页面引入依赖：

  import { ref, reactive, onMounted, toRaw, computed, watch, UnwrapRef, h } from 'vue';
  import duanzi from '/@/utils/http/axiosInstance.js';
  import d1 from '/@/views/dashboard/table/Dialog-Edit/d1';
  import { ElMessage, ElNotification } from 'element-plus';
  import { Sortable } from 'sortablejs';

二、创建表格数据内容

1.创建el-table

代码如下：

 	<el-button type="success" @click="getData"> 拉取数据</el-button>
    <el-button type="primary" @click="handleMove"> 点击进行拖拽</el-button>
   <div>
      <el-table id="mytable" :data="dataSource" row-key="id" :bordered="true">
        <el-table-column prop="id" label="ID" width="200px" />
        <el-table-column prop="title" label="Title" />
        <el-table-column prop="author" label="Author" />
      </el-table>
   </div>

2.各类方法编写

• 可以选择自己自定义dataSource内容，我用的是从Apifox拉取的数据
• 只要接口数据或者自己定义的数据内容包括id、title、author对应得上就行
• 注意，数据中一定要有id，因为选取的是row-key="id"作为索引，不然无法排序（界面Dom不更新）
  核心方法代码如下：
• 2.1 点击获取数据方法

//定义data
  const data = [];
  const dataSource = ref(data);
  //gateData方法
   function getData() {
    console.log('开始获取数据');
    duanzi.get('/posts').then((data) => {
      dataSource.value = data.data;
      console.log('我是读取到的数据:', data);
      console.log('我是表格里的数据:', toRaw(dataSource.value));
      // 可通过Object.keys(dataSource.value)[0]获取到后端数据的真实id，从而可以正确进行操作
      console.log(Object.keys(dataSource.value)[0]);
    });
  }

• 2.2 handleMove方法

   function handleMove() {
    ElNotification({
      title: 'Start',
      message: '拖拽进行排序',
      type: 'success',
      duration: 1500,
    });
    initSortable();
  }

• 2.3 initSortable方法
  参考链接

三、效果展示

视频演示

1. 原始数据

• 

2. 排序后

• 
• 

---

总结

• demo较为简单，一些依赖先安装好就基本上可以实现
• 较为注意的是sortable库的使用，可以根据参考链接去修改成自己想要的