vue中cdn引入vuetify,实现表格和分页

我会带着你远行 2023-02-10 03:44 28阅读 0赞
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  5. <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  6. <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  8. </head>
  9. <body>
  10. <div id="app">
  11. <v-app>
  12. <template>
  13. <v-data-table
  14. :headers="headers"
  15. :items="desserts"
  16. :items-per-page="5"
  17. class="elevation-1"
  18. ></v-data-table>
  19. </template>
  20. </v-app>
  21. </div>
  22. <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  23. <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  24. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  25. <template>
  26. <v-data-table
  27. :headers="headers"
  28. :items="desserts"
  29. :items-per-page="5"
  30. class="elevation-1"
  31. ></v-data-table>
  32. </template>
  33. <script>
  34. new Vue({
  35. el: '#app',
  36. vuetify: new Vuetify(),
  37. data () {
  38. return {
  39. headers: [
  40. {
  41. text: 'Dessert (100g serving)',
  42. align: 'start',
  43. sortable: false,
  44. value: 'name',
  45. },
  46. { text: 'Calories', value: 'calories' },
  47. { text: 'Fat (g)', value: 'fat' },
  48. { text: 'Carbs (g)', value: 'carbs' },
  49. { text: 'Protein (g)', value: 'protein' },
  50. { text: 'Iron (%)', value: 'iron' },
  51. ],
  52. desserts: [
  53. {
  54. name: 'Frozen Yogurt',
  55. calories: 159,
  56. fat: 6.0,
  57. carbs: 24,
  58. protein: 4.0,
  59. iron: '1%',
  60. },
  61. {
  62. name: 'Ice cream sandwich',
  63. calories: 237,
  64. fat: 9.0,
  65. carbs: 37,
  66. protein: 4.3,
  67. iron: '1%',
  68. },
  69. {
  70. name: 'Eclair',
  71. calories: 262,
  72. fat: 16.0,
  73. carbs: 23,
  74. protein: 6.0,
  75. iron: '7%',
  76. },
  77. {
  78. name: 'Cupcake',
  79. calories: 305,
  80. fat: 3.7,
  81. carbs: 67,
  82. protein: 4.3,
  83. iron: '8%',
  84. },
  85. {
  86. name: 'Gingerbread',
  87. calories: 356,
  88. fat: 16.0,
  89. carbs: 49,
  90. protein: 3.9,
  91. iron: '16%',
  92. },
  93. {
  94. name: 'Jelly bean',
  95. calories: 375,
  96. fat: 0.0,
  97. carbs: 94,
  98. protein: 0.0,
  99. iron: '0%',
  100. },
  101. {
  102. name: 'Lollipop',
  103. calories: 392,
  104. fat: 0.2,
  105. carbs: 98,
  106. protein: 0,
  107. iron: '2%',
  108. },
  109. {
  110. name: 'Honeycomb',
  111. calories: 408,
  112. fat: 3.2,
  113. carbs: 87,
  114. protein: 6.5,
  115. iron: '45%',
  116. },
  117. {
  118. name: 'Donut',
  119. calories: 452,
  120. fat: 25.0,
  121. carbs: 51,
  122. protein: 4.9,
  123. iron: '22%',
  124. },
  125. {
  126. name: 'KitKat',
  127. calories: 518,
  128. fat: 26.0,
  129. carbs: 65,
  130. protein: 7,
  131. iron: '6%',
  132. },
  133. ],
  134. }
  135. },
  136. })
  137. </script>
  138. </body>
  139. </html>

format_png

放在json里面

发表评论

表情:
评论列表 (有 0 条评论,28人围观)

还没有评论,来说两句吧...

相关阅读