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

【问题标题】：Table cells with multiple colspan dynamically动态具有多个 colspan 的表格单元格
【发布时间】：2019-01-29 04:50:05
【问题描述】：

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

考虑下图：

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

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

这是我迄今为止尝试过的 js fiddle 的链接：jsfiddle.net/amahajan/vqysp93r

这种网格表布局如何实现？

【问题讨论】：

能否请您使用您正在获取的 JSON 以及您到目前为止所尝试的内容更新此问题。
请在问题本身中包含所有相关信息，最好是minimal reproducible example

标签： javascript vue.js tabular

【解决方案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>

【讨论】：