summary.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <div class="scope">
  3. <div class="h">
  4. <el-tag size="small" effect="dark">summary</el-tag>
  5. <span>表尾合计行</span>
  6. </div>
  7. <div class="c">
  8. <el-button @click="open">预览</el-button>
  9. <demo-code :files="['table/summary.vue']" />
  10. <!-- 自定义表格组件 -->
  11. <cl-dialog v-model="visible" title="表尾合计行" width="80%">
  12. <cl-crud ref="Crud">
  13. <cl-row>
  14. <cl-table ref="Table" show-summary :summary-method="getSummaries" />
  15. </cl-row>
  16. <cl-row>
  17. <cl-flex1 />
  18. <cl-pagination />
  19. </cl-row>
  20. </cl-crud>
  21. </cl-dialog>
  22. </div>
  23. <div class="f">
  24. <span class="date">2024-01-01</span>
  25. </div>
  26. </div>
  27. </template>
  28. <script setup lang="ts">
  29. import { useCrud, useTable } from '@cool-vue/crud';
  30. import { ref } from 'vue';
  31. import { useDict } from '/$/dict';
  32. const { dict } = useDict();
  33. // cl-crud 配置
  34. const Crud = useCrud(
  35. {
  36. service: 'test'
  37. },
  38. app => {
  39. app.refresh();
  40. }
  41. );
  42. // cl-table 配置
  43. const Table = useTable({
  44. autoHeight: false,
  45. contextMenu: ['refresh'],
  46. columns: [
  47. {
  48. label: '姓名',
  49. prop: 'name',
  50. minWidth: 140
  51. },
  52. {
  53. label: '存款',
  54. prop: 'wages',
  55. minWidth: 140
  56. },
  57. {
  58. label: '手机号',
  59. prop: 'phone',
  60. minWidth: 140
  61. },
  62. {
  63. label: '工作',
  64. prop: 'occupation',
  65. dict: dict.get('occupation'),
  66. minWidth: 140
  67. },
  68. {
  69. label: '创建时间',
  70. prop: 'createTime',
  71. minWidth: 170,
  72. sortable: 'desc'
  73. }
  74. ]
  75. });
  76. function getSummaries() {
  77. return ['合计', '$' + Table.value?.data.reduce((a, b) => a + b.wages, 0)];
  78. }
  79. const visible = ref(false);
  80. function open() {
  81. visible.value = true;
  82. }
  83. </script>