Question

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

我首先需要从JSON文件中获取数据，并以名字，中间名，姓氏，电子邮件进行显示。

我想使用道具。

您能告诉我如何执行此操作吗？

Answer 1

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

请检查下面的工作代码段

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>

Vuetify数据表创建

1 个答案: