tree-table-vue-extend/src/Table/TableHeader.js

A table (with tree-grid) component for Vue.js 2.0 and add some features based on team's own need. (Its style extends iView)

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

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

    };
  },
  computed: {
    table() {
      return this.$parent;
    },
  },
  methods: {
    toggleAllChecked(checked) {
      this.table.bodyData = this.table.bodyData.map(row => ({
        ...row,
        _isChecked: checked,
      }));
    },
    handleEvent($event, type, order, column) {
      if (type === 'enter') {
        $event.currentTarget.className = $event.currentTarget.className + " fa-color-balck";
      } else if (type === 'leave') {
        let classArr = $event.currentTarget.className.split(' ');
        let finalClassName = "";
        if (order === 'asc') {
          classArr.forEach((item, idx) => {
            if (item === "fa" || item === "fa-sort-asc" || item === "fa-fix-up" || item === "fa-sort-enabled") {
              finalClassName = finalClassName + item + " ";
            }
          });
        }
        if (order === 'desc') {
          classArr.forEach((item, idx) => {
            if (item === "fa" || item === "fa-sort-desc" || item === "fa-fix-down" || item === "fa-sort-enabled") {
              finalClassName = finalClassName + item + " ";
            }
          });
        }
        $event.currentTarget.className = finalClassName.replace(/(^\s*)|(\s*$)/g, "");
      } else if (type === 'click') {
        if ($event.currentTarget.className.indexOf("fa-sort-enabled") > -1) {
          let classArr = $event.currentTarget.className.split(' ');
          let finalClassName = "";
          classArr.forEach((item, idx) => {
            if (item !== "fa-sort-enabled") {
              finalClassName = finalClassName + item + " ";
            }
          });
          $event.currentTarget.className = finalClassName.replace(/(^\s*)|(\s*$)/g, "");
          return this.table.$emit('on-sort-change', column, "normal");
        } else {
          // 取消掉其他
          if (document.querySelector('.fa-sort-enabled') != null) {
            document.querySelector('.fa-sort-enabled').classList.remove("fa-sort-enabled");
          }
          // 添加自身样式
          $event.currentTarget.className = $event.currentTarget.className + " fa-sort-enabled";
          return this.table.$emit('on-sort-change', column, order);
        }
      }
    }
  },
  render() {
    // className
    function getClassName(type, { headerAlign, key }) {
      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 === key) {
          classList.push(`${this.prefixCls}--firstProp-header-inner`);
        }
      }
      return classList.join(' ');
    }

    // 根据type渲染单元格Label
    function renderLabel(column, columnIndex) {
      if (this.isSelectionCell(this.table, columnIndex) && this.selectType === 'checkbox') {
        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.title ? column.title : '';
    }

    // Template
    return (
      <table cellspacing="0" cellpadding="0" border="0" class={ `${this.prefixCls}__header` }>
        <colgroup>
          { this.table.tableColumns.map(column =>
            <col width={ column.computedWidth || column.minWidth || column.width }></col>)
          }
        </colgroup>
        <thead>
          {
            this.table.tableColumnRows.map((columns, rowIndex) =>
            <tr class={ `${this.prefixCls}__header-row` }>
            { columns.map((column, columnIndex) =>
                <th class={ getClassName.call(this, 'cell', column) } rowspan={ `${column.rowSpan}`} colspan={`${column.colSpan}`}>
                  <div class={ getClassName.call(this, 'inner', column) }>
                    <span>{ renderLabel.call(this, column, columnIndex) }</span>
                    {
                      column.sortable ? <span class="zk-table__sort">
                        <i on-mouseenter={ $event => this.handleEvent($event, 'enter', 'asc') }
                          on-mouseleave={ $event => this.handleEvent($event, 'leave', 'asc') }
                          on-click={ $event => this.handleEvent($event, 'click', 'asc', column) } 
                          class="fa fa-sort-asc fa-fix-up"></i>
                        <i on-mouseenter={ $event => this.handleEvent($event, 'enter', 'desc') }
                          on-mouseleave={ $event => this.handleEvent($event, 'leave', 'desc') }
                          on-click={ $event => this.handleEvent($event, 'click', 'desc', column) } 
                          class="fa fa-sort-desc fa-fix-down"></i>
                      </span> : ""
                    }
                  </div>
                </th>)
            }
            </tr>)
          }
        </thead>
      </table>
    );
  },
};