vue2实现列表横向拖拽排序(列数据、列表头对应更新)

本文链接：https://blog.youkuaiyun.com/NaZoKaZe/article/details/138313044

文章讲述了在Vue项目中使用Sortable.js和ElementUI实现列拖拽功能，解决v-for生成列表时key值选取的问题，通过全局js文件动态更新key值以保持列数据和表头对应。作者还分享了如何在el-table中应用这一功能以及关键代码实现和注意事项。

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

所需的库

sortablejs
element ui

具体实现效果

用户可以通过拖动首行列表头控制整列的排列顺序，并且存入本地。

遇到的坑

通过v-for生成列表，key值选取问题（解决拖拽时列数据和表头对应不上的问题）

这个问题在csdn上有很多解决方案，但大多都失败了（比如key取index，path等），其余的即使可以实现，也会影响到我项目的其他模块（本人用的若依框架开发），这里直接说我现在key的获取：通过全局js文件给表头分配一个key，每当表头更新的时候通过全局方法手动修改key值，这样就能触发vue的diff算法重新渲染列表，全局js文件代码如下：

tableData.js

//Mes表格数据
const tableData = {
   
      prePartCol: [
        {
   
          label: '操作',
          key: 0,
        },
        {
   
          label: '预套料零件ID',
          prop: 'id',
          key: 1,
        },
        {
   
          label: '零件编号',
          prop: 'mat_code',
          key: 2,
        },
        {
   
          label: '预套料作业编码',
          prop: 'preTaskCode',
          key: 9,
        },
        {
   
          label: '零件类型',
          prop: 'iscircle',
          key: 3,
        },
        {
   
          label: '零件材质',
          prop: 'mat_quality',
          key: 4,
        },
        {
   
          label: '零件长度/外径',
          prop: 'length',
          key: 5,
        },
        {
   
          label: '零件宽度/内径',
          prop: 'width',
          key: 6,
        },
        {
   
          label: '零件厚度',
          prop: 'thick',
          key: 7,
        }