Адаптивная таблица с Vue и Flexbox

ProgramBox

Адаптивная таблица с Vue и Flexbox

Post author:admin
Запись опубликована:25 августа, 2022
Post category:Вопросы по программированию

#css #flexbox #vue.js #responsive

#css #flexbox #vue.js #адаптивный

Вопрос:

Я пытаюсь реализовать следующую таблицу Flexbox от 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}}amp;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. только предыдущая и эта другая от Джонатана Лемана Отличная лекция с использованием Sass.

1. Если вам нужны таблицы, скорее всего, вам следует использовать элементы таблицы и изменить их стиль, чтобы они были гибкими. Это просто будет звучать как беспорядок для людей, использующих программу чтения с экрана. Однако вместо того, чтобы вручную вставлять разделитель, почему бы вам не оформить столбцы с помощью :nth-child ?

2. @BillCriswell. спасибо, вы читали статью, на которую я ссылался в начале?. Моя цель — просто создать эту таблицу Динамично и с помощью vue. Также. Вы могли бы дать идеи при использовании:nth-дочернего элемента

3. привет, не могли бы вы поделиться своим полным рабочим кодом?

Ответ №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 resu<
    }
  }
});

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

1. @ Roy J спасибо, всегда очень приятно изучать новый код, и ваш кажется очень чистым. Я приму ваш ответ как действительный, сказав, что мой тоже работает. Еще раз благодарю вас за то, что нашли время и помогли. Если вы прочитали сообщение, сделанное Васаном Субраманьяном, следующим шагом будет создание групп по 4 человека. Я определенно думаю, что эта тема побудит людей создавать такие таблицы.

2. Значение Grow установлено, потому что у меня будет поле «option», которое должно быть меньше. Также есть опубликованное поле для публикации сообщений. По отношению к этим размерам полей другие поля, которые мы бы назвали данными, должны быть больше этих.

Ответ №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>

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

Метки: Адаптивная таблица с Vue и Flexbox