Отзывчивая таблица с Vue и Flexbox

Question

Im пытается реализовать следующие Flexbox table от Vasan Subramanian с vue.
Эта таблица построена вручную, но это не дает большой пользы при попытке создать ее компонент.
Так что я хочу сделать это динамически. и моим первым препятствием является группировка каждой пары из двух строк внутри одного div. Как следующий

<div class="Table"> 

    <div class="Table-row Table-header"> 

      <div class="Table-row-item" v-for="key in cols" v-bind:style="{'flex-basis':basis, 'flex-grow':key.grow}"> 
       <a @click="sortBy(key)">{{key.title}}&nbsp;<i v-if="key.sortField==sort" class="{{reverse==1?'fa fa-sort-desc':'fa fa-sort-asc'}}" aria-hidden="true"></i></a> 
      </div> 

    </div> 

предыдущий код дает нормальный заголовок таблицы

<div class="Table-row-item"> 
     firstname 
    </div> 

    <div class="Table-row-item"> 
     lastname 
    </div> 

    <div class="Table-row-item"> 
     email 
    </div> 

    <div class="Table-row-item"> 
     company 
    </div> 

Im пытается добиться следующего:

<div class=divider> 

    <div class="Table-row-item"> 
     firstname 
    </div> 

    <div class="Table-row-item"> 
     lastname 
    </div> 

</div> 

<div class=divider> 

    <div class="Table-row-item"> 
     email 
    </div> 

    <div class="Table-row-item"> 
     company 
    </div> 

</div> 

Мой вопрос я не знаю, как представить, что в код. Любая помощь будет очень оценена. Я не мог найти хороших примеров относительно гибких таблиц с помощью Flexbox. только предыдущий и этот другой от Jonathan Lehman Отличная лекция с использованием Sass.

Answer 1

Вы хотите сгруппировать столбцы, а затем перебрать столбцы внутри каждой группы. Используйте вычисление для группировки. Ваша спецификация grow не совсем подходит этой модели; похоже, что вы хотите иметь один показатель роста для каждой группы, но я точно не знаю, в чем цель.

Этот код делает группы столбцов любого размера, который вы выберете, и помещает их в свои разделители.

new Vue({ 
 
    el: '.Table', 
 
    data: { 
 
    columns: ['firstname', 'lastname', 'email', 'company'].map((n) => ({ 
 
     title: n, 
 
     sortField: n 
 
    })), 
 
    perDivider: 2, 
 
    basis: '50%', 
 
    grow: 1, 
 
    sort: null 
 
    }, 
 
    computed: { 
 
    colGroups: function() { 
 
     return this.by(this.perDivider, this.columns); 
 
    } 
 
    }, 
 
    methods: { 
 
    by: function(n, arr) { 
 
     const result = []; 
 
     for (var i = 0; i < arr.length; i += n) { 
 
     result.push(arr.slice(i, i + n)); 
 
     } 
 
     return result; 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script> 
 
<div class="Table"> 
 
    Table here 
 
    <div class="Table-row Table-header"> 
 

 
    <div class="Table-row-item" v-for="colGroup in colGroups" v-bind:style="{'flex-basis':basis, 'flex-grow':grow}"> 
 
     <a v-for="key in colGroup" @click="sortBy(key)"> 
 
     {{key.title}}&nbsp;<i v-if="key.sortField==sort" class="{{reverse==1?'fa fa-sort-desc':'fa fa-sort-asc'}}" aria-hidden="true"></i> 
 
     </a> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

Я начал с вычисленной собственностью

odd(){ 
       var numberOdds = 0; 
       var arr = []; 
       for (var i = 0; i < this.cols.length; i++) { 
        if (i % 2 == 0) { 
         numberOdds++; 
        } 
       } 
       var j=0; 
       for (i=0;i<numberOdds;i++){ 
        this.arr[i]=j; 
        j+=2; 
       } 
       return numberOdds; 
      } 

так ..

<div class="Table"> 
     <div class="Table-row Table-header"> 

      <div class="divider" v-for="number in odd"> 

       {{cols[arr[number]].title}} 
       {{cols[arr[number]+1].title}} 
      </div> 

     </div> 
    <div class="Table-row" v-for="item in items.data" > 

     <div class="divider" v-for="number in odd"> 

      <div class="Table-row-item"> 
       {{item[cols[arr[number]].name]}} 
      </div> 
      <div class="Table-row-item"> 
       {{item[cols[arr[number]+1].name]}} 
      </div> 

     </div> 

    </div> 

</div> 

Это работает. цели тестирования