demo1.vue 922 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <m-table :data="tableData" v-loading="loading">
  3. <m-table-column prop="date" label="日期" />
  4. <m-table-column prop="name" label="姓名" />
  5. <m-table-column prop="address" label="地址" />
  6. </m-table>
  7. <div class="mt-20">
  8. <m-switch v-model="loading"></m-switch>
  9. <span>开启/关闭Loading</span>
  10. </div>
  11. </template>
  12. <script setup>
  13. import { ref } from 'vue-demi';
  14. const loading = ref(true);
  15. const tableData = [
  16. {
  17. date: '2022-05-12',
  18. name: '后裔',
  19. address: '王者峡谷下塔旁'
  20. },
  21. {
  22. date: '2022-06-13',
  23. name: '鲁班',
  24. address: '在逛街'
  25. },
  26. {
  27. date: '2022-07-14',
  28. name: '孙尚香',
  29. address: '在打红buff'
  30. },
  31. {
  32. date: '2022-08-15',
  33. name: '狄仁杰',
  34. address: '在推塔'
  35. }
  36. ]
  37. </script>
  38. <style scoped>
  39. .mt-20{
  40. display: flex;
  41. margin-top: 20px;
  42. }
  43. .mt-20 span{
  44. margin-left: 10px;
  45. font-size: 14px;
  46. }
  47. </style>