Question

我试图用vue从Vasan Subramanian实施以下Flexbox 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>

前面的代码给出了普通的表头

    <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

我开始使用计算属性

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

您希望对列进行分组，然后循环遍历每个组中的列。使用computed进行分组。您的grow规范并不适合此模型;看起来你想要每组有一个增长规格，但我不确切知道目标是什么。

此代码会生成您选择的任何大小的列组，并将它们放入分隔符中。

＆＃13;

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;
    }
  }
});

＆＃13;

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

＆＃13;

带有Vue和Flexbox的响应表

2 个答案: