@fesjs/fes-design/es/table/components/header.js

fes-design for PC

import { defineComponent, inject, computed, createVNode, Fragment } from 'vue';
import { isUndefined } from 'lodash-es';
import FCheckbox from '../../checkbox/checkbox.js';
import { provideKey } from '../const';
import useResize from '../useResize';

var header = defineComponent({
  props: {
    columns: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const {
      headerRows,
      handleHeaderClick,
      handleHeaderResize,
      getCellClass,
      getCellStyle,
      getCustomCellStyle,
      isAllSelected,
      isCurrentDataAnySelected,
      handleSelectAll,
      handleClickSortHeader,
      prefixCls,
      sortState,
      layout,
      rootProps
    } = inject(provideKey);
    const {
      current,
      onMousedown
    } = useResize(props.columns, layout.widthMap, handleHeaderResize, layout.isWatchX, computed(() => {
      return isUndefined(rootProps.height) && rootProps.layout === 'auto';
    }));

    /**
     * 实际渲染布局中，出现在行尾的 column
     *
     * 实现思路为，从 column 树（即 headerRows) 根节点出发，递归找到每个子树中最后一个 column 结点
     */
    const displayLastColumnIds = computed(() => {
      const getLastColumns = columns => {
        var _lastColumn$children;
        const lastColumn = columns[columns.length - 1];
        if (!lastColumn) {
          return [];
        }
        return [lastColumn, ...getLastColumns((_lastColumn$children = lastColumn.children) !== null && _lastColumn$children !== void 0 ? _lastColumn$children : [])];
      };
      return getLastColumns(headerRows.value[0]).map(c => c.id);
    });
    const renderHeader = _ref => {
      var _column$slots$header, _column$slots, _column$slots$header2, _column$props;
      let {
        column,
        columnIndex
      } = _ref;
      return (_column$slots$header = column === null || column === void 0 || (_column$slots = column.slots) === null || _column$slots === void 0 || (_column$slots$header2 = _column$slots.header) === null || _column$slots$header2 === void 0 ? void 0 : _column$slots$header2.call(_column$slots, {
        column,
        columnIndex
      })) !== null && _column$slots$header !== void 0 ? _column$slots$header : column === null || column === void 0 || (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.label;
    };
    const renderThList = row => row.map((column, columnIndex) => {
      var _column$props$sortDir, _column$props$sortDir2, _current$value;
      return createVNode("th", {
        "key": column.id,
        "colspan": column.colSpan,
        "rowspan": column.rowSpan,
        "class": [`${prefixCls}-th`, column.props.sortable && `${prefixCls}-th-sortable`, displayLastColumnIds.value.includes(column.id) && `${prefixCls}-th-last`, ...getCellClass({
          column,
          columns: props.columns
        })],
        "style": [getCellStyle({
          column,
          columns: props.columns
        }), getCustomCellStyle({
          column
        })],
        "onClick": $event => {
          handleHeaderClick({
            column
          }, $event);
          handleClickSortHeader({
            column
          });
        }
      }, [column.props.type === 'default' && createVNode(Fragment, null, [renderHeader({
        column,
        columnIndex
      }), column.props.sortable && createVNode("span", {
        "class": `${prefixCls}-sorter`
      }, [((_column$props$sortDir = column.props.sortDirections) === null || _column$props$sortDir === void 0 ? void 0 : _column$props$sortDir.includes('ascend')) && createVNode("span", {
        "class": [`${prefixCls}-sorter-up`, sortState.prop === column.props.prop && sortState.order === 'ascend' && 'is-active']
      }, null), ((_column$props$sortDir2 = column.props.sortDirections) === null || _column$props$sortDir2 === void 0 ? void 0 : _column$props$sortDir2.includes('descend')) && createVNode("span", {
        "class": [`${prefixCls}-sorter-down`, sortState.prop === column.props.prop && sortState.order === 'descend' && 'is-active']
      }, null)])]), column.props.type === 'selection'
      // 多选场景展示头部全选
      && column.props.multiple && createVNode("div", {
        "class": `${prefixCls}-center`
      }, [createVNode(FCheckbox, {
        "modelValue": isAllSelected.value,
        "indeterminate": !isAllSelected.value && isCurrentDataAnySelected.value,
        "onChange": handleSelectAll
      }, null)]), column.props.resizable && createVNode("span", {
        "class": [`${prefixCls}-resize-button`, ((_current$value = current.value) === null || _current$value === void 0 ? void 0 : _current$value.id) === column.id && 'is-active'],
        "onMousedown": e => onMousedown(column, columnIndex, e)
      }, null)]);
    }).filter(Boolean);
    const renderTrList = () => headerRows.value.map((row, rowIndex) => createVNode("tr", {
      "class": `${prefixCls}-row`,
      "key": rowIndex
    }, [renderThList(row)]));
    return () => createVNode("thead", null, [renderTrList()]);
  }
});

export { header as default };