使用 Vue 和 Flexbox 响应式 Table

Question

我正在尝试使用 Vue 从 Vasan Subramanian 实施以下 Flexbox table。
table 是手动构建的，但是在尝试制作它的组件时并没有太大帮助。
所以我愿意动态地做到这一点。我的第一个障碍是将每对两行分组在一个 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>

前面的代码给出了正常的table header

    <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 响应式 tables 的好例子。只是前一个和另一个来自 Jonathan Lehman 使用 Sass.

的精彩讲座

Answer 1

我从计算开始属性

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>

这行得通。测试目的

Answer 2

您想对列进行分组，然后遍历每个组中的列。使用计算来进行分组。您的 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>

使用 Vue 和 Flexbox 响应式 Table

Responsive Table with Vue and Flexbox

css

flexbox

vue.js

responsive