table-tree-grid/src/Table/TableHeader.js

A table (with tree-grid) component for Vue.js 2.0. (Its style extends iView)

import Checkbox from '../Checkbox/Checkbox'; // eslint-disable-line
import { mixins } from './utils';

/* eslint-disable no-underscore-dangle */
export default {
  name: 'zk-table__header',
  mixins: [mixins],
  data() {
    return {

    };
  },
  computed: {
    table() {
      return this.$parent;
    },
  },
  methods: {
    toggleAllChecked(checked) {
      this.table.bodyData = this.table.bodyData.map(row => ({
        ...row,
        _isChecked: checked,
      }));

      return this.table.$emit('toggle-all-checked', checked);
    },
  },
  render() {
    // style
    function getStyle(type, column, columnIndex) {
      let style;
      if (this.isSelectionCell(this.table, columnIndex)) {
        style = 'width: 50px';
      }
      return style;
    }

    // className
    function getClassName(type, { headerAlign, prop }) {
      const certainType = this.validateType(type, ['cell', 'inner'], 'getClassName');
      const classList = [];
      if (certainType.cell) {
        classList.push(`${this.prefixCls}__header-cell`);
        if (this.table.border) {
          classList.push(`${this.prefixCls}--border-cell`);
        }
        if (['center', 'right'].indexOf(headerAlign) > -1) {
          classList.push(`${this.prefixCls}--${headerAlign}-cell`);
        }
      }
      if (certainType.inner) {
        classList.push(`${this.prefixCls}__cell-inner`);
        if (this.table.treeType && this.table.firstProp === prop) {
          classList.push(`${this.prefixCls}--firstProp-header-inner`);
        }
      }
      return classList.join(' ');
    }

    // 根据type渲染单元格Label
    function renderLabel(column, columnIndex) {
      if (this.isSelectionCell(this.table, columnIndex)) {
        const allCheck = this.table.bodyData.every(row => row._isChecked);
        const indeterminate = !allCheck && this.table.bodyData.some(row => row._isChecked);
        return <Checkbox
          indeterminate={ indeterminate }
          value={ allCheck }
          onOn-change={ checked => this.toggleAllChecked(checked) }
          ></Checkbox>;
      }
      return column.label ? column.label : '';
    }

    // Template
    return (
      <table cellspacing="0" cellpadding="0" border="0" class={ `${this.prefixCls}__header` }>
        <thead>
          <tr class={ `${this.prefixCls}__header-row` }>
            { this.table.tableColumns.map((column, columnIndex) =>
                <th v-show={ column.visible } class={ getClassName.call(this, 'cell', column) }
                    style={ getStyle.call(this, 'column', column, columnIndex) }>
                  <div class={ getClassName.call(this, 'inner', column) }>
                    { renderLabel.call(this, column, columnIndex) }
                  </div>
                </th>)
            }
          </tr>
        </thead>
      </table>
    );
  },
};