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",
}
  1. 页面引入依赖:
  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();
  }

三、效果展示

视频演示

1. 原始数据

在这里插入图片描述

  • 在这里插入图片描述

2. 排序后

  • 在这里插入图片描述
  • 在这里插入图片描述

总结

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

猜你喜欢

转载自blog.csdn.net/CherishTaoTao/article/details/126123923
今日推荐