Ячейки таблицы с несколькими столбцами динамически

Я пытаюсь построить таблицу, используя данные из Vue.js. В зависимости от значения определенного столбца я хочу разделить ячейки на 2 или 3 столбца соответственно.

Рассмотрим следующее изображение:

Ячейка, которая соответствует строке 01 и столбцу 01, должна быть разделена на 3 столбца по вертикали, и нулевое значение должно быть помещено в каждый из этих столбцов. тогда как ячейки, содержащие два нулевых значения, должны быть разделены на два столбца по вертикали.

Я попытался использовать colspan, установив его для разных ячеек динамически в зависимости от значения, которое определяет количество нулевых значений, но не дает ожидаемого результата.

Вот ссылка на скрипт js, который я пробовал до сих пор: jsfiddle.net/amahajan/vqysp93r < код>

Как можно добиться такой компоновки таблицы-сетки?


javascript vue.js tabular
person Anushree Mahajan    schedule 29.01.2019    source источник
comment
Не могли бы вы обновить этот вопрос, указав свой JSON, который вы получаете, и то, что вы пробовали до сих пор.   -  person Pulkit Aggarwal    schedule 29.01.2019
comment
Включите всю соответствующую информацию в сам вопрос, желательно в виде минимального воспроизводимого примера   -  person Jon P    schedule 29.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я бы предложил использовать стили 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>

person DigitalDrifter    schedule 29.01.2019