BootstrapVue结合vue-smooth-dnd实现表格拖拽行时td挤入首列问题

问题原因 #

• DOM结构不符合HTML表格规范：vue-smooth-dnd的Container和Draggable组件默认渲染为div元素，而HTML表格对层级要求非常严格，tbody的直接子元素必须是tr，tr的直接子元素必须是td/th，插入的div会被浏览器移出表格布局流，导致所有单元格错位到第一列。
• 代码存在语法错误：
  • 循环变量冲突：v-for="row in row"写法错误，应该遍历存储行数据的数组（比如rows）
  • 标签配对错误：Container的闭合标签误写为</MyTableRow>
  • 行组件内的<b-tr>没有闭合标签

解决方案 #

1. 给Container和Draggable指定tag属性，让它们渲染为符合表格规范的元素：
   • Container指定tag="tbody，可直接替代原有的<b-tbody>；如果需要保留b-tbody的自带样式，也可以将Container的tag设为template，不会生成额外的包裹节点
   • Draggable指定tag="tr，替代原有的<b-tr>，避免额外元素包裹tr破坏布局
2. 修复所有语法错误

修正后代码 #

父组件代码 #

<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>
    <!-- Container指定渲染为tbody，替代原b-tbody -->
    <Container tag="tbody">
      <MyTableRow
        v-for="row in rows"
        :key="row.id"
        :row="row"
      />
    </Container>
  </b-table-simple>
</template>

行组件代码 #

<template>
  <!-- Draggable指定渲染为tr，替代原b-tr -->
  <Draggable tag="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>

内容的提问来源于stack exchange，提问作者Pedro Santos