VueとFlexboxのレスポンステーブル

Question

vasan Subramanianの次のFlexbox tableをvueで実装しようとしています。
そのテーブルは手動で構築されていますが、そのコンポーネントを作成しようとすると大きな助けになりません。
だから私はそれをdinamicallyにしようとしています。私の最初の障害は、1つのdiv内の2つの行の各ペアをグループ化することです。次

<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> 

イム以下を達成しようとしている：

<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仕様はこのモデルにはあま​​り適していません。あなたはグループごとに1つの仕様を成長させたいと思うようですが、目標が何であるか正確にはわかりません。

このコードは、任意のサイズの列グループを作成し、ディバイダに配置します。

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> 

これが機能を開始。テスト目的