Bootstrap 表标题在 vuejs 组件中未正确对齐

Question

在使用 vuedraggable 包启用列的拖动和重新排序时，如何使我的 Vue.js DataGrid 组件的标题和列主体正确对齐？

这是我当前的 DataGrid.vue 组件代码：

<template>
  <div class="table-responsive">
    <table class="table table-striped table-hover" v-if="selectedColumns.length > 0">
      <thead>
        <draggable :list="selectedColumns" group="columns" @end="onEnd">
          <th v-for="(column, index) in selectedColumns" :key="index">{{ column }}</th>
        </draggable>
      </thead>
      <tbody>
        <draggable v-model="mergedData" group="rows">
          <tr v-for="(data, index) in mergedData" :key="index">
            <td v-for="(column, index) in selectedColumns" :key="index">
              {{ data[column.toLowerCase().replace(' ', '_')] !== undefined ? data[column.toLowerCase().replace(' ', '_')] : 'N/A' }}
            </td>
          </tr>
        </draggable>
      </tbody>
    </table>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'DataGrid',
  components: {
    draggable,
  },
  props: {
    selectedColumns: {
      type: Array,
      required: true,
    },
    mergedData: {
      type: Array,
      required: true,
    },
  },
  methods: {
    onEnd(event) {
      const oldIndex = event.oldIndex;
      const newIndex = event.newIndex;
      this.selectedColumns.splice(newIndex, 0, this.selectedColumns.splice(oldIndex, 1)[0]);
    },
  },
};
</script>

<style scoped>
/* Add any custom styles here */
</style>

我已经尝试用带有表格响应类的 div 包装表格元素，但标题和列主体仍然没有正确对齐。如何在保持响应性和拖动能力的同时使表格内容正确对齐？

我当前的表格如下所示，

Answer 1

我能解决这个问题，

因为我正在使用

vuedgraggable

库，它正在包装我的

<th>...</th>

动态添加一个额外的

<div>

.

原来是这样，

<thead>
 <tr>
  <div>
   <th></th> 
   ...
   ...
   ...
   <th></th>
  </div>
 </tr>
</thead>

它也用

<td>

 包裹着 

<div>

<tbody>
 <div>
  <tr>
   <td></td>
   ...
   ...
   ...
   <td></td>
  </tr>
 </div>
</tbody>

所以我在我的 vuejs 组件中添加了以下 CSS，

tbody > div:first-child {
    display: contents!important;
}
thead tr > div:first-child {
  display: contents!important;
}

这解决了我的标题和列内容对齐问题，使拖动功能保持不变。