ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
232 lines (205 loc) • 8.74 kB
JavaScript
import { isVNode as _isVNode, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { inject } from 'vue';
import PropTypes, { withUndefined } from '../../_util/vue-types';
import classNames from '../../_util/classNames';
import ColGroup from './ColGroup';
import TableHeader from './TableHeader';
import TableRow from './TableRow';
import ExpandableRow from './ExpandableRow';
import { connect } from '../../_util/store';
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
}
function noop() {}
var BaseTable = {
name: 'BaseTable',
inheritAttrs: false,
props: {
fixed: withUndefined(PropTypes.oneOfType([PropTypes.string, PropTypes.looseBool])),
columns: PropTypes.array.isRequired,
tableClassName: PropTypes.string.isRequired,
hasHead: PropTypes.looseBool.isRequired,
hasBody: PropTypes.looseBool.isRequired,
store: PropTypes.object.isRequired,
expander: PropTypes.object.isRequired,
getRowKey: PropTypes.func,
isAnyColumnsFixed: PropTypes.looseBool
},
setup: function setup() {
return {
table: inject('table', {})
};
},
methods: {
getColumns: function getColumns(cols) {
var _this$$props = this.$props,
_this$$props$columns = _this$$props.columns,
columns = _this$$props$columns === void 0 ? [] : _this$$props$columns,
fixed = _this$$props.fixed;
var table = this.table;
var prefixCls = table.$props.prefixCls;
return (cols || columns).map(function (column) {
return _extends(_extends({}, column), {
className: !!column.fixed && !fixed ? classNames("".concat(prefixCls, "-fixed-columns-in-body"), column.className, column.class) : classNames(column.className, column.class)
});
});
},
handleRowHover: function handleRowHover(isHover, key) {
this.store.setState({
currentHoverKey: isHover ? key : null
});
},
renderRows: function renderRows(renderData, indent) {
var _this = this;
var ancestorKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
var _Object$assign = _extends(_extends(_extends({}, this.table.$attrs), this.table.$props), this.table.$data),
columnManager = _Object$assign.columnManager,
components = _Object$assign.sComponents,
prefixCls = _Object$assign.prefixCls,
childrenColumnName = _Object$assign.childrenColumnName,
rowClassName = _Object$assign.rowClassName,
_Object$assign$custom = _Object$assign.customRow,
customRow = _Object$assign$custom === void 0 ? noop : _Object$assign$custom,
_Object$assign$onRowC = _Object$assign.onRowClick,
onRowClick = _Object$assign$onRowC === void 0 ? noop : _Object$assign$onRowC,
_Object$assign$onRowD = _Object$assign.onRowDoubleClick,
onRowDoubleClick = _Object$assign$onRowD === void 0 ? noop : _Object$assign$onRowD,
_Object$assign$onRowC2 = _Object$assign.onRowContextMenu,
onRowContextMenu = _Object$assign$onRowC2 === void 0 ? noop : _Object$assign$onRowC2,
_Object$assign$onRowM = _Object$assign.onRowMouseEnter,
onRowMouseEnter = _Object$assign$onRowM === void 0 ? noop : _Object$assign$onRowM,
_Object$assign$onRowM2 = _Object$assign.onRowMouseLeave,
onRowMouseLeave = _Object$assign$onRowM2 === void 0 ? noop : _Object$assign$onRowM2,
rowRef = _Object$assign.rowRef;
var getRowKey = this.getRowKey,
fixed = this.fixed,
expander = this.expander,
isAnyColumnsFixed = this.isAnyColumnsFixed;
var rows = [];
var _loop = function _loop(i) {
var record = renderData[i];
var key = getRowKey(record, i);
var className = typeof rowClassName === 'string' ? rowClassName : rowClassName(record, i, indent);
var onHoverProps = {};
if (columnManager.isAnyColumnsFixed()) {
onHoverProps.onHover = _this.handleRowHover;
}
var leafColumns = void 0;
if (fixed === 'left') {
leafColumns = columnManager.leftLeafColumns();
} else if (fixed === 'right') {
leafColumns = columnManager.rightLeafColumns();
} else {
leafColumns = _this.getColumns(columnManager.leafColumns());
}
var rowPrefixCls = "".concat(prefixCls, "-row");
var expandableRowProps = _extends(_extends({}, expander.props), {
fixed: fixed,
index: i,
prefixCls: rowPrefixCls,
record: record,
rowKey: key,
needIndentSpaced: expander.needIndentSpaced,
key: key,
onRowClick: onRowClick,
onExpandedChange: expander.handleExpandChange
});
var row = _createVNode(ExpandableRow, expandableRowProps, {
default: function _default(expandableRow) {
var tableRowProps = _extends(_extends(_extends({
fixed: fixed,
indent: indent,
record: record,
index: i,
prefixCls: rowPrefixCls,
childrenColumnName: childrenColumnName,
columns: leafColumns,
rowKey: key,
ancestorKeys: ancestorKeys,
components: components,
isAnyColumnsFixed: isAnyColumnsFixed,
customRow: customRow,
onRowDoubleClick: onRowDoubleClick,
onRowContextMenu: onRowContextMenu,
onRowMouseEnter: onRowMouseEnter,
onRowMouseLeave: onRowMouseLeave
}, onHoverProps), {
class: className,
ref: rowRef(record, i, indent)
}), expandableRow);
return _createVNode(TableRow, tableRowProps, null);
}
});
rows.push(row);
expander.renderRows(_this.renderRows, rows, record, i, indent, fixed, key, ancestorKeys);
};
for (var i = 0; i < renderData.length; i += 1) {
_loop(i);
}
return rows;
}
},
render: function render() {
var _this$table = this.table,
components = _this$table.sComponents,
prefixCls = _this$table.prefixCls,
scroll = _this$table.scroll,
data = _this$table.data;
var _this$$props2 = this.$props,
expander = _this$$props2.expander,
tableClassName = _this$$props2.tableClassName,
hasHead = _this$$props2.hasHead,
hasBody = _this$$props2.hasBody,
fixed = _this$$props2.fixed,
isAnyColumnsFixed = _this$$props2.isAnyColumnsFixed;
var columns = this.getColumns();
var tableStyle = {};
if (!fixed && scroll.x) {
// 当有固定列时，width auto 会导致 body table 的宽度撑不开，从而固定列无法对齐
// 详情见：https://github.com/ant-design/ant-design/issues/22160
var tableWidthScrollX = isAnyColumnsFixed ? 'max-content' : 'auto'; // not set width, then use content fixed width
tableStyle.width = scroll.x === true ? tableWidthScrollX : scroll.x;
tableStyle.width = typeof tableStyle.width === 'number' ? "".concat(tableStyle.width, "px") : tableStyle.width;
}
if (fixed) {
var width = columns.reduce(function (sum, _ref) {
var w = _ref.width;
return sum + parseFloat(w, 10);
}, 0);
if (width > 0) {
tableStyle.width = width + 'px';
}
}
var Table = hasBody ? components.table : 'table';
var BodyWrapper = components.body.wrapper;
var body;
if (hasBody) {
var _slot;
body = _createVNode(BodyWrapper, {
"class": "".concat(prefixCls, "-tbody")
}, _isSlot(_slot = this.renderRows(data, 0)) ? _slot : {
default: function _default() {
return [_slot];
}
});
}
return _createVNode(Table, {
"class": tableClassName,
"style": tableStyle,
"key": "table"
}, {
default: function _default() {
return [_createVNode(ColGroup, {
"columns": columns,
"fixed": fixed
}, null), hasHead && _createVNode(TableHeader, {
"expander": expander,
"columns": columns,
"fixed": fixed
}, null), body];
}
});
}
};
export default connect()(BaseTable);