代码之家 › 专栏 › 技术社区 › sunwarr10r

如何将列表输出到vuetify数据表?

vuetify.js datatable vue.js list json

sunwarr10r · 技术社区 · 7 年前

使用 vue.js , vuetify data-table , axios 和 express ,我已经做了一张桌子 according to the official vuetify data-table example 具有 axios 我要求提供数据,一切正常 表示 服务器生成一个列表,其中有几个重复出现的值:

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

现在我有两个问题:

如何将数据放入表中?
是一个 list 适合这个操作还是我最好生成一个 json 对象如果列表不合适,那么向数据表显示json对象的最佳方式是什么?

提前谢谢

2 回复 | 直到 7 年前

sunwarr10r 7 年前

最好使用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>

Boussadjra Brahim 7 年前

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