vue.js - bootstrap-vue 表格可拖动

Question

我正在尝试用可拖动的行在桌子上做。我正在使用BootstrapVue和vue-smooth-dnd。

Vue-smooth-dnd <Container>，<Draggable>使用起来非常直接。我能够使我的行可拖动，但我的所有行都<td>来到了第一列。我无法弄清楚我做错了什么。

我的表的代码如下所示：

<template>
  <b-table-simple>
    <b-thead>
      <b-tr>
        <b-th>#</b-th>
        <b-th>Column</b-th>
        <b-th>Column</b-th>
        <b-th>Column</b-th>
        <b-th>Column</b-th>            
      </b-tr>
    </b-thead>
    <b-tbody>
      <Container>
        <MyTableRow
          v-for="row in row"
          :key="row.id"
          :row="row"
        />
      </MyTableRow>
    </b-tbody>
  </b-table-simple>
</template>

我的行的代码：

<template>
  <Draggable>
    <b-tr>
      <b-td>{{ row.id }}</b-td>
      <b-td>{{ row.a }}</b-td>
      <b-td>{{ row.b }}</b-td>
      <b-td>{{ row.c }}</b-td>
      <b-td>{{ row.d }}</b-td>        
  </Draggable>
</template>

Answer 1

我发现 <div> 不能在表格元素内使用，只能在 <td> 或 <th> 元素内使用。我正在将它作为一个列表来实现。