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