| 提交 | 用户 | age | ||
| faf3f4 | 1 | <template> |
| 540423 | 2 | <BasicTable |
| 无 | 3 | @register="registerTable" |
| 4 | :rowSelection="{ type: 'checkbox', selectedRowKeys: checkedKeys, onChange: onSelectChange }" | |
| 5 | > | |
| 9edc28 | 6 | <template #form-custom> custom-slot </template> |
| 540423 | 7 | <template #headerTop> |
| 无 | 8 | <a-alert type="info" show-icon> |
| 9 | <template #message> | |
| 10 | <template v-if="checkedKeys.length > 0"> | |
| 11 | <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span> | |
| 12 | <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button> | |
| 13 | </template> | |
| 14 | <template v-else> | |
| 15 | <span>未选中任何项目</span> | |
| 16 | </template> | |
| 17 | </template> | |
| 18 | </a-alert> | |
| 19 | </template> | |
| b54b79 | 20 | <template #toolbar> |
| V | 21 | <a-button type="primary" @click="getFormValues">获取表单数据</a-button> |
| 22 | </template> | |
| 116a1f | 23 | </BasicTable> |
| faf3f4 | 24 | </template> |
| 陈 | 25 | <script lang="ts"> |
| 540423 | 26 | import { defineComponent, ref } from 'vue'; |
| faf3f4 | 27 | import { BasicTable, useTable } from '/@/components/Table'; |
| 陈 | 28 | import { getBasicColumns, getFormConfig } from './tableData'; |
| 540423 | 29 | import { Alert } from 'ant-design-vue'; |
| faf3f4 | 30 | |
| 陈 | 31 | import { demoListApi } from '/@/api/demo/table'; |
| 32 | ||
| 33 | export default defineComponent({ | |
| 540423 | 34 | components: { BasicTable, AAlert: Alert }, |
| faf3f4 | 35 | setup() { |
| 540423 | 36 | const checkedKeys = ref<Array<string | number>>([]); |
| b54b79 | 37 | const [registerTable, { getForm }] = useTable({ |
| faf3f4 | 38 | title: '开启搜索区域', |
| 陈 | 39 | api: demoListApi, |
| 40 | columns: getBasicColumns(), | |
| 41 | useSearchForm: true, | |
| 42 | formConfig: getFormConfig(), | |
| 8b3a4d | 43 | showTableSetting: true, |
| 540423 | 44 | showIndexColumn: false, |
| 无 | 45 | rowKey: 'id', |
| faf3f4 | 46 | }); |
| 陈 | 47 | |
| b54b79 | 48 | function getFormValues() { |
| V | 49 | console.log(getForm().getFieldsValue()); |
| 50 | } | |
| 51 | ||
| 540423 | 52 | function onSelectChange(selectedRowKeys: (string | number)[]) { |
| 无 | 53 | console.log(selectedRowKeys); |
| 54 | checkedKeys.value = selectedRowKeys; | |
| 55 | } | |
| 56 | ||
| faf3f4 | 57 | return { |
| 陈 | 58 | registerTable, |
| b54b79 | 59 | getFormValues, |
| 540423 | 60 | checkedKeys, |
| 无 | 61 | onSelectChange, |
| faf3f4 | 62 | }; |
| 陈 | 63 | }, |
| 64 | }); | |
| 65 | </script> | |
