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

Question

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

Answer 1

可以使用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类，以便在列中添加拖拽手柄。 在这个例子中，可以根据需要修改数据结构、表格样式和排序方式，以适应不同的需求。