vue+elementui+sortablejs实现表格拖拽

最新推荐文章于 2025-04-16 16:19:33 发布

MzOvO

最新推荐文章于 2025-04-16 16:19:33 发布

阅读量1.5k

点赞数 1

文章标签： sortablejs vue elementui 表格拖拽

本文链接：https://blog.youkuaiyun.com/weixin_42947516/article/details/102717114

版权

本文介绍了如何在Vue项目中结合ElementUI和SortableJS实现表格行的拖拽功能。尽管尝试过程中遇到表格组件的复杂结构导致的失败，但详细讲解了SortableJS的使用步骤，包括安装、导入以及注意事项。同时，提到了关键点如指定`row-key`和在`mounted`钩子中初始化拖拽功能。然而，对于动态数据的情况，需要在数据加载完成后再调用拖拽方法。

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

结果：失败
失败原因：表格使用了elementui的表格组件，简历列表中的姓名列，使用的是template模板包裹结构，对应参数也是有elementui组件内置方法获取，自己无法将数据提取出来，且表格部分将进行多次渲染，效果无法实现,demo由于数据是自己一开始就创建好的且没有复杂的结构模板所以可以成功运行实现拖拽

sotablejs使用方法：

1.下载依赖包
npm il sortablejs -s
2.导入依赖包
import Sortable from ‘sortablejs’
3.注意点
element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况

demo界面

在这里插入图片描述

数据准备

表头显示

dropCol: [
        { label: '' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'desc' },
        { label: '学历', prop: 'edu' }
      ],

表格渲染时每一列对应的属性

col: [
      {
   
        label: '',
        type: 'selection',
        fixed: true,
        width: '102',
        align: 'center'
        },
        {
   
          label: '姓名',
          prop: 'name',
          fixed: true,
          sortFlag: true,
          sortMethod: (a, b) => {
   
            return a.name.localeCompare(b.name)
          },
          width: '180',
          minWidth:

最低0.47元/天解锁文章