vxe-table-ro-test/lib/table/src/cell.js

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Cell = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _utils = require("../../ui/src/utils");
var _dom = require("../../ui/src/dom");
var _util = require("./util");
var _vn = require("../../ui/src/vn");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const {
  getI18n,
  getIcon,
  renderer,
  formats
} = _ui.VxeUI;
function renderTitlePrefixIcon(params) {
  const {
    $table,
    column
  } = params;
  const titlePrefix = column.titlePrefix || column.titleHelp;
  return titlePrefix ? [(0, _vue.h)('i', {
    class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
    onMouseenter(evnt) {
      $table.triggerHeaderTitleEvent(evnt, titlePrefix, params);
    },
    onMouseleave(evnt) {
      $table.handleTargetLeaveEvent(evnt);
    }
  })] : [];
}
function renderTitleSuffixIcon(params) {
  const {
    $table,
    column
  } = params;
  const titleSuffix = column.titleSuffix;
  return titleSuffix ? [(0, _vue.h)('i', {
    class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
    onMouseenter(evnt) {
      $table.triggerHeaderTitleEvent(evnt, titleSuffix, params);
    },
    onMouseleave(evnt) {
      $table.handleTargetLeaveEvent(evnt);
    }
  })] : [];
}
function renderTitleContent(params, content) {
  const {
    $table,
    column
  } = params;
  const {
    props,
    reactData
  } = $table;
  const {
    computeTooltipOpts
  } = $table.getComputeMaps();
  const {
    showHeaderOverflow: allColumnHeaderOverflow
  } = props;
  const {
    type,
    showHeaderOverflow
  } = column;
  const tooltipOpts = computeTooltipOpts.value;
  const showAllTip = tooltipOpts.showAll;
  const headOverflow = _xeUtils.default.isUndefined(showHeaderOverflow) || _xeUtils.default.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
  const showTitle = headOverflow === 'title';
  const showTooltip = headOverflow === true || headOverflow === 'tooltip';
  const ons = {};
  if (showTitle || showTooltip || showAllTip) {
    ons.onMouseenter = evnt => {
      if (reactData._isResize) {
        return;
      }
      if (showTitle) {
        (0, _dom.updateCellTitle)(evnt.currentTarget, column);
      } else if (showTooltip || showAllTip) {
        $table.triggerHeaderTooltipEvent(evnt, params);
      }
    };
  }
  if (showTooltip || showAllTip) {
    ons.onMouseleave = evnt => {
      if (reactData._isResize) {
        return;
      }
      if (showTooltip || showAllTip) {
        $table.handleTargetLeaveEvent(evnt);
      }
    };
  }
  return [type === 'html' && _xeUtils.default.isString(content) ? (0, _vue.h)('span', Object.assign({
    class: 'vxe-cell--title',
    innerHTML: content
  }, ons)) : (0, _vue.h)('span', Object.assign({
    class: 'vxe-cell--title'
  }, ons), (0, _vn.getSlotVNs)(content))];
}
function formatFooterLabel(footerFormatter, params) {
  if (_xeUtils.default.isFunction(footerFormatter)) {
    return footerFormatter(params);
  }
  const isArr = _xeUtils.default.isArray(footerFormatter);
  const gFormatOpts = isArr ? formats.get(footerFormatter[0]) : formats.get(footerFormatter);
  const footerFormatMethod = gFormatOpts ? gFormatOpts.tableFooterCellFormatMethod : null;
  if (footerFormatMethod) {
    return isArr ? footerFormatMethod(params, ...footerFormatter.slice(1)) : footerFormatMethod(params);
  }
  return '';
}
function getFooterContent(params) {
  const {
    $table,
    column,
    _columnIndex,
    items,
    row
  } = params;
  const {
    slots,
    editRender,
    cellRender,
    footerFormatter
  } = column;
  const renderOpts = editRender || cellRender;
  const footerSlot = slots ? slots.footer : null;
  if (footerSlot) {
    return $table.callSlot(footerSlot, params);
  }
  if (renderOpts) {
    const compConf = renderer.get(renderOpts.name);
    if (compConf) {
      const rtFooter = compConf.renderTableFooter || compConf.renderFooter;
      if (rtFooter) {
        return (0, _vn.getSlotVNs)(rtFooter(renderOpts, params));
      }
    }
  }
  let itemValue = '';
  // 兼容老模式
  if (_xeUtils.default.isArray(items)) {
    itemValue = items[_columnIndex];
    return [footerFormatter ? formatFooterLabel(footerFormatter, {
      itemValue,
      column,
      row,
      items,
      _columnIndex
    }) : (0, _utils.formatText)(itemValue, 1)];
  }
  itemValue = _xeUtils.default.get(row, column.field);
  return [footerFormatter ? formatFooterLabel(footerFormatter, {
    itemValue,
    column,
    row,
    items,
    _columnIndex
  }) : (0, _utils.formatText)(itemValue, 1)];
}
function getDefaultCellLabel(params) {
  const {
    $table,
    row,
    column
  } = params;
  return (0, _utils.formatText)($table.getCellLabel(row, column), 1);
}
const Cell = exports.Cell = {
  createColumn($xeTable, columnOpts) {
    const {
      type,
      sortable,
      filters,
      editRender,
      treeNode
    } = columnOpts;
    const {
      props
    } = $xeTable;
    const {
      editConfig
    } = props;
    const {
      computeEditOpts,
      computeCheckboxOpts
    } = $xeTable.getComputeMaps();
    const checkboxOpts = computeCheckboxOpts.value;
    const editOpts = computeEditOpts.value;
    const renConfs = {
      renderHeader: Cell.renderDefaultHeader,
      renderCell: treeNode ? Cell.renderTreeCell : Cell.renderDefaultCell,
      renderFooter: Cell.renderDefaultFooter
    };
    switch (type) {
      case 'seq':
        renConfs.renderHeader = Cell.renderSeqHeader;
        renConfs.renderCell = treeNode ? Cell.renderTreeIndexCell : Cell.renderSeqCell;
        break;
      case 'radio':
        renConfs.renderHeader = Cell.renderRadioHeader;
        renConfs.renderCell = treeNode ? Cell.renderTreeRadioCell : Cell.renderRadioCell;
        break;
      case 'checkbox':
        renConfs.renderHeader = Cell.renderCheckboxHeader;
        renConfs.renderCell = checkboxOpts.checkField ? treeNode ? Cell.renderTreeSelectionCellByProp : Cell.renderCheckboxCellByProp : treeNode ? Cell.renderTreeSelectionCell : Cell.renderCheckboxCell;
        break;
      case 'expand':
        renConfs.renderCell = Cell.renderExpandCell;
        renConfs.renderData = Cell.renderExpandData;
        break;
      case 'html':
        renConfs.renderCell = treeNode ? Cell.renderTreeHTMLCell : Cell.renderHTMLCell;
        if (filters && sortable) {
          renConfs.renderHeader = Cell.renderSortAndFilterHeader;
        } else if (sortable) {
          renConfs.renderHeader = Cell.renderSortHeader;
        } else if (filters) {
          renConfs.renderHeader = Cell.renderFilterHeader;
        }
        break;
      default:
        if (editConfig && editRender) {
          renConfs.renderHeader = Cell.renderEditHeader;
          renConfs.renderCell = editOpts.mode === 'cell' ? treeNode ? Cell.renderTreeCellEdit : Cell.renderCellEdit : treeNode ? Cell.renderTreeRowEdit : Cell.renderRowEdit;
        } else if (filters && sortable) {
          renConfs.renderHeader = Cell.renderSortAndFilterHeader;
        } else if (sortable) {
          renConfs.renderHeader = Cell.renderSortHeader;
        } else if (filters) {
          renConfs.renderHeader = Cell.renderFilterHeader;
        }
    }
    return (0, _util.createColumn)($xeTable, columnOpts, renConfs);
  },
  /**
   * 单元格
   */
  renderHeaderTitle(params) {
    const {
      $table,
      column
    } = params;
    const {
      slots,
      editRender,
      cellRender
    } = column;
    const renderOpts = editRender || cellRender;
    const headerSlot = slots ? slots.header : null;
    if (headerSlot) {
      return renderTitleContent(params, $table.callSlot(headerSlot, params));
    }
    if (renderOpts) {
      const compConf = renderer.get(renderOpts.name);
      if (compConf) {
        const rtHeader = compConf.renderTableHeader || compConf.renderHeader;
        if (rtHeader) {
          return renderTitleContent(params, (0, _vn.getSlotVNs)(rtHeader(renderOpts, params)));
        }
      }
    }
    return renderTitleContent(params, (0, _utils.formatText)(column.getTitle(), 1));
  },
  renderDefaultHeader(params) {
    return renderTitlePrefixIcon(params).concat(Cell.renderHeaderTitle(params)).concat(renderTitleSuffixIcon(params));
  },
  renderDefaultCell(params) {
    const {
      $table,
      row,
      column
    } = params;
    const {
      slots,
      editRender,
      cellRender
    } = column;
    const renderOpts = editRender || cellRender;
    const defaultSlot = slots ? slots.default : null;
    if (defaultSlot) {
      return $table.callSlot(defaultSlot, params);
    }
    if (renderOpts) {
      const compConf = renderer.get(renderOpts.name);
      if (compConf) {
        const rtCell = compConf.renderTableCell || compConf.renderCell;
        const rtDefault = compConf.renderTableDefault || compConf.renderDefault;
        const renderFn = editRender ? rtCell : rtDefault;
        if (renderFn) {
          return (0, _vn.getSlotVNs)(renderFn(renderOpts, Object.assign({
            $type: editRender ? 'edit' : 'cell'
          }, params)));
        }
      }
    }
    const cellValue = $table.getCellLabel(row, column);
    const cellPlaceholder = editRender ? editRender.placeholder : '';
    return [(0, _vue.h)('span', {
      class: 'vxe-cell--label'
    }, [
    // 如果设置占位符
    editRender && (0, _utils.eqEmptyValue)(cellValue) ? (0, _vue.h)('span', {
      class: 'vxe-cell--placeholder'
    }, (0, _utils.formatText)((0, _utils.getFuncText)(cellPlaceholder), 1)) : (0, _vue.h)('span', (0, _utils.formatText)(cellValue, 1))])];
  },
  renderTreeCell(params) {
    return Cell.renderTreeIcon(params, Cell.renderDefaultCell(params));
  },
  renderDefaultFooter(params) {
    return [(0, _vue.h)('span', {
      class: 'vxe-cell--item'
    }, getFooterContent(params))];
  },
  /**
   * 树节点
   */
  renderTreeIcon(params, cellVNodes) {
    const {
      $table,
      isHidden
    } = params;
    const {
      reactData,
      internalData
    } = $table;
    const {
      computeTreeOpts
    } = $table.getComputeMaps();
    const {
      treeExpandedMaps,
      treeExpandLazyLoadedMaps
    } = reactData;
    const {
      fullAllDataRowIdData
    } = internalData;
    const treeOpts = computeTreeOpts.value;
    const {
      row,
      column,
      level
    } = params;
    const {
      slots
    } = column;
    const {
      indent,
      lazy,
      trigger,
      iconLoaded,
      showIcon,
      iconOpen,
      iconClose
    } = treeOpts;
    const childrenField = treeOpts.children || treeOpts.childrenField;
    const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
    const rowChilds = row[childrenField];
    const hasChild = rowChilds && rowChilds.length;
    const iconSlot = slots ? slots.icon : null;
    let hasLazyChilds = false;
    let isAceived = false;
    let isLazyLoading = false;
    let isLazyLoaded = false;
    const ons = {};
    if (iconSlot) {
      return $table.callSlot(iconSlot, params);
    }
    if (!isHidden) {
      const rowid = (0, _util.getRowid)($table, row);
      isAceived = !!treeExpandedMaps[rowid];
      if (lazy) {
        const rest = fullAllDataRowIdData[rowid];
        isLazyLoading = !!treeExpandLazyLoadedMaps[rowid];
        hasLazyChilds = row[hasChildField];
        isLazyLoaded = !!rest.treeLoaded;
      }
    }
    if (!trigger || trigger === 'default') {
      ons.onClick = evnt => {
        $table.triggerTreeExpandEvent(evnt, params);
      };
    }
    return [(0, _vue.h)('div', {
      class: ['vxe-cell--tree-node', {
        'is--active': isAceived
      }],
      style: {
        paddingLeft: `${level * indent}px`
      }
    }, [showIcon && (lazy ? isLazyLoaded ? hasChild : hasLazyChilds : hasChild) ? [(0, _vue.h)('div', Object.assign({
      class: 'vxe-tree--btn-wrapper'
    }, ons), [(0, _vue.h)('i', {
      class: ['vxe-tree--node-btn', isLazyLoading ? iconLoaded || getIcon().TABLE_TREE_LOADED : isAceived ? iconOpen || getIcon().TABLE_TREE_OPEN : iconClose || getIcon().TABLE_TREE_CLOSE]
    })])] : null, (0, _vue.h)('div', {
      class: 'vxe-tree-cell'
    }, cellVNodes)])];
  },
  /**
   * 索引
   */
  renderSeqHeader(params) {
    const {
      $table,
      column
    } = params;
    const {
      slots
    } = column;
    const headerSlot = slots ? slots.header : null;
    return renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : (0, _utils.formatText)(column.getTitle(), 1));
  },
  renderSeqCell(params) {
    const {
      $table,
      column
    } = params;
    const {
      props
    } = $table;
    const {
      treeConfig
    } = props;
    const {
      computeSeqOpts
    } = $table.getComputeMaps();
    const seqOpts = computeSeqOpts.value;
    const {
      slots
    } = column;
    const defaultSlot = slots ? slots.default : null;
    if (defaultSlot) {
      return $table.callSlot(defaultSlot, params);
    }
    const {
      seq
    } = params;
    const seqMethod = seqOpts.seqMethod;
    return [(0, _utils.formatText)(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)];
  },
  renderTreeIndexCell(params) {
    return Cell.renderTreeIcon(params, Cell.renderSeqCell(params));
  },
  /**
   * 单选
   */
  renderRadioHeader(params) {
    const {
      $table,
      column
    } = params;
    const {
      slots
    } = column;
    const headerSlot = slots ? slots.header : null;
    const titleSlot = slots ? slots.title : null;
    return renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : [(0, _vue.h)('span', {
      class: 'vxe-radio--label'
    }, titleSlot ? $table.callSlot(titleSlot, params) : (0, _utils.formatText)(column.getTitle(), 1))]);
  },
  renderRadioCell(params) {
    const {
      $table,
      column,
      isHidden
    } = params;
    const {
      reactData
    } = $table;
    const {
      computeRadioOpts
    } = $table.getComputeMaps();
    const {
      selectRadioRow
    } = reactData;
    const radioOpts = computeRadioOpts.value;
    const {
      slots
    } = column;
    const {
      labelField,
      checkMethod,
      visibleMethod
    } = radioOpts;
    const {
      row
    } = params;
    const defaultSlot = slots ? slots.default : null;
    const radioSlot = slots ? slots.radio : null;
    const isChecked = $table.eqRow(row, selectRadioRow);
    const isVisible = !visibleMethod || visibleMethod({
      row
    });
    let isDisabled = !!checkMethod;
    let ons;
    if (!isHidden) {
      ons = {
        onClick(evnt) {
          if (!isDisabled && isVisible) {
            $table.triggerRadioRowEvent(evnt, params);
          }
        }
      };
      if (checkMethod) {
        isDisabled = !checkMethod({
          row
        });
      }
    }
    const radioParams = Object.assign(Object.assign({}, params), {
      checked: isChecked,
      disabled: isDisabled,
      visible: isVisible
    });
    if (radioSlot) {
      return $table.callSlot(radioSlot, radioParams);
    }
    const radioVNs = [];
    if (isVisible) {
      radioVNs.push((0, _vue.h)('span', {
        class: ['vxe-radio--icon', isChecked ? getIcon().TABLE_RADIO_CHECKED : getIcon().TABLE_RADIO_UNCHECKED]
      }));
    }
    if (defaultSlot || labelField) {
      radioVNs.push((0, _vue.h)('span', {
        class: 'vxe-radio--label'
      }, defaultSlot ? $table.callSlot(defaultSlot, radioParams) : _xeUtils.default.get(row, labelField)));
    }
    return [(0, _vue.h)('span', Object.assign({
      class: ['vxe-cell--radio', {
        'is--checked': isChecked,
        'is--disabled': isDisabled
      }]
    }, ons), radioVNs)];
  },
  renderTreeRadioCell(params) {
    return Cell.renderTreeIcon(params, Cell.renderRadioCell(params));
  },
  /**
   * 多选
   */
  renderCheckboxHeader(params) {
    const {
      $table,
      column,
      isHidden
    } = params;
    const {
      reactData
    } = $table;
    const {
      computeIsAllCheckboxDisabled,
      computeCheckboxOpts
    } = $table.getComputeMaps();
    const {
      isAllSelected: isAllCheckboxSelected,
      isIndeterminate: isAllCheckboxIndeterminate
    } = reactData;
    const isAllCheckboxDisabled = computeIsAllCheckboxDisabled.value;
    const {
      slots
    } = column;
    const headerSlot = slots ? slots.header : null;
    const titleSlot = slots ? slots.title : null;
    const checkboxOpts = computeCheckboxOpts.value;
    const headerTitle = column.getTitle();
    let ons;
    if (!isHidden) {
      ons = {
        onClick(evnt) {
          if (!isAllCheckboxDisabled) {
            $table.triggerCheckAllEvent(evnt, !isAllCheckboxSelected);
          }
        }
      };
    }
    const checkboxParams = Object.assign(Object.assign({}, params), {
      checked: isAllCheckboxSelected,
      disabled: isAllCheckboxDisabled,
      indeterminate: isAllCheckboxIndeterminate
    });
    if (headerSlot) {
      return renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams));
    }
    if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
      return renderTitleContent(checkboxParams, [(0, _vue.h)('span', {
        class: 'vxe-checkbox--label'
      }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)]);
    }
    return renderTitleContent(checkboxParams, [(0, _vue.h)('span', Object.assign({
      class: ['vxe-cell--checkbox', {
        'is--checked': isAllCheckboxSelected,
        'is--disabled': isAllCheckboxDisabled,
        'is--indeterminate': isAllCheckboxIndeterminate
      }],
      title: getI18n('vxe.table.allTitle')
    }, ons), [(0, _vue.h)('span', {
      class: ['vxe-checkbox--icon', isAllCheckboxIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllCheckboxSelected ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
    })].concat(titleSlot || headerTitle ? [(0, _vue.h)('span', {
      class: 'vxe-checkbox--label'
    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)] : []))]);
  },
  renderCheckboxCell(params) {
    const {
      $table,
      row,
      column,
      isHidden
    } = params;
    const {
      props,
      reactData
    } = $table;
    const {
      treeConfig
    } = props;
    const {
      selectCheckboxMaps,
      treeIndeterminateMaps
    } = reactData;
    const {
      computeCheckboxOpts
    } = $table.getComputeMaps();
    const checkboxOpts = computeCheckboxOpts.value;
    const {
      labelField,
      checkMethod,
      visibleMethod
    } = checkboxOpts;
    const {
      slots
    } = column;
    const defaultSlot = slots ? slots.default : null;
    const checkboxSlot = slots ? slots.checkbox : null;
    let indeterminate = false;
    let isChecked = false;
    const isVisible = !visibleMethod || visibleMethod({
      row
    });
    let isDisabled = !!checkMethod;
    let ons;
    if (!isHidden) {
      const rowid = (0, _util.getRowid)($table, row);
      isChecked = !!selectCheckboxMaps[rowid];
      ons = {
        onClick(evnt) {
          if (!isDisabled && isVisible) {
            $table.triggerCheckRowEvent(evnt, params, !isChecked);
          }
        }
      };
      if (checkMethod) {
        isDisabled = !checkMethod({
          row
        });
      }
      if (treeConfig) {
        indeterminate = !!treeIndeterminateMaps[rowid];
      }
    }
    const checkboxParams = Object.assign(Object.assign({}, params), {
      checked: isChecked,
      disabled: isDisabled,
      visible: isVisible,
      indeterminate
    });
    if (checkboxSlot) {
      return $table.callSlot(checkboxSlot, checkboxParams);
    }
    const checkVNs = [];
    if (isVisible) {
      checkVNs.push((0, _vue.h)('span', {
        class: ['vxe-checkbox--icon', indeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
      }));
    }
    if (defaultSlot || labelField) {
      checkVNs.push((0, _vue.h)('span', {
        class: 'vxe-checkbox--label'
      }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : _xeUtils.default.get(row, labelField)));
    }
    return [(0, _vue.h)('span', Object.assign({
      class: ['vxe-cell--checkbox', {
        'is--checked': isChecked,
        'is--disabled': isDisabled,
        'is--indeterminate': indeterminate,
        'is--hidden': !isVisible
      }]
    }, ons), checkVNs)];
  },
  renderTreeSelectionCell(params) {
    return Cell.renderTreeIcon(params, Cell.renderCheckboxCell(params));
  },
  renderCheckboxCellByProp(params) {
    const {
      $table,
      row,
      column,
      isHidden
    } = params;
    const {
      props,
      reactData
    } = $table;
    const {
      treeConfig
    } = props;
    const {
      treeIndeterminateMaps
    } = reactData;
    const {
      computeCheckboxOpts
    } = $table.getComputeMaps();
    const checkboxOpts = computeCheckboxOpts.value;
    const {
      labelField,
      checkField,
      checkMethod,
      visibleMethod
    } = checkboxOpts;
    const indeterminateField = checkboxOpts.indeterminateField || checkboxOpts.halfField;
    const {
      slots
    } = column;
    const defaultSlot = slots ? slots.default : null;
    const checkboxSlot = slots ? slots.checkbox : null;
    let isIndeterminate = false;
    let isChecked = false;
    const isVisible = !visibleMethod || visibleMethod({
      row
    });
    let isDisabled = !!checkMethod;
    let ons;
    if (!isHidden) {
      const rowid = (0, _util.getRowid)($table, row);
      isChecked = _xeUtils.default.get(row, checkField);
      ons = {
        onClick(evnt) {
          if (!isDisabled && isVisible) {
            $table.triggerCheckRowEvent(evnt, params, !isChecked);
          }
        }
      };
      if (checkMethod) {
        isDisabled = !checkMethod({
          row
        });
      }
      if (treeConfig) {
        isIndeterminate = !!treeIndeterminateMaps[rowid];
      }
    }
    const checkboxParams = Object.assign(Object.assign({}, params), {
      checked: isChecked,
      disabled: isDisabled,
      visible: isVisible,
      indeterminate: isIndeterminate
    });
    if (checkboxSlot) {
      return $table.callSlot(checkboxSlot, checkboxParams);
    }
    const checkVNs = [];
    if (isVisible) {
      checkVNs.push((0, _vue.h)('span', {
        class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
      }));
      if (defaultSlot || labelField) {
        checkVNs.push((0, _vue.h)('span', {
          class: 'vxe-checkbox--label'
        }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : _xeUtils.default.get(row, labelField)));
      }
    }
    return [(0, _vue.h)('span', Object.assign({
      class: ['vxe-cell--checkbox', {
        'is--checked': isChecked,
        'is--disabled': isDisabled,
        'is--indeterminate': indeterminateField && !isChecked ? row[indeterminateField] : isIndeterminate,
        'is--hidden': !isVisible
      }]
    }, ons), checkVNs)];
  },
  renderTreeSelectionCellByProp(params) {
    return Cell.renderTreeIcon(params, Cell.renderCheckboxCellByProp(params));
  },
  /**
   * 展开行
   */
  renderExpandCell(params) {
    const {
      $table,
      isHidden,
      row,
      column
    } = params;
    const {
      reactData
    } = $table;
    const {
      rowExpandedMaps,
      rowExpandLazyLoadedMaps
    } = reactData;
    const {
      computeExpandOpts
    } = $table.getComputeMaps();
    const expandOpts = computeExpandOpts.value;
    const {
      lazy,
      labelField,
      iconLoaded,
      showIcon,
      iconOpen,
      iconClose,
      visibleMethod
    } = expandOpts;
    const {
      slots
    } = column;
    const defaultSlot = slots ? slots.default : null;
    const iconSlot = slots ? slots.icon : null;
    let isAceived = false;
    let isLazyLoading = false;
    if (iconSlot) {
      return $table.callSlot(iconSlot, params);
    }
    if (!isHidden) {
      const rowid = (0, _util.getRowid)($table, row);
      isAceived = !!rowExpandedMaps[rowid];
      if (lazy) {
        isLazyLoading = !!rowExpandLazyLoadedMaps[rowid];
      }
    }
    return [showIcon && (!visibleMethod || visibleMethod(params)) ? (0, _vue.h)('span', {
      class: ['vxe-table--expanded', {
        'is--active': isAceived
      }],
      onClick(evnt) {
        $table.triggerRowExpandEvent(evnt, params);
      }
    }, [(0, _vue.h)('i', {
      class: ['vxe-table--expand-btn', isLazyLoading ? iconLoaded || getIcon().TABLE_EXPAND_LOADED : isAceived ? iconOpen || getIcon().TABLE_EXPAND_OPEN : iconClose || getIcon().TABLE_EXPAND_CLOSE]
    })]) : null, defaultSlot || labelField ? (0, _vue.h)('span', {
      class: 'vxe-table--expand-label'
    }, defaultSlot ? $table.callSlot(defaultSlot, params) : _xeUtils.default.get(row, labelField)) : null];
  },
  renderExpandData(params) {
    const {
      $table,
      column
    } = params;
    const {
      slots,
      contentRender
    } = column;
    const contentSlot = slots ? slots.content : null;
    if (contentSlot) {
      return $table.callSlot(contentSlot, params);
    }
    if (contentRender) {
      const compConf = renderer.get(contentRender.name);
      if (compConf) {
        const rtExpand = compConf.renderTableExpand || compConf.renderExpand;
        if (rtExpand) {
          return (0, _vn.getSlotVNs)(rtExpand(contentRender, params));
        }
      }
    }
    return [];
  },
  /**
   * HTML 标签
   */
  renderHTMLCell(params) {
    const {
      $table,
      column
    } = params;
    const {
      slots
    } = column;
    const defaultSlot = slots ? slots.default : null;
    if (defaultSlot) {
      return $table.callSlot(defaultSlot, params);
    }
    return [(0, _vue.h)('span', {
      class: 'vxe-cell--html',
      innerHTML: getDefaultCellLabel(params)
    })];
  },
  renderTreeHTMLCell(params) {
    return Cell.renderTreeIcon(params, Cell.renderHTMLCell(params));
  },
  /**
   * 排序和筛选
   */
  renderSortAndFilterHeader(params) {
    return Cell.renderDefaultHeader(params).concat(Cell.renderSortIcon(params)).concat(Cell.renderFilterIcon(params));
  },
  /**
   * 排序
   */
  renderSortHeader(params) {
    return Cell.renderDefaultHeader(params).concat(Cell.renderSortIcon(params));
  },
  renderSortIcon(params) {
    const {
      $table,
      column
    } = params;
    const {
      computeSortOpts
    } = $table.getComputeMaps();
    const sortOpts = computeSortOpts.value;
    const {
      showIcon,
      iconLayout,
      iconAsc,
      iconDesc
    } = sortOpts;
    const {
      order
    } = column;
    if (showIcon) {
      return [(0, _vue.h)('span', {
        class: ['vxe-cell--sort', `vxe-cell--sort-${iconLayout}-layout`]
      }, [(0, _vue.h)('i', {
        class: ['vxe-sort--asc-btn', iconAsc || getIcon().TABLE_SORT_ASC, {
          'sort--active': order === 'asc'
        }],
        title: getI18n('vxe.table.sortAsc'),
        onClick(evnt) {
          evnt.stopPropagation();
          $table.triggerSortEvent(evnt, column, 'asc');
        }
      }), (0, _vue.h)('i', {
        class: ['vxe-sort--desc-btn', iconDesc || getIcon().TABLE_SORT_DESC, {
          'sort--active': order === 'desc'
        }],
        title: getI18n('vxe.table.sortDesc'),
        onClick(evnt) {
          evnt.stopPropagation();
          $table.triggerSortEvent(evnt, column, 'desc');
        }
      })])];
    }
    return [];
  },
  /**
   * 筛选
   */
  renderFilterHeader(params) {
    return Cell.renderDefaultHeader(params).concat(Cell.renderFilterIcon(params));
  },
  renderFilterIcon(params) {
    const {
      $table,
      column,
      hasFilter
    } = params;
    const {
      reactData
    } = $table;
    const {
      filterStore
    } = reactData;
    const {
      computeFilterOpts
    } = $table.getComputeMaps();
    const filterOpts = computeFilterOpts.value;
    const {
      showIcon,
      iconNone,
      iconMatch
    } = filterOpts;
    return showIcon ? [(0, _vue.h)('span', {
      class: ['vxe-cell--filter', {
        'is--active': filterStore.visible && filterStore.column === column
      }]
    }, [(0, _vue.h)('i', {
      class: ['vxe-filter--btn', hasFilter ? iconMatch || getIcon().TABLE_FILTER_MATCH : iconNone || getIcon().TABLE_FILTER_NONE],
      title: getI18n('vxe.table.filter'),
      onClick(evnt) {
        if ($table.triggerFilterEvent) {
          $table.triggerFilterEvent(evnt, params.column, params);
        }
      }
    })])] : [];
  },
  /**
   * 可编辑
   */
  renderEditHeader(params) {
    const {
      $table,
      column
    } = params;
    const {
      props
    } = $table;
    const {
      computeEditOpts
    } = $table.getComputeMaps();
    const {
      editConfig,
      editRules
    } = props;
    const editOpts = computeEditOpts.value;
    const {
      sortable,
      filters,
      editRender
    } = column;
    let isRequired = false;
    if (editRules) {
      const columnRules = _xeUtils.default.get(editRules, column.field);
      if (columnRules) {
        isRequired = columnRules.some(rule => rule.required);
      }
    }
    return ((0, _utils.isEnableConf)(editConfig) ? [isRequired && editOpts.showAsterisk ? (0, _vue.h)('i', {
      class: 'vxe-cell--required-icon'
    }) : null, (0, _utils.isEnableConf)(editRender) && editOpts.showIcon ? (0, _vue.h)('i', {
      class: ['vxe-cell--edit-icon', editOpts.icon || getIcon().TABLE_EDIT]
    }) : null] : []).concat(Cell.renderDefaultHeader(params)).concat(sortable ? Cell.renderSortIcon(params) : []).concat(filters ? Cell.renderFilterIcon(params) : []);
  },
  // 行格编辑模式
  renderRowEdit(params) {
    const {
      $table,
      column
    } = params;
    const {
      reactData
    } = $table;
    const {
      editStore
    } = reactData;
    const {
      actived
    } = editStore;
    const {
      editRender
    } = column;
    return Cell.runRenderer(params, (0, _utils.isEnableConf)(editRender) && actived && actived.row === params.row);
  },
  renderTreeRowEdit(params) {
    return Cell.renderTreeIcon(params, Cell.renderRowEdit(params));
  },
  // 单元格编辑模式
  renderCellEdit(params) {
    const {
      $table,
      column
    } = params;
    const {
      reactData
    } = $table;
    const {
      editStore
    } = reactData;
    const {
      actived
    } = editStore;
    const {
      editRender
    } = column;
    return Cell.runRenderer(params, (0, _utils.isEnableConf)(editRender) && actived && actived.row === params.row && actived.column === params.column);
  },
  renderTreeCellEdit(params) {
    return Cell.renderTreeIcon(params, Cell.renderCellEdit(params));
  },
  runRenderer(params, isEdit) {
    const {
      $table,
      column
    } = params;
    const {
      slots,
      editRender,
      formatter
    } = column;
    const defaultSlot = slots ? slots.default : null;
    const editSlot = slots ? slots.edit : null;
    const compConf = renderer.get(editRender.name);
    const rtEdit = compConf ? compConf.renderTableEdit || compConf.renderEdit : null;
    const cellParams = Object.assign({
      $type: '',
      isEdit
    }, params);
    if (isEdit) {
      cellParams.$type = 'edit';
      if (editSlot) {
        return $table.callSlot(editSlot, cellParams);
      }
      if (rtEdit) {
        return (0, _vn.getSlotVNs)(rtEdit(editRender, cellParams));
      }
      return [];
    }
    if (defaultSlot) {
      return $table.callSlot(defaultSlot, cellParams);
    }
    if (formatter) {
      return [(0, _vue.h)('span', {
        class: 'vxe-cell--label'
      }, getDefaultCellLabel(cellParams))];
    }
    return Cell.renderDefaultCell(cellParams);
  }
};
var _default = exports.default = Cell;