使用vue js的嵌套表格，为什么父行突然右移？

Question

我正在尝试使用 vuejs 制作一个嵌套表格，但是样式太奇怪了，你们知道它有什么问题吗？ 家长桌

这就是我按下下拉按钮时发生的情况

下面是嵌套表的代码：

<!-- src/components/NodeTableRow.vue -->
<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="[node]"
      item-value="id"
      item-key="id"
      show-expand
      :expanded.sync="expanded"
      hide-default-header
      class="child-table"
    >
      <template v-slot:item.action="{ item }">
        <v-btn @click="goToDetails(item)">Details</v-btn>
      </template>
      <template v-slot:expanded-item="{ item }">
        <tr>
          <td :colspan="headers.length" class="nested-cell">
            <v-data-table
              v-if="item.children && item.children.length"
              :headers="headers"
              :items="item.children"
              item-value="id"
              item-key="id"
              class="nested-table"
              hide-default-header
            >
              <template v-slot:item.action="{ item }">
                <v-btn @click="goToDetails(item)">Details</v-btn>
              </template>
              <template v-slot:expanded-item="{ item }">
                <node-table-row
                  :node="item"
                  :headers="headers"
                  :expanded.sync="expanded"
                  :level="level + 1"
                  @goToDetails="goToDetails"
                />
              </template>
            </v-data-table>
            <v-alert v-else type="info">No child group</v-alert>
          </td>
        </tr>
      </template>
    </v-data-table>
  </div>
</template>

<script>
export default {
  name: 'NodeTableRow',
  props: {
    node: {
      type: Object,
      required: true,
    },
    headers: {
      type: Array,
      required: true,
    },
    expanded: {
      type: Array,
      required: true,
    },
    level: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    goToDetails(node) {
      this.$emit('goToDetails', node);
    },
  },
};
</script>

<style scoped>
.nested-cell {
  padding: 0;
}
.nested-table {
  margin: 0;
  border: none;
  width: 100%;
}
</style>

我尝试更改样式，但仍然不起作用，我希望我可以创建一个普通的嵌套表

Answer 1

您不应在

<TR>

槽内包含

expanded-item

- 这会破坏生成的 HTML。直接使用就可以了

<td :colspan="headers.length" class="nested-cell">