index.vue 764 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <script setup lang="ts">
  2. import { ref } from 'vue';
  3. import { Page } from '@vben/common-ui';
  4. import { NDataTable } from 'naive-ui';
  5. const columns = ref([
  6. {
  7. key: 'no',
  8. title: 'No',
  9. },
  10. {
  11. key: 'title',
  12. title: 'Title',
  13. },
  14. {
  15. key: 'length',
  16. title: 'Length',
  17. },
  18. ]);
  19. const data = [
  20. { length: '4:18', no: 3, title: 'Wonderwall' },
  21. { length: '4:48', no: 4, title: "Don't Look Back in Anger" },
  22. { length: '7:27', no: 12, title: 'Champagne Supernova' },
  23. ];
  24. </script>
  25. <template>
  26. <Page
  27. description="表单页用于向用户收集或验证信息,基础表单常见于数据项较少的表单场景。"
  28. title="NDataTable"
  29. >
  30. <NDataTable :columns="columns" :data="data" />
  31. </Page>
  32. </template>
  33. <style scoped></style>