Vuetify 数据表创建答案

【问题标题】：Vuetify data table creationVuetify 数据表创建
【发布时间】：2020-02-04 19:34:51
【问题描述】：

我正在寻找一些使用 Vuetify 制作数据表的简单教程。

我需要先从 JSON 文件中获取我的数据，并用名字、中间名、姓氏、电子邮件显示它。

我想使用道具。

你能告诉我怎么做吗？

【问题讨论】：

标签： vue.js axios vuetify.js

【解决方案1】：

您可以使用props 创建一个表格子组件，并通过传递道具来使用该组件。

请检查下面的工作代码 sn -p

new Vue({
  el: '#app',
  data: {
    tableData: []
  },
  methods:{
    onLoadDataClick(){
      let self = this;
      document.querySelector('.lds-roller').style.display="block";
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(json => {
          document.querySelector('.lds-roller').style.display="none";
          self.$data.tableData = json
        })
    }
  },
  components: {
    'child' : {
      template: `
        <table style="width:100%;border-collapse: collapse;">
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Body</th>
          </tr>
          <tr v-for="(item,key) in data" :key="key">
            <td>{{item.id}}</td>
            <td>{{item.title}}</td>
            <td>{{item.body}}</td>
          </tr></table>`,
      props: ['data'],
      watch: { 
      	data: function(newVal, oldVal) { // watch it
          console.log('Prop value changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }
});

.lds-roller{width:64px;height:64px;background-color:#00000075;position:absolute;border-radius:50%;z-index:9999;display:none}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:32px 32px}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;margin:-3px 0 0 -3px}.lds-roller div:nth-child(1){animation-delay:-36ms}.lds-roller div:nth-child(1):after{top:50px;left:50px}.lds-roller div:nth-child(2){animation-delay:-72ms}.lds-roller div:nth-child(2):after{top:54px;left:45px}.lds-roller div:nth-child(3){animation-delay:-108ms}.lds-roller div:nth-child(3):after{top:57px;left:39px}.lds-roller div:nth-child(4){animation-delay:-144ms}.lds-roller div:nth-child(4):after{top:58px;left:32px}.lds-roller div:nth-child(5){animation-delay:-.18s}.lds-roller div:nth-child(5):after{top:57px;left:25px}.lds-roller div:nth-child(6){animation-delay:-216ms}.lds-roller div:nth-child(6):after{top:54px;left:19px}.lds-roller div:nth-child(7){animation-delay:-252ms}.lds-roller div:nth-child(7):after{top:50px;left:14px}.lds-roller div:nth-child(8){animation-delay:-288ms}.lds-roller div:nth-child(8):after{top:45px;left:10px}@keyframes lds-roller{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.as-console-wrapper{display:none!important}.btn{font-weight:700;cursor:pointer}td{border:1px solid #ccc}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div class="lds-roller" stypl="display:none;"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
  <button @click="onLoadDataClick" class="btn">Load data</button>
  <br/>  <br/>
  <child :data="tableData"></child>
  
</div>

【讨论】：