| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- import LayoutObserver from './layout-observer';
- import { mapStates } from './store/helper';
- export default {
- name: 'ElTableFooter',
- mixins: [LayoutObserver],
- render(h) {
- let sums = [];
- if (this.summaryMethod) {
- sums = this.summaryMethod({ columns: this.columns, data: this.store.states.data });
- } else {
- this.columns.forEach((column, index) => {
- if (index === 0) {
- sums[index] = this.sumText;
- return;
- }
- const values = this.store.states.data.map(item => Number(item[column.property]));
- const precisions = [];
- let notNumber = true;
- values.forEach(value => {
- if (!isNaN(value)) {
- notNumber = false;
- let decimal = ('' + value).split('.')[1];
- precisions.push(decimal ? decimal.length : 0);
- }
- });
- const precision = Math.max.apply(null, precisions);
- if (!notNumber) {
- sums[index] = values.reduce((prev, curr) => {
- const value = Number(curr);
- if (!isNaN(value)) {
- return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
- } else {
- return prev;
- }
- }, 0);
- } else {
- sums[index] = '';
- }
- });
- }
- return (
- <table
- class="el-table__footer"
- cellspacing="0"
- cellpadding="0"
- border="0">
- <colgroup>
- {
- this.columns.map(column => <col name={ column.id } key={column.id} />)
- }
- {
- this.hasGutter ? <col name="gutter" /> : ''
- }
- </colgroup>
- <tbody class={ [{ 'has-gutter': this.hasGutter }] }>
- <tr>
- {
- this.columns.map((column, cellIndex) => <td
- key={cellIndex}
- colspan={ column.colSpan }
- rowspan={ column.rowSpan }
- class={ this.getRowClasses(column, cellIndex) }>
- <div class={ ['cell', column.labelClassName] }>
- {
- sums[cellIndex]
- }
- </div>
- </td>)
- }
- {
- this.hasGutter ? <th class="gutter"></th> : ''
- }
- </tr>
- </tbody>
- </table>
- );
- },
- props: {
- fixed: String,
- store: {
- required: true
- },
- summaryMethod: Function,
- sumText: String,
- border: Boolean,
- defaultSort: {
- type: Object,
- default() {
- return {
- prop: '',
- order: ''
- };
- }
- }
- },
- computed: {
- table() {
- return this.$parent;
- },
- hasGutter() {
- return !this.fixed && this.tableLayout.gutterWidth;
- },
- ...mapStates({
- columns: 'columns',
- isAllSelected: 'isAllSelected',
- leftFixedLeafCount: 'fixedLeafColumnsLength',
- rightFixedLeafCount: 'rightFixedLeafColumnsLength',
- columnsCount: states => states.columns.length,
- leftFixedCount: states => states.fixedColumns.length,
- rightFixedCount: states => states.rightFixedColumns.length
- })
- },
- methods: {
- isCellHidden(index, columns, column) {
- if (this.fixed === true || this.fixed === 'left') {
- return index >= this.leftFixedLeafCount;
- } else if (this.fixed === 'right') {
- let before = 0;
- for (let i = 0; i < index; i++) {
- before += columns[i].colSpan;
- }
- return before < this.columnsCount - this.rightFixedLeafCount;
- } else if (!this.fixed && column.fixed) { // hide cell when footer instance is not fixed and column is fixed
- return true;
- } else {
- return (index < this.leftFixedCount) || (index >= this.columnsCount - this.rightFixedCount);
- }
- },
- getRowClasses(column, cellIndex) {
- const classes = [column.id, column.align, column.labelClassName];
- if (column.className) {
- classes.push(column.className);
- }
- if (this.isCellHidden(cellIndex, this.columns, column)) {
- classes.push('is-hidden');
- }
- if (!column.children) {
- classes.push('is-leaf');
- }
- return classes;
- }
- }
- };
|