Question

使用vue.js，vuetify data-table，axios和express，我建立了一个表according to the official vuetify data-table example。使用axios我请求数据并且一切正常，express服务器生成一个列表，该列表具有一些重复的值：

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

现在我有两个问题：

如何将数据放入表中？
list是否适合此操作？还是应该更好地生成json对象？如果列表不合适，那么将json对象显示到数据表的最佳方法是什么？

提前谢谢

Answer 1

最好将数据存储在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>

Answer 2

使用计算所得的属性对您的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>

如何输出列表以验证数据表？

2 个答案: