VueJS-添加显示块时tr行未显示100％

Question

在我的VuewJS应用程序中，我希望能够单击一行并显示/隐藏下面的行。 但是，当我这样做时，我得到一个奇怪的错误，即下面的行仅填充一列宽度。

这是我的表结构：

注意：此表是动态生成的。

具有4列的顶行具有id属性，而填充4列的长行具有data属性data-body-id 。

<tr v-bind:key="data.id" v-bind:id="index" v-on:click="rowClick(index)">
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td>Col 4</td>
</tr>
<tr v-bind:key="data.id" v-bind:data-body-id="index">
    <td colspan="4">Col 5 (This is a really long  4 colspan row ..............)</td>
</tr>

计算公式为：

<tr data-v-1a25d82d="" id="0">
    <td data-v-1a25d82d="">Col 1</td>
    <td data-v-1a25d82d="">Col 2</td>
    <td data-v-1a25d82d="">Col 3</td>
    <td data-v-1a25d82d="">Col 4</td>
</tr>
<tr data-v-1a25d82d="" data-body-id="0">
    <td data-v-1a25d82d="" colspan="4">Col 5 (This is a really long  4 colspan row ..............)</td>
</tr>

在我的rowClick(index)方法中，我有：

methods: {
  rowClick(id) {
    var dataId = "data-body-id='" + id + "'";
    var row = document.querySelector('[' + dataId + ']');
    row.style.display = 'block';
}
}

当我单击一行时，下面的行是可见的，但显示如下：

如果我使用开发人员检查器并找到属性，然后取消选中显示内容： 最初在CSS中进行设置，以隐藏其完美显示的行。

怎么回事，如何解决？

Answer 1

尝试显示隐藏的动态表行时，请使用：

display: 'table-row',

所以在你的情况下：

row.style.display = 'table-row';