| 提交 | 用户 | age | ||
| faf3f4 | 1 | <template> |
| 陈 | 2 | <div class="p-4"> |
| 3 | <BasicTable @register="registerTable" /> | |
| 4 | </div> | |
| 5 | </template> | |
| 6 | <script lang="ts"> | |
| 7 | import { defineComponent } from 'vue'; | |
| 8 | import { BasicTable, useTable } from '/@/components/Table'; | |
| 9 | import { getBasicColumns } from './tableData'; | |
| 10 | ||
| 11 | import { demoListApi } from '/@/api/demo/table'; | |
| 12 | ||
| 13 | export default defineComponent({ | |
| 14 | components: { BasicTable }, | |
| 15 | setup() { | |
| 16 | function handleSummary(tableData: any[]) { | |
| 17 | const totalNo = tableData.reduce((prev, next) => { | |
| 18 | prev += next.no; | |
| 19 | return prev; | |
| 20 | }, 0); | |
| 21 | return [ | |
| 22 | { | |
| 23 | _row: '合计', | |
| 24 | _index: '平均值', | |
| 25 | no: totalNo, | |
| 26 | }, | |
| 27 | { | |
| 28 | _row: '合计', | |
| 29 | _index: '平均值', | |
| 30 | no: totalNo, | |
| 31 | }, | |
| 32 | ]; | |
| 33 | } | |
| 34 | const [registerTable] = useTable({ | |
| 35 | title: '表尾行合计示例', | |
| 36 | api: demoListApi, | |
| 37 | rowSelection: { type: 'checkbox' }, | |
| 38 | columns: getBasicColumns(), | |
| 39 | showSummary: true, | |
| 40 | summaryFunc: handleSummary, | |
| 41 | scroll: { x: 2000 }, | |
| 42 | canResize: false, | |
| 43 | }); | |
| 44 | ||
| 45 | return { | |
| 46 | registerTable, | |
| 47 | }; | |
| 48 | }, | |
| 49 | }); | |
| 50 | </script> | |
