Vuetify - Как мне сделать заголовок таблицы v-data динамическим - PullRequest
Новая
       7

Vuetify - Как мне сделать заголовок таблицы v-data динамическим

1 голос
/ 29 марта 2020

Предположим, у меня есть динамический c массив объектов, который должен выглядеть следующим образом: 

[{id: 1, item: 'apple', taste:'good', item2: 'papaya', taste2: 'bad'}
 {id: 2, item: 'melon', taste: 'bad'},
 {id: 3, item: 'orange', taste: 'good', item2: 'banana', taste2: 'bad', item3: 'grape', taste3:'good'} .......]

Как мне сделать таблицу v-data, чтобы заголовок выглядел следующим образом 

ID | ITEM | TASTE | ITEM2 | TASTE2 | ITEM3 | TASTE3 .....

Ответы [ 2 ]

2 голосов
/ 29 марта 2020

Значение headers должно быть вычисляемым свойством, которое имеет следующий код: 

computed: {
        headers() {
          //set having unique values
          let s = new Set();

          this.items.forEach(item => {
            for (f in item) {
              //adding an existing value doesn't override the old one
              s.add(f)
            }
          });
              //respect the headers format required by Vuetify which 
              // should has at least two fields (text, value)
          return Array.from(s).map(a => {
            return {
              text: a.toUpperCase(),
              value: a
            }
          });

        }

      }


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      items: [{
          id: 1,
          item: 'apple',
          taste: 'good',
          item2: 'papaya',
          taste2: 'bad'
        }, {
          id: 2,
          item: 'melon',
          taste: 'bad'
        },
        {
          id: 3,
          item: 'orange',
          taste: 'good',
          item2: 'banana',
          taste2: 'bad',
          item3: 'grape',
          taste3: 'good'
        }
      ]
    }
  },
  computed: {
    headers() {
      let s = new Set();

      this.items.forEach(item => {
        for (f in item) {
          s.add(f)
        }
      });

      return Array.from(s).map(a => {
        return {
          text: a.toUpperCase(),
          value: a
        }
      });

    }

  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-data-table :headers="headers" :items="items"></v-data-table>
      </v-container>
    </v-content>
  </v-app>
</div>
1 голос
/ 29 марта 2020

Используя комбинацию .reduce(), Set() и Object.keys(), вы можете получить заголовок, как и ожидалось.

Попробуйте следующее: 

const data = [
  {id: 1, item: 'apple', taste:'good', item2: 'papaya', taste2: 'bad'},
  {id: 2, item: 'melon', taste: 'bad'},
  {id: 3, item: 'orange', taste: 'good', item2: 'banana', taste2: 'bad', item3: 'grape', taste3:'good'}
];
 
const uniqueKeys = Array.from(data.reduce((a, c) => {
  Object.keys(c).forEach(e => a.add(e));
  return a;
}, new Set()));

console.log(uniqueKeys);
...