vue-antd-ui/es/vc-table/src/HeadTable.js

An enterprise-class UI design language and Vue-based implementation

import PropTypes from '../../_util/vue-types';
import { measureScrollbar } from './utils';
import BaseTable from './BaseTable';

export default {
  name: 'HeadTable',
  props: {
    fixed: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
    columns: PropTypes.array.isRequired,
    tableClassName: PropTypes.string.isRequired,
    handleBodyScrollLeft: PropTypes.func.isRequired,
    expander: PropTypes.object.isRequired
  },
  inject: {
    table: { 'default': {} }
  },
  mounted: function mounted() {
    this.updateTableRef();
  },
  updated: function updated() {
    this.updateTableRef();
  },

  methods: {
    updateTableRef: function updateTableRef() {
      var _this = this;

      this.$nextTick(function () {
        _this.$refs.headTable && _this.table.saveChildrenRef('headTable', _this.$refs.headTable);
      });
    }
  },
  render: function render() {
    var h = arguments[0];
    var columns = this.columns,
        fixed = this.fixed,
        tableClassName = this.tableClassName,
        handleBodyScrollLeft = this.handleBodyScrollLeft,
        expander = this.expander,
        table = this.table;
    var prefixCls = table.prefixCls,
        scroll = table.scroll,
        showHeader = table.showHeader;
    var useFixedHeader = table.useFixedHeader;

    var headStyle = {};

    if (scroll.y) {
      useFixedHeader = true;
      // Add negative margin bottom for scroll bar overflow bug
      var scrollbarWidth = measureScrollbar('horizontal');
      if (scrollbarWidth > 0 && !fixed) {
        headStyle.marginBottom = '-' + scrollbarWidth + 'px';
        headStyle.paddingBottom = '0px';
      }
    }

    if (!useFixedHeader || !showHeader) {
      return null;
    }
    return h(
      'div',
      {
        key: 'headTable',
        ref: fixed ? null : 'headTable',
        'class': prefixCls + '-header',
        style: headStyle,
        on: {
          'scroll': handleBodyScrollLeft
        }
      },
      [h(BaseTable, {
        attrs: {
          tableClassName: tableClassName,
          hasHead: true,
          hasBody: false,
          fixed: fixed,
          columns: columns,
          expander: expander
        }
      })]
    );
  }
};