Ячейки таблицы с несколькими colspan динамически - PullRequest
Новая
       10

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

0 голосов
/ 29 января 2019

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

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

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

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

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

Как можно использовать эту таблицу таблиц сеткибыть достигнутым?

1 Ответ

0 голосов
/ 29 января 2019

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