vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
796 lines (795 loc) • 36.1 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { h } from 'vue';
import XEUtils from 'xe-utils';
import GlobalConfig from '../../v-x-e-table/src/conf';
import { VXETable } from '../../v-x-e-table';
import { getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../tools/utils';
import { updateCellTitle } from '../../tools/dom';
import { createColumn, getRowid } from './util';
import { getSlotVNs } from '../../tools/vn';
function renderTitlePrefixIcon(params) {
var $table = params.$table, column = params.column;
var titlePrefix = column.titlePrefix || column.titleHelp;
return titlePrefix ? [
h('i', {
class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || GlobalConfig.icon.TABLE_TITLE_PREFIX],
onMouseenter: function (evnt) {
$table.triggerHeaderTitleEvent(evnt, titlePrefix, params);
},
onMouseleave: function (evnt) {
$table.handleTargetLeaveEvent(evnt);
}
})
] : [];
}
function renderTitleSuffixIcon(params) {
var $table = params.$table, column = params.column;
var titleSuffix = column.titleSuffix;
return titleSuffix ? [
h('i', {
class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || GlobalConfig.icon.TABLE_TITLE_SUFFIX],
onMouseenter: function (evnt) {
$table.triggerHeaderTitleEvent(evnt, titleSuffix, params);
},
onMouseleave: function (evnt) {
$table.handleTargetLeaveEvent(evnt);
}
})
] : [];
}
function renderTitleContent(params, content) {
var $table = params.$table, column = params.column;
var props = $table.props, reactData = $table.reactData;
var computeTooltipOpts = $table.getComputeMaps().computeTooltipOpts;
var allColumnHeaderOverflow = props.showHeaderOverflow;
var type = column.type, showHeaderOverflow = column.showHeaderOverflow;
var tooltipOpts = computeTooltipOpts.value;
var showAllTip = tooltipOpts.showAll;
var headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
var showTitle = headOverflow === 'title';
var showTooltip = headOverflow === true || headOverflow === 'tooltip';
var ons = {};
if (showTitle || showTooltip || showAllTip) {
ons.onMouseenter = function (evnt) {
if (reactData._isResize) {
return;
}
if (showTitle) {
updateCellTitle(evnt.currentTarget, column);
}
else if (showTooltip || showAllTip) {
$table.triggerHeaderTooltipEvent(evnt, params);
}
};
}
if (showTooltip || showAllTip) {
ons.onMouseleave = function (evnt) {
if (reactData._isResize) {
return;
}
if (showTooltip || showAllTip) {
$table.handleTargetLeaveEvent(evnt);
}
};
}
return [
type === 'html' && XEUtils.isString(content) ? h('span', __assign({ class: 'vxe-cell--title', innerHTML: content }, ons)) : h('span', __assign({ class: 'vxe-cell--title' }, ons), getSlotVNs(content))
];
}
function getFooterContent(params) {
var $table = params.$table, column = params.column, _columnIndex = params._columnIndex, items = params.items;
var slots = column.slots, editRender = column.editRender, cellRender = column.cellRender;
var renderOpts = editRender || cellRender;
var footerSlot = slots ? slots.footer : null;
if (footerSlot) {
return $table.callSlot(footerSlot, params);
}
if (renderOpts) {
var compConf = VXETable.renderer.get(renderOpts.name);
if (compConf && compConf.renderFooter) {
return getSlotVNs(compConf.renderFooter(renderOpts, params));
}
}
return [formatText(items[_columnIndex], 1)];
}
function getDefaultCellLabel(params) {
var $table = params.$table, row = params.row, column = params.column;
return formatText($table.getCellLabel(row, column), 1);
}
export var Cell = {
createColumn: function ($xetable, columnOpts) {
var type = columnOpts.type, sortable = columnOpts.sortable, filters = columnOpts.filters, editRender = columnOpts.editRender, treeNode = columnOpts.treeNode;
var props = $xetable.props;
var editConfig = props.editConfig;
var _a = $xetable.getComputeMaps(), computeEditOpts = _a.computeEditOpts, computeCheckboxOpts = _a.computeCheckboxOpts;
var checkboxOpts = computeCheckboxOpts.value;
var editOpts = computeEditOpts.value;
var 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 createColumn($xetable, columnOpts, renConfs);
},
/**
* 单元格
*/
renderHeaderTitle: function (params) {
var $table = params.$table, column = params.column;
var slots = column.slots, editRender = column.editRender, cellRender = column.cellRender;
var renderOpts = editRender || cellRender;
var headerSlot = slots ? slots.header : null;
if (headerSlot) {
return renderTitleContent(params, $table.callSlot(headerSlot, params));
}
if (renderOpts) {
var compConf = VXETable.renderer.get(renderOpts.name);
if (compConf && compConf.renderHeader) {
return renderTitleContent(params, getSlotVNs(compConf.renderHeader(renderOpts, params)));
}
}
return renderTitleContent(params, formatText(column.getTitle(), 1));
},
renderDefaultHeader: function (params) {
return renderTitlePrefixIcon(params).concat(Cell.renderHeaderTitle(params)).concat(renderTitleSuffixIcon(params));
},
renderDefaultCell: function (params) {
var $table = params.$table, row = params.row, column = params.column;
var slots = column.slots, editRender = column.editRender, cellRender = column.cellRender;
var renderOpts = editRender || cellRender;
var defaultSlot = slots ? slots.default : null;
if (defaultSlot) {
return $table.callSlot(defaultSlot, params);
}
if (renderOpts) {
var funName = editRender ? 'renderCell' : 'renderDefault';
var compConf = VXETable.renderer.get(renderOpts.name);
var compFn = compConf ? compConf[funName] : null;
if (compFn) {
return getSlotVNs(compFn(renderOpts, Object.assign({ $type: editRender ? 'edit' : 'cell' }, params)));
}
}
var cellValue = $table.getCellLabel(row, column);
var cellPlaceholder = editRender ? editRender.placeholder : '';
return [
h('span', {
class: 'vxe-cell--label'
}, editRender && eqEmptyValue(cellValue) ? [
// 如果设置占位符
h('span', {
class: 'vxe-cell--placeholder'
}, formatText(getFuncText(cellPlaceholder), 1))
] : formatText(cellValue, 1))
];
},
renderTreeCell: function (params) {
return Cell.renderTreeIcon(params, Cell.renderDefaultCell(params));
},
renderDefaultFooter: function (params) {
return [
h('span', {
class: 'vxe-cell--item'
}, getFooterContent(params))
];
},
/**
* 树节点
*/
renderTreeIcon: function (params, cellVNodes) {
var $table = params.$table, isHidden = params.isHidden;
var reactData = $table.reactData;
var computeTreeOpts = $table.getComputeMaps().computeTreeOpts;
var treeExpandedMaps = reactData.treeExpandedMaps, treeExpandLazyLoadedMaps = reactData.treeExpandLazyLoadedMaps;
var treeOpts = computeTreeOpts.value;
var row = params.row, column = params.column, level = params.level;
var slots = column.slots;
var indent = treeOpts.indent, lazy = treeOpts.lazy, trigger = treeOpts.trigger, iconLoaded = treeOpts.iconLoaded, showIcon = treeOpts.showIcon, iconOpen = treeOpts.iconOpen, iconClose = treeOpts.iconClose;
var childrenField = treeOpts.children || treeOpts.childrenField;
var hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
var rowChilds = row[childrenField];
var iconSlot = slots ? slots.icon : null;
var hasLazyChilds = false;
var isAceived = false;
var isLazyLoaded = false;
var ons = {};
if (iconSlot) {
return $table.callSlot(iconSlot, params);
}
if (!isHidden) {
var rowid = getRowid($table, row);
isAceived = !!treeExpandedMaps[rowid];
if (lazy) {
isLazyLoaded = !!treeExpandLazyLoadedMaps[rowid];
hasLazyChilds = row[hasChildField];
}
}
if (!trigger || trigger === 'default') {
ons.onClick = function (evnt) {
evnt.stopPropagation();
$table.triggerTreeExpandEvent(evnt, params);
};
}
return [
h('div', {
class: ['vxe-cell--tree-node', {
'is--active': isAceived
}],
style: {
paddingLeft: "".concat(level * indent, "px")
}
}, [
showIcon && ((rowChilds && rowChilds.length) || hasLazyChilds) ? [
h('div', __assign({ class: 'vxe-tree--btn-wrapper' }, ons), [
h('i', {
class: ['vxe-tree--node-btn', isLazyLoaded ? (iconLoaded || GlobalConfig.icon.TABLE_TREE_LOADED) : (isAceived ? (iconOpen || GlobalConfig.icon.TABLE_TREE_OPEN) : (iconClose || GlobalConfig.icon.TABLE_TREE_CLOSE))]
})
])
] : null,
h('div', {
class: 'vxe-tree-cell'
}, cellVNodes)
])
];
},
/**
* 索引
*/
renderSeqHeader: function (params) {
var $table = params.$table, column = params.column;
var slots = column.slots;
var headerSlot = slots ? slots.header : null;
return renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : formatText(column.getTitle(), 1));
},
renderSeqCell: function (params) {
var $table = params.$table, column = params.column;
var props = $table.props;
var treeConfig = props.treeConfig;
var computeSeqOpts = $table.getComputeMaps().computeSeqOpts;
var seqOpts = computeSeqOpts.value;
var slots = column.slots;
var defaultSlot = slots ? slots.default : null;
if (defaultSlot) {
return $table.callSlot(defaultSlot, params);
}
var seq = params.seq;
var seqMethod = seqOpts.seqMethod;
return [formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)];
},
renderTreeIndexCell: function (params) {
return Cell.renderTreeIcon(params, Cell.renderSeqCell(params));
},
/**
* 单选
*/
renderRadioHeader: function (params) {
var $table = params.$table, column = params.column;
var slots = column.slots;
var headerSlot = slots ? slots.header : null;
var titleSlot = slots ? slots.title : null;
return renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : [
h('span', {
class: 'vxe-radio--label'
}, titleSlot ? $table.callSlot(titleSlot, params) : formatText(column.getTitle(), 1))
]);
},
renderRadioCell: function (params) {
var $table = params.$table, column = params.column, isHidden = params.isHidden;
var reactData = $table.reactData;
var computeRadioOpts = $table.getComputeMaps().computeRadioOpts;
var selectRadioRow = reactData.selectRadioRow;
var radioOpts = computeRadioOpts.value;
var slots = column.slots;
var labelField = radioOpts.labelField, checkMethod = radioOpts.checkMethod, visibleMethod = radioOpts.visibleMethod;
var row = params.row;
var defaultSlot = slots ? slots.default : null;
var radioSlot = slots ? slots.radio : null;
var isChecked = $table.eqRow(row, selectRadioRow);
var isVisible = !visibleMethod || visibleMethod({ row: row });
var isDisabled = !!checkMethod;
var ons;
if (!isHidden) {
ons = {
onClick: function (evnt) {
if (!isDisabled && isVisible) {
evnt.stopPropagation();
$table.triggerRadioRowEvent(evnt, params);
}
}
};
if (checkMethod) {
isDisabled = !checkMethod({ row: row });
}
}
var radioParams = __assign(__assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible });
if (radioSlot) {
return $table.callSlot(radioSlot, radioParams);
}
var radioVNs = [];
if (isVisible) {
radioVNs.push(h('span', {
class: ['vxe-radio--icon', isChecked ? GlobalConfig.icon.TABLE_RADIO_CHECKED : GlobalConfig.icon.TABLE_RADIO_UNCHECKED]
}));
}
if (defaultSlot || labelField) {
radioVNs.push(h('span', {
class: 'vxe-radio--label'
}, defaultSlot ? $table.callSlot(defaultSlot, radioParams) : XEUtils.get(row, labelField)));
}
return [
h('span', __assign({ class: ['vxe-cell--radio', {
'is--checked': isChecked,
'is--disabled': isDisabled
}] }, ons), radioVNs)
];
},
renderTreeRadioCell: function (params) {
return Cell.renderTreeIcon(params, Cell.renderRadioCell(params));
},
/**
* 多选
*/
renderCheckboxHeader: function (params) {
var $table = params.$table, column = params.column, isHidden = params.isHidden;
var reactData = $table.reactData;
var _a = $table.getComputeMaps(), computeIsAllCheckboxDisabled = _a.computeIsAllCheckboxDisabled, computeCheckboxOpts = _a.computeCheckboxOpts;
var isAllCheckboxSelected = reactData.isAllSelected, treeIndeterminateMaps = reactData.treeIndeterminateMaps, isAllCheckboxIndeterminate = reactData.isIndeterminate;
var isAllCheckboxDisabled = computeIsAllCheckboxDisabled.value;
var slots = column.slots;
var headerSlot = slots ? slots.header : null;
var titleSlot = slots ? slots.title : null;
var checkboxOpts = computeCheckboxOpts.value;
var headerTitle = column.getTitle();
var ons;
if (!isHidden) {
ons = {
onClick: function (evnt) {
if (!isAllCheckboxDisabled) {
evnt.stopPropagation();
$table.triggerCheckAllEvent(evnt, !isAllCheckboxSelected);
}
}
};
}
var checkboxParams = __assign(__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, [
h('span', {
class: 'vxe-checkbox--label'
}, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
]);
}
return renderTitleContent(checkboxParams, [
h('span', __assign({ class: ['vxe-cell--checkbox', {
'is--checked': isAllCheckboxSelected,
'is--disabled': isAllCheckboxDisabled,
'is--indeterminate': isAllCheckboxIndeterminate || Object.keys(treeIndeterminateMaps).length > 0
}], title: GlobalConfig.i18n('vxe.table.allTitle') }, ons), [
h('span', {
class: ['vxe-checkbox--icon', (isAllCheckboxIndeterminate || Object.keys(treeIndeterminateMaps).length > 0) ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isAllCheckboxSelected ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
})
].concat(titleSlot || headerTitle ? [
h('span', {
class: 'vxe-checkbox--label'
}, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)
] : []))
]);
},
renderCheckboxCell: function (params) {
var $table = params.$table, row = params.row, column = params.column, isHidden = params.isHidden;
var props = $table.props, reactData = $table.reactData;
var treeConfig = props.treeConfig;
var selectCheckboxMaps = reactData.selectCheckboxMaps, treeIndeterminateMaps = reactData.treeIndeterminateMaps;
var computeCheckboxOpts = $table.getComputeMaps().computeCheckboxOpts;
var checkboxOpts = computeCheckboxOpts.value;
var labelField = checkboxOpts.labelField, checkMethod = checkboxOpts.checkMethod, visibleMethod = checkboxOpts.visibleMethod;
var slots = column.slots;
var defaultSlot = slots ? slots.default : null;
var checkboxSlot = slots ? slots.checkbox : null;
var indeterminate = false;
var isChecked = false;
var isVisible = !visibleMethod || visibleMethod({ row: row });
var isDisabled = !!checkMethod;
var ons;
if (!isHidden) {
var rowid = getRowid($table, row);
isChecked = !!selectCheckboxMaps[rowid];
ons = {
onClick: function (evnt) {
if (!isDisabled && isVisible) {
evnt.stopPropagation();
$table.triggerCheckRowEvent(evnt, params, !isChecked);
}
}
};
if (checkMethod) {
isDisabled = !checkMethod({ row: row });
}
if (treeConfig) {
indeterminate = !!treeIndeterminateMaps[rowid];
}
}
var checkboxParams = __assign(__assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: indeterminate });
if (checkboxSlot) {
return $table.callSlot(checkboxSlot, checkboxParams);
}
var checkVNs = [];
if (isVisible) {
checkVNs.push(h('span', {
class: ['vxe-checkbox--icon', indeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
}));
}
if (defaultSlot || labelField) {
checkVNs.push(h('span', {
class: 'vxe-checkbox--label'
}, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : XEUtils.get(row, labelField)));
}
return [
h('span', __assign({ class: ['vxe-cell--checkbox', {
'is--checked': isChecked,
'is--disabled': isDisabled,
'is--indeterminate': indeterminate
}] }, ons), checkVNs)
];
},
renderTreeSelectionCell: function (params) {
return Cell.renderTreeIcon(params, Cell.renderCheckboxCell(params));
},
renderCheckboxCellByProp: function (params) {
var $table = params.$table, row = params.row, column = params.column, isHidden = params.isHidden;
var props = $table.props, reactData = $table.reactData;
var treeConfig = props.treeConfig;
var treeIndeterminateMaps = reactData.treeIndeterminateMaps;
var computeCheckboxOpts = $table.getComputeMaps().computeCheckboxOpts;
var checkboxOpts = computeCheckboxOpts.value;
var labelField = checkboxOpts.labelField, checkField = checkboxOpts.checkField, checkMethod = checkboxOpts.checkMethod, visibleMethod = checkboxOpts.visibleMethod;
var indeterminateField = checkboxOpts.indeterminateField || checkboxOpts.halfField;
var slots = column.slots;
var defaultSlot = slots ? slots.default : null;
var checkboxSlot = slots ? slots.checkbox : null;
var isIndeterminate = false;
var isChecked = false;
var isVisible = !visibleMethod || visibleMethod({ row: row });
var isDisabled = !!checkMethod;
var ons;
if (!isHidden) {
var rowid = getRowid($table, row);
isChecked = XEUtils.get(row, checkField);
ons = {
onClick: function (evnt) {
if (!isDisabled && isVisible) {
evnt.stopPropagation();
$table.triggerCheckRowEvent(evnt, params, !isChecked);
}
}
};
if (checkMethod) {
isDisabled = !checkMethod({ row: row });
}
if (treeConfig) {
isIndeterminate = !!treeIndeterminateMaps[rowid];
}
}
var checkboxParams = __assign(__assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: isIndeterminate });
if (checkboxSlot) {
return $table.callSlot(checkboxSlot, checkboxParams);
}
var checkVNs = [];
if (isVisible) {
checkVNs.push(h('span', {
class: ['vxe-checkbox--icon', isIndeterminate ? GlobalConfig.icon.TABLE_CHECKBOX_INDETERMINATE : (isChecked ? GlobalConfig.icon.TABLE_CHECKBOX_CHECKED : GlobalConfig.icon.TABLE_CHECKBOX_UNCHECKED)]
}));
if (defaultSlot || labelField) {
checkVNs.push(h('span', {
class: 'vxe-checkbox--label'
}, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : XEUtils.get(row, labelField)));
}
}
return [
h('span', __assign({ class: ['vxe-cell--checkbox', {
'is--checked': isChecked,
'is--disabled': isDisabled,
'is--indeterminate': indeterminateField && !isChecked ? row[indeterminateField] : isIndeterminate
}] }, ons), checkVNs)
];
},
renderTreeSelectionCellByProp: function (params) {
return Cell.renderTreeIcon(params, Cell.renderCheckboxCellByProp(params));
},
/**
* 展开行
*/
renderExpandCell: function (params) {
var $table = params.$table, isHidden = params.isHidden, row = params.row, column = params.column;
var reactData = $table.reactData;
var rowExpandedMaps = reactData.rowExpandedMaps, rowExpandLazyLoadedMaps = reactData.rowExpandLazyLoadedMaps;
var computeExpandOpts = $table.getComputeMaps().computeExpandOpts;
var expandOpts = computeExpandOpts.value;
var lazy = expandOpts.lazy, labelField = expandOpts.labelField, iconLoaded = expandOpts.iconLoaded, showIcon = expandOpts.showIcon, iconOpen = expandOpts.iconOpen, iconClose = expandOpts.iconClose, visibleMethod = expandOpts.visibleMethod;
var slots = column.slots;
var defaultSlot = slots ? slots.default : null;
var iconSlot = slots ? slots.icon : null;
var isAceived = false;
var isLazyLoaded = false;
if (iconSlot) {
return $table.callSlot(iconSlot, params);
}
if (!isHidden) {
var rowid = getRowid($table, row);
isAceived = !!rowExpandedMaps[rowid];
if (lazy) {
isLazyLoaded = !!rowExpandLazyLoadedMaps[rowid];
}
}
return [
showIcon && (!visibleMethod || visibleMethod(params)) ? h('span', {
class: ['vxe-table--expanded', {
'is--active': isAceived
}],
onClick: function (evnt) {
evnt.stopPropagation();
$table.triggerRowExpandEvent(evnt, params);
}
}, [
h('i', {
class: ['vxe-table--expand-btn', isLazyLoaded ? (iconLoaded || GlobalConfig.icon.TABLE_EXPAND_LOADED) : (isAceived ? (iconOpen || GlobalConfig.icon.TABLE_EXPAND_OPEN) : (iconClose || GlobalConfig.icon.TABLE_EXPAND_CLOSE))]
})
]) : null,
defaultSlot || labelField ? h('span', {
class: 'vxe-table--expand-label'
}, defaultSlot ? $table.callSlot(defaultSlot, params) : XEUtils.get(row, labelField)) : null
];
},
renderExpandData: function (params) {
var $table = params.$table, column = params.column;
var slots = column.slots, contentRender = column.contentRender;
var contentSlot = slots ? slots.content : null;
if (contentSlot) {
return $table.callSlot(contentSlot, params);
}
if (contentRender) {
var compConf = VXETable.renderer.get(contentRender.name);
if (compConf && compConf.renderExpand) {
return getSlotVNs(compConf.renderExpand(contentRender, params));
}
}
return [];
},
/**
* HTML 标签
*/
renderHTMLCell: function (params) {
var $table = params.$table, column = params.column;
var slots = column.slots;
var defaultSlot = slots ? slots.default : null;
if (defaultSlot) {
return $table.callSlot(defaultSlot, params);
}
return [
h('span', {
class: 'vxe-cell--html',
innerHTML: getDefaultCellLabel(params)
})
];
},
renderTreeHTMLCell: function (params) {
return Cell.renderTreeIcon(params, Cell.renderHTMLCell(params));
},
/**
* 排序和筛选
*/
renderSortAndFilterHeader: function (params) {
return Cell.renderDefaultHeader(params)
.concat(Cell.renderSortIcon(params))
.concat(Cell.renderFilterIcon(params));
},
/**
* 排序
*/
renderSortHeader: function (params) {
return Cell.renderDefaultHeader(params).concat(Cell.renderSortIcon(params));
},
renderSortIcon: function (params) {
var $table = params.$table, column = params.column;
var computeSortOpts = $table.getComputeMaps().computeSortOpts;
var sortOpts = computeSortOpts.value;
var showIcon = sortOpts.showIcon, iconLayout = sortOpts.iconLayout, iconAsc = sortOpts.iconAsc, iconDesc = sortOpts.iconDesc;
var order = column.order;
if (showIcon) {
return [
h('span', {
class: ['vxe-cell--sort', "vxe-cell--sort-".concat(iconLayout, "-layout")]
}, [
h('i', {
class: ['vxe-sort--asc-btn', iconAsc || GlobalConfig.icon.TABLE_SORT_ASC, {
'sort--active': order === 'asc'
}],
title: GlobalConfig.i18n('vxe.table.sortAsc'),
onClick: function (evnt) {
evnt.stopPropagation();
$table.triggerSortEvent(evnt, column, 'asc');
}
}),
h('i', {
class: ['vxe-sort--desc-btn', iconDesc || GlobalConfig.icon.TABLE_SORT_DESC, {
'sort--active': order === 'desc'
}],
title: GlobalConfig.i18n('vxe.table.sortDesc'),
onClick: function (evnt) {
evnt.stopPropagation();
$table.triggerSortEvent(evnt, column, 'desc');
}
})
])
];
}
return [];
},
/**
* 筛选
*/
renderFilterHeader: function (params) {
return Cell.renderDefaultHeader(params).concat(Cell.renderFilterIcon(params));
},
renderFilterIcon: function (params) {
var $table = params.$table, column = params.column, hasFilter = params.hasFilter;
var reactData = $table.reactData;
var filterStore = reactData.filterStore;
var computeFilterOpts = $table.getComputeMaps().computeFilterOpts;
var filterOpts = computeFilterOpts.value;
var showIcon = filterOpts.showIcon, iconNone = filterOpts.iconNone, iconMatch = filterOpts.iconMatch;
return showIcon ? [
h('span', {
class: ['vxe-cell--filter', {
'is--active': filterStore.visible && filterStore.column === column
}]
}, [
h('i', {
class: ['vxe-filter--btn', hasFilter ? (iconMatch || GlobalConfig.icon.TABLE_FILTER_MATCH) : (iconNone || GlobalConfig.icon.TABLE_FILTER_NONE)],
title: GlobalConfig.i18n('vxe.table.filter'),
onClick: function (evnt) {
if ($table.triggerFilterEvent) {
$table.triggerFilterEvent(evnt, params.column, params);
}
}
})
])
] : [];
},
/**
* 可编辑
*/
renderEditHeader: function (params) {
var $table = params.$table, column = params.column;
var props = $table.props;
var computeEditOpts = $table.getComputeMaps().computeEditOpts;
var editConfig = props.editConfig, editRules = props.editRules;
var editOpts = computeEditOpts.value;
var sortable = column.sortable, filters = column.filters, editRender = column.editRender;
var isRequired = false;
if (editRules) {
var columnRules = XEUtils.get(editRules, column.field);
if (columnRules) {
isRequired = columnRules.some(function (rule) { return rule.required; });
}
}
return (isEnableConf(editConfig) ? [
isRequired && editOpts.showAsterisk ? h('i', {
class: 'vxe-cell--required-icon'
}) : null,
isEnableConf(editRender) && editOpts.showIcon ? h('i', {
class: ['vxe-cell--edit-icon', editOpts.icon || GlobalConfig.icon.TABLE_EDIT]
}) : null
] : []).concat(Cell.renderDefaultHeader(params))
.concat(sortable ? Cell.renderSortIcon(params) : [])
.concat(filters ? Cell.renderFilterIcon(params) : []);
},
// 行格编辑模式
renderRowEdit: function (params) {
var $table = params.$table, column = params.column;
var reactData = $table.reactData;
var editStore = reactData.editStore;
var actived = editStore.actived;
var editRender = column.editRender;
return Cell.runRenderer(params, isEnableConf(editRender) && actived && actived.row === params.row);
},
renderTreeRowEdit: function (params) {
return Cell.renderTreeIcon(params, Cell.renderRowEdit(params));
},
// 单元格编辑模式
renderCellEdit: function (params) {
var $table = params.$table, column = params.column;
var reactData = $table.reactData;
var editStore = reactData.editStore;
var actived = editStore.actived;
var editRender = column.editRender;
return Cell.runRenderer(params, isEnableConf(editRender) && actived && actived.row === params.row && actived.column === params.column);
},
renderTreeCellEdit: function (params) {
return Cell.renderTreeIcon(params, Cell.renderCellEdit(params));
},
runRenderer: function (params, isEdit) {
var $table = params.$table, column = params.column;
var slots = column.slots, editRender = column.editRender, formatter = column.formatter;
var defaultSlot = slots ? slots.default : null;
var editSlot = slots ? slots.edit : null;
var compConf = VXETable.renderer.get(editRender.name);
if (isEdit) {
if (editSlot) {
return $table.callSlot(editSlot, params);
}
if (compConf && compConf.renderEdit) {
return getSlotVNs(compConf.renderEdit(editRender, Object.assign({ $type: 'edit' }, params)));
}
return [];
}
if (defaultSlot) {
return $table.callSlot(defaultSlot, params);
}
if (formatter) {
return [
h('span', {
class: 'vxe-cell--label'
}, getDefaultCellLabel(params))
];
}
return Cell.renderDefaultCell(params);
}
};
export default Cell;