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>

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>

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

1 个答案: