Vuetify 数据表创建

Posted 2023-02-22

【中文标题】Vuetify 数据表创建

【英文标题】：Vuetify data table creation

【发布时间】：2020-02-04 19:34:51

【问题描述】：

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

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

我想使用道具。

你能告诉我怎么做吗？

【参考方案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-rollerwidth:64px;height:64px;background-color:#00000075;position:absolute;border-radius:50%;z-index:9999;display:none.lds-roller divanimation:lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:32px 32px.lds-roller div:aftercontent:" ";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):aftertop:50px;left:50px.lds-roller div:nth-child(2)animation-delay:-72ms.lds-roller div:nth-child(2):aftertop:54px;left:45px.lds-roller div:nth-child(3)animation-delay:-108ms.lds-roller div:nth-child(3):aftertop:57px;left:39px.lds-roller div:nth-child(4)animation-delay:-144ms.lds-roller div:nth-child(4):aftertop:58px;left:32px.lds-roller div:nth-child(5)animation-delay:-.18s.lds-roller div:nth-child(5):aftertop:57px;left:25px.lds-roller div:nth-child(6)animation-delay:-216ms.lds-roller div:nth-child(6):aftertop:54px;left:19px.lds-roller div:nth-child(7)animation-delay:-252ms.lds-roller div:nth-child(7):aftertop:50px;left:14px.lds-roller div:nth-child(8)animation-delay:-288ms.lds-roller div:nth-child(8):aftertop:45px;left:10px@keyframes lds-roller0%transform:rotate(0)100%transform:rotate(360deg).as-console-wrapperdisplay:none!important.btnfont-weight:700;cursor:pointertdborder: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>