1

我目前正在开发我的应用程序。我正在使用 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);
      }
    }

有可能吗？谢谢你

4

2 回答 2

0

我认为问题不在于 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>

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

于 2021-06-04T12:39:00.073 回答
0

谢谢你的建议，我根据需要重构它我可以通过将新表放在外部表中来实现它

    <table>
      <thead>
        <tr title="first">
          <th>cell1</th>
          <th>cell2</th>
          <th>cell3</th>
          <th>cell4</th>
          <th>cell5</th>
          <th>cell6</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>
          <template>
           <table>
             <td>vertically-align1</td>
             <td>vertically-align2</td>
           </table>
          </template>
        </tr>
      </tbody>
    </table>
于 2021-06-08T06:27:43.510 回答