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

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中使用它。

<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>

可拖动组件创建外部'table‘元素。一切正常，但是我如何添加'thead‘呢？

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

<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你会受到一些固有的限制，因为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>