index.vue 881 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <template>
  2. <a-table
  3. :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  4. :columns="columns"
  5. :data-source="data"
  6. />
  7. </template>
  8. <script setup>
  9. import { computed, ref, unref } from 'vue'
  10. import { Table } from 'ant-design-vue'
  11. const DataType = ref([])
  12. const columns = [
  13. {
  14. title: 'Name',
  15. dataIndex: 'name'
  16. },
  17. {
  18. title: 'Age',
  19. dataIndex: 'age'
  20. },
  21. {
  22. title: 'Address',
  23. dataIndex: 'address'
  24. }
  25. ]
  26. const data = DataType.value
  27. for (let i = 0; i < 46; i++) {
  28. data.push({
  29. key: i,
  30. name: `Edward King ${i}`,
  31. age: 32,
  32. address: `London, Park Lane no. ${i}`
  33. })
  34. }
  35. const selectedRowKeys = ref([]) // Check here to configure the default column
  36. const onSelectChange = (changableRowKeys) => {
  37. console.log('selectedRowKeys changed: ', changableRowKeys)
  38. selectedRowKeys.value = changableRowKeys
  39. }
  40. </script>