Блог

У меня есть объект следующим образом

 {
  A:[
    {subject:'U','teacher:'1'},
    {subject:'V','teacher:'2'},
    {subject:'W','teacher:'3'},
    {subject:'X','teacher:'4'},
    {subject:'Y','teacher:'5'}
  ],
  B:[
    {subject:'U','teacher:'1'},
    {subject:'V','teacher:'2'},
    {subject:'W','teacher:'3'},
    {subject:'X','teacher:'4'},
    {subject:'Y','teacher:'5'}
  ],
  C:[
    {subject:'U','teacher:'1'},
    {subject:'V','teacher:'2'},
    {subject:'W','teacher:'3'},
    {subject:'X','teacher:'4'},
    {subject:'Y','teacher:'5'},
  ]
}
  

Теперь я хочу отобразить каждую пару ключ-значение объекта в строке и.
Итак, теперь в строке у меня есть несколько столбцов, из которых первый столбец является ключом объектов, т. Е. (A, B, C), а затем в другом столбце будут напечатаны значения ключей, т. Е. Все объекты в массиве соответствующих ключей. Я хочу, чтобы основной ключ объекта, то есть (A, B, C), был зафиксирован в столбце, а остальные прокручивались по горизонтали. Я попробовал следующее

 <v-card>
 <v-card-text class="card-body">
  <v-row class="flex-nowrap" v-for="(value,key) in data" :key="key">
    <v-col md="4">{{key}}</v-col> // this would print A,B,C. I want this col to be fixed
    <v-col md="2" v-for="(arrObj,i) in value" :key="i">
      <span>{{arrObj}}</span>
    </v-col>
  </v-row>
 </v-card-text>
</v-card>
  

И

 .card-body {
  overflow-y: auto;
}
  

Таким образом, это делает прокручиваемой всю карту. Но я хочу, чтобы первый столбец был исправлен, а остальные столбцы строки были прокручиваемыми. Как я могу этого добиться? Или есть какой-либо другой способ добиться этого. Также я не хочу отображать эти данные в таблице.

Вот мой взгляд на вашу проблему.

 <v-card-text>
  <v-row>

    <v-col md="4" class="d-flex flex-column">
      <div v-for="(value, key) in data" :key="key">{{ key }}</div>
    </v-col>

    <v-col md="8" class="d-flex flex-column" style="overflow-x: auto">
      <!-- Set the width to ridiculous amount to simulate overflowing div for scrolling -->
      <div style="width: 2000px;" v-for="(value, key) in data" :key="key">
        <span v-for="(arrObj, i) in value" :key="i">{{ arrObj }}</span>
      </div>
    </v-col>

  </v-row>
</v-card-text>
  

Итак, в принципе, у меня есть две итерации для data переменной для каждого столбца. (Я знаю, это выглядит грязно). Затем я установил фиксированную ширину для divs во втором столбце, чтобы он не был перенесен на ширину столбца, что приведет к переполнению столбца.

Вот пример демонстрации в codesandbox.