nested.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <script setup lang="ts">
  2. import { MoreOutlined } from '@ant-design/icons-vue';
  3. import { Button, Card } from 'ant-design-vue';
  4. import { ThoughtChain, type ThoughtChainProps } from 'ant-design-x-vue';
  5. import { h } from 'vue';
  6. defineOptions({ name: 'AXThoughtChainNestedSetup' });
  7. const items: ThoughtChainProps['items'] = [
  8. {
  9. title: '1 - Thought Chain Item',
  10. description: 'description',
  11. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  12. footer: h(Button, {}, () => '1 - Thought Chain Item Footer'),
  13. content: h(ThoughtChain, {
  14. items: [
  15. {
  16. title: '1-1 Thought Chain Item',
  17. description: 'description',
  18. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  19. },
  20. {
  21. title: '1-2 Thought Chain Item',
  22. description: 'description',
  23. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  24. },
  25. ],
  26. }),
  27. },
  28. {
  29. title: '2 - Thought Chain Item',
  30. description: 'description',
  31. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  32. footer: h(Button, {}, () => '2 - Thought Chain Item Footer'),
  33. content: h(ThoughtChain, {
  34. items: [
  35. {
  36. title: '2-1 Thought Chain Item',
  37. description: 'description',
  38. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  39. },
  40. {
  41. title: '2-2 Thought Chain Item',
  42. description: 'description',
  43. extra: h(Button, { type: 'text', icon: h(MoreOutlined) }),
  44. },
  45. ],
  46. }),
  47. },
  48. ];
  49. </script>
  50. <template>
  51. <Card :style="{ width: '500px' }">
  52. <ThoughtChain
  53. :items="items"
  54. collapsible
  55. />
  56. </Card>
  57. </template>