在vue3中使用sortablejs进行嵌套表格排序有办法吗

想问问大家，在vue3中使用sortablejs进行嵌套表格排序，我使用的是el-table有办法吗

可以使用nested选项来启用sortablejs在嵌套表格中的排序功能。具体步骤如下：

安装sortablejs和@shopify/draggable依赖包。可以使用npm或yarn命令进行安装：

npm install sortablejs @shopify/draggable --save

在Vue组件中引入sortablejs和@shopify/draggable依赖包，并创建一个ref对象来保存表格的DOM元素。例如：

javascript

import Sortable from 'sortablejs';
import Draggable from '@shopify/draggable';
export default {
  setup() {
    const tableRef = Vue.ref(null);
    Vue.onMounted(() => {
      const table = tableRef.value;
      const sortable = new Sortable(table, {
        draggable: 'tr',
        handle: '.handle',
        nested: true
      });
      const draggable = new Draggable.Sortable(table, {
        draggable: 'td',
        handle: '.handle',
        mirror: {
          constrainDimensions: true
        }
      });
    });
    return {
      tableRef
    };
  }
}

在

标签中添加ref属性，并使用v-for指令循环渲染表格的行和列。例如：

html


<template>
  <table ref="tableRef">
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>
          <span class="handle">拖动</span>
          <a href="#" @click.prevent="deleteItem(index)">删除</a>
        </td>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td></td>
        <td>
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>名称</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(subItem, subIndex) in item.subList" :key="subItem.id">
                <td>{{ subItem.id }}</td>
                <td>{{ subItem.name }}</td>
                <td>
                  <span class="handle">拖动</span>
                  <a href="#" @click.prevent="deleteSubItem(index, subIndex)">删除</a>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td></td>
      </tr>
    </tbody>
  </table>
</template>

在上面的例子中，使用tableRef对象获取表格的DOM元素，并使用sortablejs和@shopify/draggable创建可拖拽和排序的表格。为了支持嵌套表格排序，需要在sortablejs的配置对象中添加nested: true选项。同时，使用

标签循环渲染表格的行，使用

标签循环渲染表格的列，并在标签中添加handle类，以便在列中添加拖拽手柄。
在这个例子中，可以根据需要修改数据结构、表格样式和排序方式，以适应不同的需求。

够呛，两个库不统一啊兄弟，你觉得在没有中间处理的情况下，两套东西能知道你在干什么嘛。如果你要用嵌套表排序，那就看那个代价比较小，需要改的东西少，那就用哪个，否则你只能去了解他们深层的区别然后去让这个两个工具结合起来用，毕竟本质上都是js

可以使用 js方法对数据进行排序处理

这篇博客也许可以解决你的问题👉 ：vue中使用sortablejs来实现表格拖拽排序
除此之外, 这篇博客: Sortablejs实现vue项目表格拖动排序中的 3.使用： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

（注：row-key==>值数据中id，id：标记表格行）

<template>
   <div class="main-content">
        <el-table
          ref="multipleTable"
          :data="tables"
          border
          fit
          highlight-current-row
          row-key="id"       
          id="tableRowDrop"
        >
          <el-table-column>11</el-table-column>
          <el-table-column>22</el-table-column>
          <el-table-column>33</el-table-column>
       </el-table>
  </div>
</template>

import Sortable from 'sortablejs'   //下载插件命令：npm install sortablejs --save

export default {
data(){
  return{
    tables:[],     //保存表格显示数据
    rowSortOld:[], //保存表格行拖动前：id顺序数组（旧）
    rowSortNew:[]  //保存表格行拖动后：id顺序数组（新）
  }
},
    
mounted() {
  //阻止默认行为
  document.body.ondrop = function (event) {
     event.preventDefault();
     event.stopPropagation();
  };
  //列表行拖拽后顺序数组
  this.rowDrop();
},
    
method{
  //表格行拖拽
  rowDrop() {
    //获取表格对象
    const tbody = document.querySelector('#tableRowDrop tbody');
    const _this = this;  //（注意此处引用）
    Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
           const currRow = _this.tables.splice(oldIndex, 1)[0];
           _this.tables.splice(newIndex, 0, currRow);
        }
        
        //保存列表拖拽后顺序
        _this.rowSortNew = []; //每次列表拖拽前，清空上次数据
        for(let i in _this.tables){//多个对象需遍历赋值
            _this.rowSortNew.push(_this.tables[i]['id']);
        }
        //列表拖拽后顺序
        _this.updateTableSort(_this.rowSortNew);
    })
  },
      
  //列表拖拽后顺序
  updateTableSort(rowSortNew){
    //控制台输出对比前后顺序  
    console.log('列表拖拽前顺序id数组：'+this.rowSortOld);
    console.log('列表拖拽后顺序id数组：'+rowSortNew);
    const formData = new FormData();
    //此处封装便于传递给后台
    formData.append('rowSortOld',JSON.stringify(this.rowSortOld));
    formData.append('rowSortNew',JSON.stringify(rowSortNew));
  },
  
  //获取表格渲染数据
  getList() {
    apiGet(this, this.url).then((res) => {
       this.tables = res.data;
       //保存列表拖拽前顺序id（注：此ID为列信息中的ID，多个对象需遍历赋值）
       for(let i in res.data){
           this.rowSortOld.push(res.data[i].id);
       }
    });
  }
}

</script>