Vue.js 表格如何设置独占 5 行内容

<template>
  <div class='table-container'>
    <table class='custom-table'>
      <thead>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头3</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for='item in items' :key='item.id'>
          <td>{{ item.column1 }}</td>
          <td>{{ item.column2 }}</td>
          <td>{{ item.column3 }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, column1: '数据1', column2: '数据2', column3: '数据3' },
        { id: 2, column1: '数据4', column2: '数据5', column3: '数据6' },
        { id: 3, column1: '数据7', column2: '数据8', column3: '数据9' },
        { id: 4, column1: '数据10', column2: '数据11', column3: '数据12' },
        { id: 5, column1: '数据13', column2: '数据14', column3: '数据15' },
      ],
    };
  },
};
</script>
<style>
.table-container {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

.custom-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}
</style>
<p>在上述代码中，我们使用了 CSS 的 grid 布局来将表格的父容器设置为 5 行的网格布局。然后，我们将表格的样式设置为 100% 宽度，并添加了一些基本的样式。最后，我们使用 <code>v-for</code> 指令在表格中循环渲染数据行。</p>
<p>你可以根据自己的需求修改表格的样式和数据。</p>