Как вывести список для проверки таблицы данных? - PullRequest
Новая
       22

Как вывести список для проверки таблицы данных?

0 голосов
/ 11 февраля 2019

Используя vue.js, vuetify data-table, axios и express, я создал таблицу в соответствии с официальным примером таблицы данных vuetify .С axios я запрашиваю данные, и все работает нормально, сервер express создает список, который имеет несколько повторяющихся значений: 

[
    "id1", "01-01-2019", "name1", "€ 5,60",
    "id2", "02-01-2019", "name2", "€ 5,70",
    "id3", "03-01-2019", "name3", "€ 5,20",
    ...
]

Теперь у меня есть два вопроса:

  1. Как поместить данные в таблицу?
  2. Подходит ли list для этой операции или мне лучше сгенерировать объект json?Если список не подходит, как лучше всего отобразить объект json в таблице данных?

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

Используйте вычисляемое свойство для разбивки на страницы listItems, которые дают что-то вроде 

[
    ["id1", "01-01-2019", "name1", "€ 5,60"],
    ["id2", "02-01-2019", "name2", "€ 5,70"],
    ["id3", "03-01-2019", "name3", "€ 5,20"],
    ...
]

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

[
  {
    "id": "id1",
    "date": "01-01-2019",
    "name": "name1",
    "amount": "€ 5,60"
  },
  {
    "id": "id2",
    "date": "02-01-2019",
    "name": "name2",
    "amount": "€ 5,70"
  },
  {
    "id": "id3",
    "date": "03-01-2019",
    "name": "name3",
    "amount": "€ 5,20"
  }
]

Пример выполнения 

new Vue({
  el: '#app',
  data() {
    return {
      headers: [{
          text: 'ID',
          value: 'id'
        },
        {
          text: 'Date',
          value: 'data'
        },
        {
          text: 'Name',
          value: 'name'
        },
        {
          text: 'Amount',
          value: 'amount'
        }
      ],
      listItems: [
        "id1", "01-01-2019", "name1", "€ 5,60",
        "id2", "02-01-2019", "name2", "€ 5,70",
        "id3", "03-01-2019", "name3", "€ 5,20"

      ]
    }
  },
  computed: {
    items() {
      let items = [];
      let j = 0;
      for (let i = 0; i < this.listItems.length; i = i + 4) {
        items[j] = this.listItems.slice(i, i + 4);
        j++;
      }
      let tmp = items.map((item, i) => {
        let ob = {};
        item.forEach((t, k) => {

          k % 4 == 0 ? ob.id = t : {};
          k % 4 == 1 ? ob.date = t : {};
          k % 4 == 2 ? ob.name = t : {};
          k % 4 == 3 ? ob.amount = t : {};

        })
        return ob;
      });
   
      return tmp;


    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app" data-app>
  <v-data-table :headers="headers" :items="items" class="elevation-1">
    <template slot="items" slot-scope="props">
        <td class="text-xs-right">{{ props.item.id }}</td>
        <td class="text-xs-right">{{ props.item.date }}</td>
        <td class="text-xs-right">{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.amount }}</td>
      </template>
  </v-data-table>

</div>
0 голосов
/ 11 февраля 2019

Лучше всего, чтобы ваши данные были в формате JSON.Это основной способ сделать это: 

new Vue({
  el: '#app',
  data () {
    return {
      headers: [
        { text: 'ID' },
        { text: 'Date' },
        { text: 'Name' },
        { text: 'Price' }
      ],
      listItems: null
    }
  },
  mounted () {
    axios
      .get('data.json')
      .then(response => (this.listItems = response.data))
  }
})

Итак, ваши заголовки уже есть в данных, а затем, когда ваше приложение монтируется, axios загружает данные JSON и передает их в listItems.Тогда ваше vuetify будет таким: 

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="listItems"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-right">{{ props.item.id }}</td>
        <td class="text-xs-right">{{ props.item.date }}</td>
        <td class="text-xs-right">{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.price }}</td>
      </template>
    </v-data-table>
  </v-app>
</div>
...