时间戳

首页 > 解决方案 > 如何输出列表以 vuetify 数据表？

json - 如何输出列表以 vuetify 数据表？

问题描述

使用vue.js、和vuetify data-table，我已经根据官方 vuetify 数据表示例构建了一个表。随着我请求数据并且一切正常，服务器生成一个列表，其中包含一些重复值：axiosexpressaxiosexpress

[
    "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 对象显示到数据表的最佳方法是什么？

先感谢您

标签： jsonlistvue.jsdatatablevuetify.js

解决方案

使用计算属性对你的分页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>

推荐阅读