动态具有多个colspan的表单元格

Question

我正在尝试使用Vue.js中的数据构建表。我希望根据特定列的值将单元格分别分为2列或3列。

请考虑以下图片：

对应于行01和col 01的单元格应垂直分为3列，并将空值放置在每列中。 而包含两个空值的单元格应垂直分为两列。

我尝试使用colspan，方法是根据定义空值数量的值动态地为不同的单元格将其设置为不同，但这并没有给我预期的结果。

这是到目前为止我尝试过的js小提琴的链接：jsfiddle.net/amahajan/vqysp93r

如何实现此网格表布局？

Answer 1

我建议使用flex样式而不是列跨度来对齐单元格内容。请参阅以下内容：

new Vue({
  el: '#app',
  data: () => ({
    rows: []
  }),
  methods: {
    stagger (d) {
      return d % 2 === 1 ? 'rgba(255,249,196,1)' : 'rgba(178,223,219,1)'
    }
  },
  beforeMount() {
    this.rows = Array.from(Array(10), (x, i) => {
      let days = []

      for (j = 0; j < 7; j++) {
        days.push(Math.floor((Math.random() * 3)) + 1)
      }

      return {
        id: i,
        days
      }
    })
  }
})

table { 
    border-spacing: 0;
    border: 1px solid black;
}

th {
  padding: .25rem;
}

tr td:first-of-type {
  background-color: rgba(176,190,197,1);
}

td {
  border-top: 1px solid black;
  text-align: center;
}

td > div {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

span {
  font-size: 10px;
  font-weight: 500;
  width: 100%;
  padding: .15rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th v-for="d in 7" :key="d" :style="{ 'background-color': stagger(d) }">Week Day {{ d }}</th>
      <tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td>{{ row.id }}</td>
        <td v-for="(day, index) in row.days" :key="`${row.id}-${index}`" :style="{ 'background-color': stagger(index) }">
          <div>
            <span v-for="v in day" :key="v">NULL</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>