javascript - 如何在单元格5之后动态添加行vue.js

Question

我目前正在开发我的应用程序。我正在使用 vue v2 我正在尝试创建一个动态表，可以在单击按钮时添加行和子行。 目前我可以毫无问题地插入行，但如果 1 个单元格包含占用 2 行的长文本，则会出现困惑

我正在努力实现这一目标:

这是我当前的结果:

<button @click="addMe">add row</button>
<table>
      <thead>
        <tr title="first">
          <th style="width:50px">cell1</th>
          <th style="width:150px">cell2</th>
          <th>cell3</th>
          <th>cell4</th>
          <th>cell5</th>
          <th>cell6</th>
          <th>cell7</th>
          <th>cell8</th>
          <th>cell9</th>
          <th>cell10</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.score }}</td>
          <td>{{ item.profile }}</td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                superlongtextcell5
              </td>
            </tr>
          </td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                cell6
              </td>
            </tr>
          </td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                cell7
              </td>
            </tr>
          </td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                cell8
              </td>
            </tr>
          </td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                cell9
              </td>
            </tr>
          </td>
          <td class="new-td">
            <tr v-for="item in list" :key="item">
              <td>
                row1
                cell10
              </td>
            </tr>
          </td>
        </tr>
      </tbody>
    </table>

    data() {
      return {
        list: [1],
        data: [
          { name: "row1 cell1" },
          { name: "row2 cell1" },
          { name: "row3 cell1" },
          { name: "row4 cell1" },
          { name: "row5 cell1" }
        ]
      }
    },
    methods: {
      addMe() {
        this.list.push(1);
      }
    }

可以吗？ 谢谢

Answer 1

我认为问题不在于 Vue，您可能只需要垂直对齐单元格或任何您喜欢的内容并清理 HTML。

垂直对齐

将此处的vertical-align:bottom替换为vertical-align:top即可看到: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_valign_css

使用table作为额外的tr标签

您以错误的方式混合了 td 和 tr。 tr 标签永远不能位于 td 标签内。

<td class="new-td">
  <tr v-for="item in list" :key="item">
    <td>
      row1
      superlongtextcell5
    </td>
  </tr>
</td>

如果出于布局原因需要行，则应该在表中放置一个表:

<td class="new-td">
  <table>
    <tr v-for="item in list" :key="item">
      <td>
        row1
        superlongtextcell5
      </td>
    </tr>
  </table>
</td>

您可以为表格内的表格设计一个没有边框、边距或填充的设计，这将在单元格内创建任意数量的行。