vue+element+sortablejs实现拖拽功能

最新推荐文章于 2025-06-25 18:29:39 发布

原创

最新推荐文章于 2025-06-25 18:29:39 发布 · 742 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中结合Element UI和SortableJS实现拖拽功能。首先，通过下载SortableJS插件，然后在Vue文件内导入并配置。在Element的表格组件上应用SortableJS，经过配置后，成功实现拖拽排序的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分为几部分：
第一：下载sortablejs插件
第二在文件内部导入sortablejs插件
第三进行配置使用
第四效果图展示

第一：下载sortablejs插件

 npm：
 npm install sortablejs --save 
 yarn：
 yarninstall sortablejs --save 
 cnpm：
 cnpm install sortablejs --save

第二在文件内部导入sortablejs插件

import Sortablejs from ‘sortablejs’

第三进行配置使用
这里我用的是element的table
这部分是上面部分html

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" class="t1">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>