带有 Vue 和 Flexbox 的响应式表格答案

【问题标题】：Responsive Table with Vue and Flexbox带有 Vue 和 Flexbox 的响应式表格
【发布时间】：2017-02-23 20:29:15
【问题描述】：

我正在尝试使用 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 的精彩讲座。

【问题讨论】：

如果你想要表格，你应该使用表格元素并将它们重新设置为 flex。对于使用屏幕阅读器的人来说，这听起来就像一团糟。但是，与其手动插入分隔线，为什么不按:nth-child 设置列的样式？
@BillCriswell。谢谢，您是否阅读了我在开始时链接的文章？我的目标是用 vue 动态地制作那个表。还。您可以在使用 :nth-child 时给出想法
嗨，你能分享你完整的工作代码吗？

标签： css flexbox vue.js responsive

【解决方案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>

【讨论】：

@Roy J 谢谢，学习新代码总是让人耳目一新，而且你的代码看起来很干净。我会接受你的回答，因为我的回答也有效。再次感谢您抽出时间和帮助。如果你已经阅读了 Vasan Subramanian 的帖子，下一步是 4 人一组。我绝对认为这个帖子会鼓励人们制作这种桌子。
Grow 已设置，因为我将有一个“选项”字段，该字段应该更小。还有用于发布帖子的已发布字段。关于这些字段大小，我们称为数据的其他字段应该比这些更大。

【解决方案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>

这行得通。测试目的

【讨论】：