7158ce151d8263276b4b0dbfde0ea174e7620d6244cd251c349538bf538301f3fd3c7ac14055bed88c962aed0cbf789d7f68d5523abc144b46ec1d6a2991c5 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. import LayoutObserver from './layout-observer';
  2. import { mapStates } from './store/helper';
  3. export default {
  4. name: 'ElTableFooter',
  5. mixins: [LayoutObserver],
  6. render(h) {
  7. let sums = [];
  8. if (this.summaryMethod) {
  9. sums = this.summaryMethod({ columns: this.columns, data: this.store.states.data });
  10. } else {
  11. this.columns.forEach((column, index) => {
  12. if (index === 0) {
  13. sums[index] = this.sumText;
  14. return;
  15. }
  16. const values = this.store.states.data.map(item => Number(item[column.property]));
  17. const precisions = [];
  18. let notNumber = true;
  19. values.forEach(value => {
  20. if (!isNaN(value)) {
  21. notNumber = false;
  22. let decimal = ('' + value).split('.')[1];
  23. precisions.push(decimal ? decimal.length : 0);
  24. }
  25. });
  26. const precision = Math.max.apply(null, precisions);
  27. if (!notNumber) {
  28. sums[index] = values.reduce((prev, curr) => {
  29. const value = Number(curr);
  30. if (!isNaN(value)) {
  31. return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
  32. } else {
  33. return prev;
  34. }
  35. }, 0);
  36. } else {
  37. sums[index] = '';
  38. }
  39. });
  40. }
  41. return (
  42. <table
  43. class="el-table__footer"
  44. cellspacing="0"
  45. cellpadding="0"
  46. border="0">
  47. <colgroup>
  48. {
  49. this.columns.map(column => <col name={ column.id } key={column.id} />)
  50. }
  51. {
  52. this.hasGutter ? <col name="gutter" /> : ''
  53. }
  54. </colgroup>
  55. <tbody class={ [{ 'has-gutter': this.hasGutter }] }>
  56. <tr>
  57. {
  58. this.columns.map((column, cellIndex) => <td
  59. key={cellIndex}
  60. colspan={ column.colSpan }
  61. rowspan={ column.rowSpan }
  62. class={ [...this.getRowClasses(column, cellIndex), 'el-table__cell'] }>
  63. <div class={ ['cell', column.labelClassName] }>
  64. {
  65. sums[cellIndex]
  66. }
  67. </div>
  68. </td>)
  69. }
  70. {
  71. this.hasGutter ? <th class="el-table__cell gutter"></th> : ''
  72. }
  73. </tr>
  74. </tbody>
  75. </table>
  76. );
  77. },
  78. props: {
  79. fixed: String,
  80. store: {
  81. required: true
  82. },
  83. summaryMethod: Function,
  84. sumText: String,
  85. border: Boolean,
  86. defaultSort: {
  87. type: Object,
  88. default() {
  89. return {
  90. prop: '',
  91. order: ''
  92. };
  93. }
  94. }
  95. },
  96. computed: {
  97. table() {
  98. return this.$parent;
  99. },
  100. hasGutter() {
  101. return !this.fixed && this.tableLayout.gutterWidth;
  102. },
  103. ...mapStates({
  104. columns: 'columns',
  105. isAllSelected: 'isAllSelected',
  106. leftFixedLeafCount: 'fixedLeafColumnsLength',
  107. rightFixedLeafCount: 'rightFixedLeafColumnsLength',
  108. columnsCount: states => states.columns.length,
  109. leftFixedCount: states => states.fixedColumns.length,
  110. rightFixedCount: states => states.rightFixedColumns.length
  111. })
  112. },
  113. methods: {
  114. isCellHidden(index, columns, column) {
  115. if (this.fixed === true || this.fixed === 'left') {
  116. return index >= this.leftFixedLeafCount;
  117. } else if (this.fixed === 'right') {
  118. let before = 0;
  119. for (let i = 0; i < index; i++) {
  120. before += columns[i].colSpan;
  121. }
  122. return before < this.columnsCount - this.rightFixedLeafCount;
  123. } else if (!this.fixed && column.fixed) { // hide cell when footer instance is not fixed and column is fixed
  124. return true;
  125. } else {
  126. return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount);
  127. }
  128. },
  129. getRowClasses(column, cellIndex) {
  130. const classes = [column.id, column.align, column.labelClassName];
  131. if (column.className) {
  132. classes.push(column.className);
  133. }
  134. if (this.isCellHidden(cellIndex, this.columns, column)) {
  135. classes.push('is-hidden');
  136. }
  137. if (!column.children) {
  138. classes.push('is-leaf');
  139. }
  140. return classes;
  141. }
  142. }
  143. };