Vue.Draggable 用于具有多个 tbody 的表

Question

我的表结构复杂。我的桌子的真正结构要困难得多。 我尝试通过一个简单的例子来展示它。

<table>
    <thead>
        <th>id</th>
        <th>name</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr colspan="2">
            <td>1</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr colspan="2">
            <td>1</td>
        </tr>
    </tbody>
</table>

我使用 vuejs，我需要有可排序的表（我使用 vuedraggable 组件https://github.com/SortableJS/Vue.Draggable）。

我有这样的模板项组件。

<template>
    <tbody class="item">
        <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
        </tr>
        <tr colspan="2">
            <td>{{ item.description }}</td>
        </tr>
    </tbody>
</template>

我将它与可拖动一起使用。

<draggable v-model="items" :element="'table'" :options="{draggable: '.item'}">
    <item-component v-for="(item, index) in items" :item="item" :key="item.id">
    </item-component>
</draggable>

Draggable 组件创建外部“table”元素。一切正常，但如何添加“thead”？

我尝试再创建一个组件 - 项目：

<template>
    <table>
        <thead>
            <th>1</th>
            <th>2</th>
        </thead>
        <slot></slot>
    </table>    
</template>

但这不起作用：

<draggable v-model="items" :element="items-component" :options="{draggable: '.item'}">
    <item-component v-for="(item, index) in items" :item="item" :key="item.id">
    </item-component>
</draggable>

Answer 1

由于VueDraggable 是一个自定义组件，当使用 DOM 作为您的模板时，例如。 table 您将受到 HTML 工作方式固有的一些限制，因为 Vue 只能在浏览器解析和规范化模板内容后检索模板内容。

当使用带有此类限制的元素的自定义组件时，这将导致问题

一种解决方法是使用is 特殊属性：

https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

<table>
  <thead>
    <th>1</th>
    <th>2</th>
  </thead>
<div is="draggable" element="div" v-model="items">
  <tbody v-for="i in items">
    <tr>
      <td>{{i.id}}</td>
      <td>{{i.name}}</td>
    </tr>
     <tr colspan="2">
        <td>{{ item.description }}</td>
    </tr>
  </tbody>
</div>
</table>