如何输出列表以 vuetify 数据表？答案

【问题标题】：How to output a list to vuetify data-table?如何输出列表以 vuetify 数据表？
【发布时间】：2019-02-11 11:25:29
【问题描述】：

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

提前谢谢你

【问题讨论】：

标签： json list vue.js datatable vuetify.js

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：