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

我发现不能在表元素中使用，只能在或元素中使用。我将它作为一个列表来实现。