refactor: remove old table
tangjinzhou
parent
223abb1a6b
commit
d84ebc4a3e
|
|
@ -1,60 +0,0 @@
|
|||
.move-enter,
|
||||
.move-appear {
|
||||
opacity: 0;
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
animation-duration: 2.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.move-leave {
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: both;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.move-enter.move-enter-active,
|
||||
.move-appear.move-enter-active {
|
||||
animation-name: moveLeftIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.move-leave.move-leave-active {
|
||||
animation-name: moveRightOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes moveLeftIn {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(30px);
|
||||
opacity: 0;
|
||||
background: #fff6de;
|
||||
}
|
||||
20% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
background: #fff6de;
|
||||
}
|
||||
100% {
|
||||
background: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveRightOut {
|
||||
0% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(-30px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@tablePrefixCls: rc-table;
|
||||
@table-border-color: #e9e9e9;
|
||||
|
||||
.@{tablePrefixCls}.bordered {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
border: 1px solid @table-border-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,233 +0,0 @@
|
|||
@tablePrefixCls: rc-table;
|
||||
@text-color : #666;
|
||||
@font-size-base : 12px;
|
||||
@line-height: 1.5;
|
||||
@table-border-color: #e9e9e9;
|
||||
@table-head-background-color: #f7f7f7;
|
||||
@vertical-padding: 16px;
|
||||
@horizontal-padding: 8px;
|
||||
|
||||
.@{tablePrefixCls} {
|
||||
font-size: @font-size-base;
|
||||
color: @text-color;
|
||||
transition: opacity 0.3s ease;
|
||||
position: relative;
|
||||
line-height: @line-height;
|
||||
overflow: hidden;
|
||||
|
||||
.@{tablePrefixCls}-scroll {
|
||||
overflow: auto;
|
||||
table {
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{tablePrefixCls}-header {
|
||||
overflow: hidden;
|
||||
background: @table-head-background-color;
|
||||
}
|
||||
|
||||
&-fixed-header &-body {
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-fixed-header &-body-inner {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
&-fixed-header &-scroll &-header {
|
||||
overflow-x: scroll;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: -20px;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/10828
|
||||
&-fixed-columns-in-body {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.@{tablePrefixCls}-title {
|
||||
padding: @vertical-padding @horizontal-padding;
|
||||
border-top: 1px solid @table-border-color;
|
||||
}
|
||||
|
||||
.@{tablePrefixCls}-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.@{tablePrefixCls}-footer {
|
||||
padding: @vertical-padding @horizontal-padding;
|
||||
border-bottom: 1px solid @table-border-color;
|
||||
}
|
||||
|
||||
.@{tablePrefixCls}-placeholder {
|
||||
padding: 16px 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid @table-border-color;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
&-fixed-columns {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
background: @table-head-background-color;
|
||||
font-weight: bold;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid @table-border-color;
|
||||
&:empty:after {
|
||||
content: '.'; // empty cell placeholder
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
background: #eaf8fe;
|
||||
}
|
||||
&.@{tablePrefixCls}-row-hover {
|
||||
background: #eaf8fe;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: @vertical-padding @horizontal-padding;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.@{tablePrefixCls} {
|
||||
&-expand-icon-col {
|
||||
width: 34px;
|
||||
}
|
||||
&-row,
|
||||
&-expanded-row {
|
||||
&-expand-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
border: 1px solid @table-border-color;
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
}
|
||||
&-spaced {
|
||||
visibility: hidden;
|
||||
}
|
||||
&-spaced:after {
|
||||
content: '.';
|
||||
}
|
||||
|
||||
&-expanded:after {
|
||||
content: '-';
|
||||
}
|
||||
|
||||
&-collapsed:after {
|
||||
content: '+';
|
||||
}
|
||||
}
|
||||
tr&-expanded-row {
|
||||
background: #f7f7f7;
|
||||
&:hover {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
}
|
||||
&-column-hidden {
|
||||
display: none;
|
||||
}
|
||||
&-prev-columns-page,
|
||||
&-next-columns-page {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
z-index: 1;
|
||||
&:hover {
|
||||
color: #2db7f5;
|
||||
}
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
color: #999;
|
||||
&:hover {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-prev-columns-page {
|
||||
margin-right: 8px;
|
||||
&:before {
|
||||
content: '<';
|
||||
}
|
||||
}
|
||||
&-next-columns-page {
|
||||
float: right;
|
||||
&:before {
|
||||
content: '>';
|
||||
}
|
||||
}
|
||||
|
||||
&-fixed-left,
|
||||
&-fixed-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
table {
|
||||
width: auto;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&-fixed-left {
|
||||
left: 0;
|
||||
box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);
|
||||
& .@{tablePrefixCls}-body-inner {
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.@{tablePrefixCls}-fixed-header & .@{tablePrefixCls}-body-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-fixed-right {
|
||||
right: 0;
|
||||
box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);
|
||||
|
||||
// hide expand row content in right fixed Table
|
||||
// https://github.com/ant-design/ant-design/issues/1898
|
||||
.@{tablePrefixCls}-expanded-row {
|
||||
color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&&-scroll-position-left &-fixed-left {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&&-scroll-position-right &-fixed-right {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0
|
||||
}
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none
|
||||
}
|
||||
|
||||
a {
|
||||
background: 0 0
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: .67em 0
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -.5em
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -.25em
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em 40px
|
||||
}
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
button {
|
||||
overflow: visible
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none
|
||||
}
|
||||
|
||||
button,
|
||||
html input[type=button],
|
||||
input[type=reset],
|
||||
input[type=submit] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
input {
|
||||
line-height: normal
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
box-sizing: border-box;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
height: auto
|
||||
}
|
||||
|
||||
input[type=search] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
input[type=search]::-webkit-search-cancel-button,
|
||||
input[type=search]::-webkit-search-decoration {
|
||||
-webkit-appearance: none
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid silver;
|
||||
margin: 0 2px;
|
||||
padding: .35em .625em .75em
|
||||
}
|
||||
|
||||
legend {
|
||||
border: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
optgroup {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
// base rc-table 6.10.9
|
||||
import Table from './src/Table';
|
||||
import Column from './src/Column';
|
||||
import ColumnGroup from './src/ColumnGroup';
|
||||
import { INTERNAL_COL_DEFINE } from './src/utils';
|
||||
// const Table = {
|
||||
// name: 'Table',
|
||||
// inheritAttrs: false,
|
||||
// Column,
|
||||
// ColumnGroup,
|
||||
// props: T.props,
|
||||
// methods: {
|
||||
// getTableNode() {
|
||||
// return this.table.tableNode;
|
||||
// },
|
||||
// getBodyTable() {
|
||||
// return this.table.ref_bodyTable;
|
||||
// },
|
||||
// saveTable(node) {
|
||||
// this.table = node;
|
||||
// },
|
||||
// },
|
||||
// render() {
|
||||
// const props = getOptionProps(this);
|
||||
// const columns = props.columns;
|
||||
// const tProps = {
|
||||
// ...props,
|
||||
// ...this.$attrs,
|
||||
// columns,
|
||||
// ref: this.saveTable,
|
||||
// };
|
||||
// return <T {...tProps} />;
|
||||
// },
|
||||
// };
|
||||
|
||||
export default Table;
|
||||
export { Column, ColumnGroup, INTERNAL_COL_DEFINE };
|
||||
|
|
@ -1,172 +0,0 @@
|
|||
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';
|
||||
function noop() {}
|
||||
const 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,
|
||||
expander: PropTypes.object.isRequired,
|
||||
getRowKey: PropTypes.func,
|
||||
isAnyColumnsFixed: PropTypes.looseBool,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
table: inject('table', () => ({})),
|
||||
store: inject('table-store', () => ({})),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getColumns(cols) {
|
||||
const { columns = [] } = this.$props;
|
||||
return (cols || columns).map(column => ({
|
||||
...column,
|
||||
className: classNames(column.className, column.class),
|
||||
}));
|
||||
},
|
||||
handleRowHover(isHover, key) {
|
||||
this.store.currentHoverKey = isHover ? key : null;
|
||||
},
|
||||
|
||||
renderRows(renderData, indent, ancestorKeys = []) {
|
||||
const {
|
||||
sComponents: components,
|
||||
prefixCls,
|
||||
childrenColumnName,
|
||||
rowClassName,
|
||||
customRow = noop,
|
||||
onRowClick = noop,
|
||||
onRowDoubleClick = noop,
|
||||
onRowContextMenu = noop,
|
||||
onRowMouseEnter = noop,
|
||||
onRowMouseLeave = noop,
|
||||
rowRef,
|
||||
} = { ...this.table.$attrs, ...this.table.$props, ...this.table.$data };
|
||||
const { columnManager } = this.store;
|
||||
const { getRowKey, fixed, expander, isAnyColumnsFixed } = this;
|
||||
|
||||
const rows = [];
|
||||
|
||||
for (let i = 0; i < renderData.length; i += 1) {
|
||||
const record = renderData[i];
|
||||
const key = getRowKey(record, i);
|
||||
const className =
|
||||
typeof rowClassName === 'string' ? rowClassName : rowClassName(record, i, indent);
|
||||
|
||||
const onHoverProps = {};
|
||||
if (columnManager.isAnyColumnsFixed) {
|
||||
onHoverProps.onHover = this.handleRowHover;
|
||||
}
|
||||
|
||||
let leafColumns;
|
||||
if (fixed === 'left') {
|
||||
leafColumns = columnManager.leftLeafColumns;
|
||||
} else if (fixed === 'right') {
|
||||
leafColumns = columnManager.rightLeafColumns;
|
||||
} else {
|
||||
leafColumns = this.getColumns(columnManager.leafColumns);
|
||||
}
|
||||
|
||||
const rowPrefixCls = `${prefixCls}-row`;
|
||||
|
||||
const expandableRowProps = {
|
||||
...expander.props,
|
||||
fixed,
|
||||
index: i,
|
||||
prefixCls: rowPrefixCls,
|
||||
record,
|
||||
rowKey: key,
|
||||
needIndentSpaced: expander.needIndentSpaced,
|
||||
key,
|
||||
onRowClick,
|
||||
onExpandedChange: expander.handleExpandChange,
|
||||
};
|
||||
const row = (
|
||||
<ExpandableRow
|
||||
{...expandableRowProps}
|
||||
v-slots={{
|
||||
default: expandableRow => {
|
||||
const tableRowProps = {
|
||||
fixed,
|
||||
indent,
|
||||
record,
|
||||
index: i,
|
||||
prefixCls: rowPrefixCls,
|
||||
childrenColumnName,
|
||||
columns: leafColumns,
|
||||
rowKey: key,
|
||||
ancestorKeys,
|
||||
components,
|
||||
isAnyColumnsFixed,
|
||||
customRow,
|
||||
onRowDoubleClick,
|
||||
onRowContextMenu,
|
||||
onRowMouseEnter,
|
||||
onRowMouseLeave,
|
||||
...onHoverProps,
|
||||
class: className,
|
||||
ref: rowRef(record, i, indent),
|
||||
...expandableRow,
|
||||
};
|
||||
return <TableRow {...tableRowProps} />;
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
rows.push(row);
|
||||
expander.renderRows(this.renderRows, rows, record, i, indent, fixed, key, ancestorKeys);
|
||||
}
|
||||
return rows;
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { sComponents: components, prefixCls, scroll, data } = this.table;
|
||||
const { expander, tableClassName, hasHead, hasBody, fixed } = this.$props;
|
||||
const columns = this.getColumns();
|
||||
const tableStyle = {};
|
||||
|
||||
if (!fixed && scroll.x) {
|
||||
// not set width, then use content fixed width
|
||||
tableStyle.width = scroll.x === true ? 'auto' : scroll.x;
|
||||
tableStyle.width =
|
||||
typeof tableStyle.width === 'number' ? `${tableStyle.width}px` : tableStyle.width;
|
||||
}
|
||||
if (fixed) {
|
||||
const width = columns.reduce((sum, { width: w }) => {
|
||||
return sum + parseFloat(w, 10);
|
||||
}, 0);
|
||||
if (width > 0) {
|
||||
tableStyle.width = width + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
const Table = hasBody ? components.table : 'table';
|
||||
const BodyWrapper = components.body.wrapper;
|
||||
|
||||
let body;
|
||||
if (hasBody) {
|
||||
body = <BodyWrapper class={`${prefixCls}-tbody`}>{this.renderRows(data, 0)}</BodyWrapper>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Table class={tableClassName} style={tableStyle} key="table">
|
||||
<ColGroup columns={columns} fixed={fixed} />
|
||||
{hasHead && <TableHeader expander={expander} columns={columns} fixed={fixed} />}
|
||||
{body}
|
||||
</Table>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default BaseTable;
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
import { inject } from 'vue';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import BaseTable from './BaseTable';
|
||||
|
||||
export default {
|
||||
name: 'BodyTable',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
columns: PropTypes.array.isRequired,
|
||||
tableClassName: PropTypes.string.isRequired,
|
||||
handleBodyScroll: PropTypes.func.isRequired,
|
||||
handleWheel: PropTypes.func.isRequired,
|
||||
getRowKey: PropTypes.func.isRequired,
|
||||
expander: PropTypes.object.isRequired,
|
||||
isAnyColumnsFixed: PropTypes.looseBool,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
table: inject('table', {}),
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const { prefixCls, scroll } = this.table;
|
||||
const {
|
||||
columns,
|
||||
tableClassName,
|
||||
getRowKey,
|
||||
handleBodyScroll,
|
||||
handleWheel,
|
||||
expander,
|
||||
isAnyColumnsFixed,
|
||||
} = this;
|
||||
let { useFixedHeader, saveRef } = this.table;
|
||||
const bodyStyle = { ...this.table.bodyStyle };
|
||||
|
||||
if (scroll.y) {
|
||||
// maxHeight will make fixed-Table scrolling not working
|
||||
// so we only set maxHeight to body-Table here
|
||||
let maxHeight = bodyStyle.maxHeight || scroll.y;
|
||||
maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
|
||||
|
||||
bodyStyle.maxHeight = maxHeight;
|
||||
bodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
|
||||
useFixedHeader = true;
|
||||
}
|
||||
|
||||
if (scroll.x) {
|
||||
bodyStyle.overflowX = bodyStyle.overflowX || 'auto';
|
||||
// Fix weired webkit render bug
|
||||
// https://github.com/ant-design/ant-design/issues/7783
|
||||
bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)';
|
||||
|
||||
if (!scroll.y) {
|
||||
bodyStyle.overflowY = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
const baseTable = (
|
||||
<BaseTable
|
||||
tableClassName={tableClassName}
|
||||
hasHead={!useFixedHeader}
|
||||
hasBody
|
||||
columns={columns}
|
||||
expander={expander}
|
||||
getRowKey={getRowKey}
|
||||
isAnyColumnsFixed={isAnyColumnsFixed}
|
||||
/>
|
||||
);
|
||||
|
||||
// Should provides `tabindex` if use scroll to enable keyboard scroll
|
||||
const useTabIndex = scroll && (scroll.x || scroll.y);
|
||||
|
||||
return (
|
||||
<div
|
||||
tabindex={useTabIndex ? -1 : undefined}
|
||||
key="bodyTable"
|
||||
class={`${prefixCls}-body`}
|
||||
style={bodyStyle}
|
||||
ref={saveRef('bodyTable')}
|
||||
onWheel={handleWheel}
|
||||
onScroll={handleBodyScroll}
|
||||
>
|
||||
{baseTable}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
import { inject } from 'vue';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import { INTERNAL_COL_DEFINE } from './utils';
|
||||
import ResizeObserver from '../../vc-resize-observer';
|
||||
|
||||
export default {
|
||||
name: 'ColGroup',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
fixed: PropTypes.string,
|
||||
columns: PropTypes.array,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
table: inject('table', {}),
|
||||
store: inject('table-store', () => ({})),
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const { fixed, table } = this;
|
||||
const { prefixCls, expandIconAsCell, onColumnResize } = table;
|
||||
|
||||
let cols = [];
|
||||
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
cols.push(<col class={`${prefixCls}-expand-icon-col`} key="rc-table-expand-icon-col" />);
|
||||
}
|
||||
|
||||
let leafColumns;
|
||||
const { columnManager } = this.store;
|
||||
if (fixed === 'left') {
|
||||
leafColumns = columnManager.leftLeafColumns;
|
||||
} else if (fixed === 'right') {
|
||||
leafColumns = columnManager.rightLeafColumns;
|
||||
} else {
|
||||
leafColumns = columnManager.leafColumns;
|
||||
}
|
||||
cols = cols.concat(
|
||||
leafColumns.map(({ key, dataIndex, width, [INTERNAL_COL_DEFINE]: additionalProps }) => {
|
||||
const mergedKey = key !== undefined ? key : dataIndex;
|
||||
const w = typeof width === 'number' ? `${width}px` : width;
|
||||
return (
|
||||
<ResizeObserver
|
||||
onResize={({ offsetWidth }) => {
|
||||
onColumnResize(mergedKey, offsetWidth);
|
||||
}}
|
||||
>
|
||||
<col
|
||||
data-key={mergedKey}
|
||||
key={mergedKey}
|
||||
style={{ width: w, minWidth: w }}
|
||||
{...additionalProps}
|
||||
/>
|
||||
</ResizeObserver>
|
||||
);
|
||||
}),
|
||||
);
|
||||
return <colgroup>{cols}</colgroup>;
|
||||
},
|
||||
};
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
// import PropTypes from '../../_util/vue-types';
|
||||
|
||||
// export default {
|
||||
// name: 'Column',
|
||||
// props: {
|
||||
// rowSpan: PropTypes.number,
|
||||
// colSpan: PropTypes.number,
|
||||
// title: PropTypes.any,
|
||||
// dataIndex: PropTypes.string,
|
||||
// width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
// ellipsis: PropTypes.looseBool,
|
||||
// fixed: PropTypes.oneOf([true, 'left', 'right']),
|
||||
// align: PropTypes.oneOf(['left', 'center', 'right']),
|
||||
// customRender: PropTypes.func,
|
||||
// className: PropTypes.string,
|
||||
// // onCellClick: PropTypes.func,
|
||||
// customCell: PropTypes.func,
|
||||
// customHeaderCell: PropTypes.func,
|
||||
// },
|
||||
// };
|
||||
|
||||
const Column = () => null;
|
||||
|
||||
export default Column;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { defineComponent } from 'vue';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ColumnGroup',
|
||||
props: {
|
||||
title: PropTypes.any,
|
||||
},
|
||||
isTableColumnGroup: true,
|
||||
render() {
|
||||
return null;
|
||||
},
|
||||
});
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import PropTypes from '../../_util/vue-types';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
export default {
|
||||
name: 'ExpandIcon',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
record: PropTypes.object,
|
||||
prefixCls: PropTypes.string,
|
||||
expandable: PropTypes.any,
|
||||
expanded: PropTypes.looseBool,
|
||||
needIndentSpaced: PropTypes.looseBool,
|
||||
},
|
||||
methods: {
|
||||
onExpand(e) {
|
||||
this.__emit('expand', this.record, e);
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { expandable, prefixCls, onExpand, needIndentSpaced, expanded } = this;
|
||||
if (expandable) {
|
||||
const expandClassName = expanded ? 'expanded' : 'collapsed';
|
||||
return (
|
||||
<span
|
||||
class={`${prefixCls}-expand-icon ${prefixCls}-${expandClassName}`}
|
||||
onClick={onExpand}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (needIndentSpaced) {
|
||||
return <span class={`${prefixCls}-expand-icon ${prefixCls}-spaced`} />;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
};
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
import PropTypes, { withUndefined } from '../../_util/vue-types';
|
||||
import ExpandIcon from './ExpandIcon';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { getSlot } from '../../_util/props-util';
|
||||
import { computed, inject } from 'vue';
|
||||
|
||||
const ExpandableRow = {
|
||||
mixins: [BaseMixin],
|
||||
name: 'ExpandableRow',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
prefixCls: PropTypes.string.isRequired,
|
||||
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||||
fixed: withUndefined(PropTypes.oneOfType([PropTypes.string, PropTypes.looseBool])),
|
||||
record: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
|
||||
indentSize: PropTypes.number,
|
||||
needIndentSpaced: PropTypes.looseBool.isRequired,
|
||||
expandRowByClick: PropTypes.looseBool,
|
||||
expandIconAsCell: PropTypes.looseBool,
|
||||
expandIconColumnIndex: PropTypes.number,
|
||||
childrenColumnName: PropTypes.string,
|
||||
expandedRowRender: PropTypes.func,
|
||||
expandIcon: PropTypes.func,
|
||||
// onExpandedChange: PropTypes.func.isRequired,
|
||||
// onRowClick: PropTypes.func,
|
||||
// children: PropTypes.func.isRequired,
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject('table-store', () => ({}));
|
||||
return {
|
||||
expanded: computed(() => store.expandedRowKeys.includes(props.rowKey)),
|
||||
};
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
this.handleDestroy();
|
||||
},
|
||||
methods: {
|
||||
hasExpandIcon(columnIndex) {
|
||||
const { expandRowByClick, expandIcon } = this.$props;
|
||||
|
||||
if (this.tempExpandIconAsCell || columnIndex !== this.tempExpandIconColumnIndex) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !!expandIcon || !expandRowByClick;
|
||||
},
|
||||
|
||||
handleExpandChange(record, event) {
|
||||
const { expanded, rowKey } = this;
|
||||
this.__emit('expandedChange', !expanded, record, event, rowKey);
|
||||
},
|
||||
|
||||
handleDestroy() {
|
||||
const { rowKey, record } = this;
|
||||
this.__emit('expandedChange', false, record, null, rowKey, true);
|
||||
},
|
||||
|
||||
handleRowClick(record, index, event) {
|
||||
const { expandRowByClick } = this;
|
||||
if (expandRowByClick) {
|
||||
this.handleExpandChange(record, event);
|
||||
}
|
||||
this.__emit('rowClick', record, index, event);
|
||||
},
|
||||
|
||||
renderExpandIcon() {
|
||||
const { prefixCls, expanded, record, needIndentSpaced, expandIcon } = this;
|
||||
if (expandIcon) {
|
||||
return expandIcon({
|
||||
prefixCls,
|
||||
expanded,
|
||||
record,
|
||||
needIndentSpaced,
|
||||
expandable: this.expandable,
|
||||
onExpand: this.handleExpandChange,
|
||||
});
|
||||
}
|
||||
return (
|
||||
<ExpandIcon
|
||||
expandable={this.expandable}
|
||||
prefixCls={prefixCls}
|
||||
onExpand={this.handleExpandChange}
|
||||
needIndentSpaced={needIndentSpaced}
|
||||
expanded={expanded}
|
||||
record={record}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
renderExpandIconCell(cells) {
|
||||
if (!this.tempExpandIconAsCell) {
|
||||
return;
|
||||
}
|
||||
const { prefixCls } = this;
|
||||
|
||||
cells.push(
|
||||
<td class={`${prefixCls}-expand-icon-cell`} key="rc-table-expand-icon-cell">
|
||||
{this.renderExpandIcon()}
|
||||
</td>,
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { childrenColumnName, expandedRowRender, indentSize, record, fixed, expanded } = this;
|
||||
|
||||
this.tempExpandIconAsCell = fixed !== 'right' ? this.expandIconAsCell : false;
|
||||
this.tempExpandIconColumnIndex = fixed !== 'right' ? this.expandIconColumnIndex : -1;
|
||||
const childrenData = record[childrenColumnName];
|
||||
this.expandable = !!(childrenData || expandedRowRender);
|
||||
const expandableRowProps = {
|
||||
indentSize,
|
||||
expanded, // not used in TableRow, but it's required to re-render TableRow when `expanded` changes
|
||||
hasExpandIcon: this.hasExpandIcon,
|
||||
renderExpandIcon: this.renderExpandIcon,
|
||||
renderExpandIconCell: this.renderExpandIconCell,
|
||||
onRowClick: this.handleRowClick,
|
||||
};
|
||||
|
||||
return getSlot(this, 'default', expandableRowProps);
|
||||
},
|
||||
};
|
||||
|
||||
export default ExpandableRow;
|
||||
|
|
@ -1,241 +0,0 @@
|
|||
import PropTypes from '../../_util/vue-types';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import shallowEqual from '../../_util/shallowequal';
|
||||
import TableRow from './TableRow';
|
||||
import { remove } from './utils';
|
||||
import { initDefaultProps, getOptionProps, getSlot } from '../../_util/props-util';
|
||||
import { inject } from 'vue';
|
||||
|
||||
export const ExpandableTableProps = () => ({
|
||||
expandIconAsCell: PropTypes.looseBool,
|
||||
expandRowByClick: PropTypes.looseBool,
|
||||
expandedRowKeys: PropTypes.array,
|
||||
expandedRowClassName: PropTypes.func,
|
||||
defaultExpandAllRows: PropTypes.looseBool,
|
||||
defaultExpandedRowKeys: PropTypes.array,
|
||||
expandIconColumnIndex: PropTypes.number,
|
||||
expandedRowRender: PropTypes.func,
|
||||
expandIcon: PropTypes.func,
|
||||
childrenColumnName: PropTypes.string,
|
||||
indentSize: PropTypes.number,
|
||||
// onExpand: PropTypes.func,
|
||||
// onExpandedRowsChange: PropTypes.func,
|
||||
columnManager: PropTypes.object.isRequired,
|
||||
prefixCls: PropTypes.string.isRequired,
|
||||
data: PropTypes.array,
|
||||
getRowKey: PropTypes.func,
|
||||
});
|
||||
|
||||
const ExpandableTable = {
|
||||
name: 'ExpandableTable',
|
||||
inheritAttrs: false,
|
||||
mixins: [BaseMixin],
|
||||
props: initDefaultProps(ExpandableTableProps(), {
|
||||
expandIconAsCell: false,
|
||||
expandedRowClassName: () => '',
|
||||
expandIconColumnIndex: 0,
|
||||
defaultExpandAllRows: false,
|
||||
defaultExpandedRowKeys: [],
|
||||
childrenColumnName: 'children',
|
||||
indentSize: 15,
|
||||
}),
|
||||
setup(props) {
|
||||
const store = inject('table-store', () => ({}));
|
||||
const {
|
||||
data,
|
||||
childrenColumnName,
|
||||
defaultExpandAllRows,
|
||||
expandedRowKeys,
|
||||
defaultExpandedRowKeys,
|
||||
getRowKey,
|
||||
} = props;
|
||||
|
||||
let finalExpandedRowKeys = [];
|
||||
let rows = [...data];
|
||||
|
||||
if (defaultExpandAllRows) {
|
||||
for (let i = 0; i < rows.length; i += 1) {
|
||||
const row = rows[i];
|
||||
finalExpandedRowKeys.push(getRowKey(row, i));
|
||||
rows = rows.concat(row[childrenColumnName] || []);
|
||||
}
|
||||
} else {
|
||||
finalExpandedRowKeys = expandedRowKeys || defaultExpandedRowKeys;
|
||||
}
|
||||
Object.assign(store, {
|
||||
expandedRowsHeight: {},
|
||||
expandedRowKeys: finalExpandedRowKeys,
|
||||
});
|
||||
return { store };
|
||||
},
|
||||
mounted() {
|
||||
this.handleUpdated();
|
||||
},
|
||||
updated() {
|
||||
this.handleUpdated();
|
||||
},
|
||||
watch: {
|
||||
expandedRowKeys(val) {
|
||||
this.$nextTick(() => {
|
||||
this.store.expandedRowKeys = val;
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleUpdated() {
|
||||
// We should record latest expanded rows to avoid multiple rows remove cause `onExpandedRowsChange` trigger many times
|
||||
this.latestExpandedRows = null;
|
||||
},
|
||||
handleExpandChange(expanded, record, event, rowKey, destroy = false) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
let { expandedRowKeys } = this.store;
|
||||
|
||||
if (expanded) {
|
||||
// row was expaned
|
||||
expandedRowKeys = [...expandedRowKeys, rowKey];
|
||||
} else {
|
||||
// row was collapse
|
||||
const expandedRowIndex = expandedRowKeys.indexOf(rowKey);
|
||||
if (expandedRowIndex !== -1) {
|
||||
expandedRowKeys = remove(expandedRowKeys, rowKey);
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.expandedRowKeys) {
|
||||
this.store.expandedRowKeys = expandedRowKeys;
|
||||
}
|
||||
// De-dup of repeat call
|
||||
if (!this.latestExpandedRows || !shallowEqual(this.latestExpandedRows, expandedRowKeys)) {
|
||||
this.latestExpandedRows = expandedRowKeys;
|
||||
this.__emit('expandedRowsChange', expandedRowKeys);
|
||||
}
|
||||
|
||||
if (!destroy) {
|
||||
this.__emit('expand', expanded, record);
|
||||
}
|
||||
},
|
||||
|
||||
renderExpandIndentCell(rows, fixed) {
|
||||
const { prefixCls, expandIconAsCell } = this;
|
||||
if (!expandIconAsCell || fixed === 'right' || !rows.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const iconColumn = {
|
||||
key: 'rc-table-expand-icon-cell',
|
||||
className: `${prefixCls}-expand-icon-th`,
|
||||
title: '',
|
||||
rowSpan: rows.length,
|
||||
};
|
||||
|
||||
rows[0].unshift({ ...iconColumn, column: iconColumn });
|
||||
},
|
||||
|
||||
renderExpandedRow(record, index, expandedRowRender, className, ancestorKeys, indent, fixed) {
|
||||
const { prefixCls, expandIconAsCell, indentSize } = this;
|
||||
const parentKey = ancestorKeys[ancestorKeys.length - 1];
|
||||
const rowKey = `${parentKey}-extra-row`;
|
||||
const components = {
|
||||
body: {
|
||||
row: 'tr',
|
||||
cell: 'td',
|
||||
},
|
||||
};
|
||||
let colCount;
|
||||
if (fixed === 'left') {
|
||||
colCount = this.columnManager.leftLeafColumns.value.length;
|
||||
} else if (fixed === 'right') {
|
||||
colCount = this.columnManager.rightLeafColumns.value.length;
|
||||
} else {
|
||||
colCount = this.columnManager.leafColumns.value.length;
|
||||
}
|
||||
const columns = [
|
||||
{
|
||||
key: 'extra-row',
|
||||
customRender: () => {
|
||||
const { expandedRowKeys } = this.store;
|
||||
const expanded = expandedRowKeys.includes(parentKey);
|
||||
return {
|
||||
props: { colSpan: colCount },
|
||||
children:
|
||||
fixed !== 'right'
|
||||
? expandedRowRender({ record, index, indent, expanded })
|
||||
: ' ',
|
||||
};
|
||||
},
|
||||
},
|
||||
];
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
columns.unshift({
|
||||
key: 'expand-icon-placeholder',
|
||||
customRender: () => null,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={rowKey}
|
||||
columns={columns}
|
||||
class={className}
|
||||
rowKey={rowKey}
|
||||
ancestorKeys={ancestorKeys}
|
||||
prefixCls={`${prefixCls}-expanded-row`}
|
||||
indentSize={indentSize}
|
||||
indent={indent}
|
||||
fixed={fixed}
|
||||
components={components}
|
||||
expandedRow
|
||||
hasExpandIcon={() => {}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
renderRows(renderRows, rows, record, index, indent, fixed, parentKey, ancestorKeys) {
|
||||
const { expandedRowClassName, expandedRowRender, childrenColumnName } = this;
|
||||
const childrenData = record[childrenColumnName];
|
||||
const nextAncestorKeys = [...ancestorKeys, parentKey];
|
||||
const nextIndent = indent + 1;
|
||||
|
||||
if (expandedRowRender) {
|
||||
rows.push(
|
||||
this.renderExpandedRow(
|
||||
record,
|
||||
index,
|
||||
expandedRowRender,
|
||||
expandedRowClassName(record, index, indent),
|
||||
nextAncestorKeys,
|
||||
nextIndent,
|
||||
fixed,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (childrenData) {
|
||||
rows.push(...renderRows(childrenData, nextIndent, nextAncestorKeys));
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { data, childrenColumnName } = this;
|
||||
const props = getOptionProps(this);
|
||||
const needIndentSpaced = data.some(record => record[childrenColumnName]);
|
||||
|
||||
return getSlot(this, 'default', {
|
||||
props: {
|
||||
...props,
|
||||
...this.$attrs,
|
||||
},
|
||||
needIndentSpaced,
|
||||
renderRows: this.renderRows,
|
||||
handleExpandChange: this.handleExpandChange,
|
||||
renderExpandIndentCell: this.renderExpandIndentCell,
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default ExpandableTable;
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
import { inject } from 'vue';
|
||||
import PropTypes, { withUndefined } from '../../_util/vue-types';
|
||||
import { measureScrollbar } from './utils';
|
||||
import BaseTable from './BaseTable';
|
||||
import classNames from '../../_util/classNames';
|
||||
|
||||
export default {
|
||||
name: 'HeadTable',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
fixed: withUndefined(PropTypes.oneOfType([PropTypes.string, PropTypes.looseBool])),
|
||||
columns: PropTypes.array.isRequired,
|
||||
tableClassName: PropTypes.string.isRequired,
|
||||
handleBodyScrollLeft: PropTypes.func.isRequired,
|
||||
expander: PropTypes.object.isRequired,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
table: inject('table', {}),
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const { columns, fixed, tableClassName, handleBodyScrollLeft, expander, table } = this;
|
||||
const { prefixCls, scroll, showHeader, saveRef } = table;
|
||||
let { useFixedHeader } = table;
|
||||
const headStyle = {};
|
||||
|
||||
const scrollbarWidth = measureScrollbar({ direction: 'vertical' });
|
||||
|
||||
if (scroll.y) {
|
||||
useFixedHeader = true;
|
||||
// https://github.com/ant-design/ant-design/issues/17051
|
||||
const scrollbarWidthOfHeader = measureScrollbar({ direction: 'horizontal', prefixCls });
|
||||
// Add negative margin bottom for scroll bar overflow bug
|
||||
if (scrollbarWidthOfHeader > 0 && !fixed) {
|
||||
headStyle.marginBottom = `-${scrollbarWidthOfHeader}px`;
|
||||
headStyle.paddingBottom = '0px';
|
||||
// https://github.com/ant-design/ant-design/pull/19986
|
||||
headStyle.minWidth = `${scrollbarWidth}px`;
|
||||
// https://github.com/ant-design/ant-design/issues/17051
|
||||
headStyle.overflowX = 'scroll';
|
||||
headStyle.overflowY = scrollbarWidth === 0 ? 'hidden' : 'scroll';
|
||||
}
|
||||
}
|
||||
|
||||
if (!useFixedHeader || !showHeader) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key="headTable"
|
||||
ref={fixed ? () => {} : saveRef('headTable')}
|
||||
class={classNames(`${prefixCls}-header`, {
|
||||
[`${prefixCls}-hide-scrollbar`]: scrollbarWidth > 0,
|
||||
})}
|
||||
style={headStyle}
|
||||
onScroll={handleBodyScrollLeft}
|
||||
>
|
||||
<BaseTable
|
||||
tableClassName={tableClassName}
|
||||
hasHead
|
||||
hasBody={false}
|
||||
fixed={fixed}
|
||||
columns={columns}
|
||||
expander={expander}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
@ -1,611 +0,0 @@
|
|||
/* eslint-disable camelcase */
|
||||
import {
|
||||
provide,
|
||||
markRaw,
|
||||
defineComponent,
|
||||
nextTick,
|
||||
reactive,
|
||||
computed,
|
||||
ref,
|
||||
onUpdated,
|
||||
onMounted,
|
||||
toRef,
|
||||
} from 'vue';
|
||||
import shallowequal from '../../_util/shallowequal';
|
||||
import merge from 'lodash-es/merge';
|
||||
import classes from '../../_util/component-classes';
|
||||
import classNames from '../../_util/classNames';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import { debounce, getColumnsKey, getDataAndAriaProps, validateValue } from './utils';
|
||||
import warning from '../../_util/warning';
|
||||
import addEventListener from '../../vc-util/Dom/addEventListener';
|
||||
import HeadTable from './HeadTable';
|
||||
import BodyTable from './BodyTable';
|
||||
import ExpandableTable from './ExpandableTable';
|
||||
import { initDefaultProps, getOptionProps } from '../../_util/props-util';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { useLayoutState } from '../../_util/hooks/useLayoutState';
|
||||
import useColumnManager from './useColumnManager';
|
||||
import useStickyOffsets from './useStickyOffsets';
|
||||
import { getCellFixedInfo } from './fixUtil';
|
||||
import ResizeObserver from '../../vc-resize-observer';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Table',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(
|
||||
{
|
||||
data: PropTypes.array,
|
||||
useFixedHeader: PropTypes.looseBool,
|
||||
columns: PropTypes.array,
|
||||
prefixCls: PropTypes.string,
|
||||
bodyStyle: PropTypes.object,
|
||||
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
||||
customRow: PropTypes.func,
|
||||
customHeaderRow: PropTypes.func,
|
||||
// onRowClick: PropTypes.func,
|
||||
// onRowDoubleClick: PropTypes.func,
|
||||
// onRowContextMenu: PropTypes.func,
|
||||
// onRowMouseEnter: PropTypes.func,
|
||||
// onRowMouseLeave: PropTypes.func,
|
||||
showHeader: PropTypes.looseBool,
|
||||
title: PropTypes.func,
|
||||
id: PropTypes.string,
|
||||
footer: PropTypes.func,
|
||||
emptyText: PropTypes.any,
|
||||
scroll: PropTypes.object,
|
||||
rowRef: PropTypes.func,
|
||||
// getBodyWrapper: PropTypes.func,
|
||||
components: PropTypes.shape({
|
||||
table: PropTypes.any,
|
||||
header: PropTypes.shape({
|
||||
wrapper: PropTypes.any,
|
||||
row: PropTypes.any,
|
||||
cell: PropTypes.any,
|
||||
}).loose,
|
||||
body: PropTypes.shape({
|
||||
wrapper: PropTypes.any,
|
||||
row: PropTypes.any,
|
||||
cell: PropTypes.any,
|
||||
}).loose,
|
||||
}).loose,
|
||||
expandIconAsCell: PropTypes.looseBool,
|
||||
expandedRowKeys: PropTypes.array,
|
||||
expandedRowClassName: PropTypes.func,
|
||||
defaultExpandAllRows: PropTypes.looseBool,
|
||||
defaultExpandedRowKeys: PropTypes.array,
|
||||
expandIconColumnIndex: PropTypes.number,
|
||||
expandedRowRender: PropTypes.func,
|
||||
childrenColumnName: PropTypes.string,
|
||||
indentSize: PropTypes.number,
|
||||
expandRowByClick: PropTypes.looseBool,
|
||||
expandIcon: PropTypes.func,
|
||||
tableLayout: PropTypes.string,
|
||||
transformCellText: PropTypes.func,
|
||||
},
|
||||
{
|
||||
data: [],
|
||||
useFixedHeader: false,
|
||||
rowKey: 'key',
|
||||
rowClassName: () => '',
|
||||
prefixCls: 'rc-table',
|
||||
bodyStyle: {},
|
||||
showHeader: true,
|
||||
scroll: {},
|
||||
rowRef: () => null,
|
||||
emptyText: () => 'No Data',
|
||||
customHeaderRow: () => {},
|
||||
},
|
||||
),
|
||||
setup(props) {
|
||||
const columnManager = useColumnManager(toRef(props, 'columns'));
|
||||
const colsKeys = computed(() => getColumnsKey(columnManager.leafColumns.value));
|
||||
const [colsWidths, updateColsWidths] = useLayoutState(new Map());
|
||||
const pureColWidths = computed(() =>
|
||||
colsKeys.value.map(columnKey => colsWidths.value.get(columnKey)),
|
||||
);
|
||||
const stickyOffsets = useStickyOffsets(pureColWidths, columnManager.leafColumns);
|
||||
const onColumnResize = (columnKey, width) => {
|
||||
updateColsWidths(widths => {
|
||||
if (widths.get(columnKey) !== width) {
|
||||
const newWidths = new Map(widths);
|
||||
newWidths.set(columnKey, width);
|
||||
return newWidths;
|
||||
}
|
||||
return widths;
|
||||
});
|
||||
};
|
||||
const fixedInfoList = computed(() =>
|
||||
columnManager.leafColumns.value.map((_, colIndex) =>
|
||||
getCellFixedInfo(colIndex, colIndex, columnManager.leafColumns.value, stickyOffsets.value),
|
||||
),
|
||||
);
|
||||
const store = reactive({
|
||||
currentHoverKey: null,
|
||||
fixedColumnsHeadRowsHeight: [],
|
||||
fixedColumnsBodyRowsHeight: {},
|
||||
expandedRowsHeight: {},
|
||||
expandedRowKeys: [],
|
||||
columnManager,
|
||||
fixedInfoList,
|
||||
stickyOffsets,
|
||||
});
|
||||
provide('table-store', store);
|
||||
const bodyRef = ref();
|
||||
const pingedLeft = ref(false);
|
||||
const pingedRight = ref(false);
|
||||
const horizonScroll = computed(() => props.scroll && validateValue(props.scroll.x));
|
||||
const onScroll = currentTarget => {
|
||||
const { scrollWidth, clientWidth, scrollLeft } = currentTarget;
|
||||
pingedLeft.value = scrollLeft > 0;
|
||||
pingedRight.value = scrollLeft < scrollWidth - clientWidth;
|
||||
};
|
||||
onUpdated(() => {
|
||||
nextTick(() => {
|
||||
horizonScroll.value && onScroll(bodyRef.value.$el);
|
||||
});
|
||||
});
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
horizonScroll.value && onScroll(bodyRef.value.$el);
|
||||
});
|
||||
});
|
||||
const onFullTableResize = () => {
|
||||
horizonScroll.value && onScroll(bodyRef.value.$el);
|
||||
};
|
||||
return {
|
||||
bodyRef,
|
||||
store,
|
||||
onColumnResize,
|
||||
columnManager,
|
||||
onScroll,
|
||||
pingedLeft,
|
||||
pingedRight,
|
||||
onFullTableResize,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
this.preData = [...this.data];
|
||||
return {
|
||||
sComponents: markRaw(
|
||||
merge(
|
||||
{
|
||||
table: 'table',
|
||||
header: {
|
||||
wrapper: 'thead',
|
||||
row: 'tr',
|
||||
cell: 'th',
|
||||
},
|
||||
body: {
|
||||
wrapper: 'tbody',
|
||||
row: 'tr',
|
||||
cell: 'td',
|
||||
},
|
||||
},
|
||||
this.components,
|
||||
),
|
||||
),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
dataLen() {
|
||||
return this.$props.data.length;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
components() {
|
||||
this._components = merge(
|
||||
{
|
||||
table: 'table',
|
||||
header: {
|
||||
wrapper: 'thead',
|
||||
row: 'tr',
|
||||
cell: 'th',
|
||||
},
|
||||
body: {
|
||||
wrapper: 'tbody',
|
||||
row: 'tr',
|
||||
cell: 'td',
|
||||
},
|
||||
},
|
||||
this.components,
|
||||
);
|
||||
},
|
||||
dataLen(val, preVal) {
|
||||
if ((val === 0 || preVal === 0) && this.hasScrollX()) {
|
||||
nextTick(() => {
|
||||
this.resetScrollX();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
provide('table', this);
|
||||
|
||||
this.setScrollPosition('left');
|
||||
|
||||
this.debouncedWindowResize = debounce(this.handleWindowResize, 150);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (this.columnManager.isAnyColumnsFixed.value) {
|
||||
this.handleWindowResize();
|
||||
this.resizeEvent = addEventListener(window, 'resize', this.debouncedWindowResize);
|
||||
}
|
||||
// https://github.com/ant-design/ant-design/issues/11635
|
||||
if (this.ref_headTable) {
|
||||
this.ref_headTable.scrollLeft = 0;
|
||||
}
|
||||
if (this.ref_bodyTable) {
|
||||
this.ref_bodyTable.scrollLeft = 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
updated() {
|
||||
this.$nextTick(() => {
|
||||
if (this.columnManager.isAnyColumnsFixed.value) {
|
||||
this.handleWindowResize();
|
||||
if (!this.resizeEvent) {
|
||||
this.resizeEvent = addEventListener(window, 'resize', this.debouncedWindowResize);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
if (this.resizeEvent) {
|
||||
this.resizeEvent.remove();
|
||||
}
|
||||
if (this.debouncedWindowResize) {
|
||||
this.debouncedWindowResize.cancel();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRowKey(record, index) {
|
||||
const rowKey = this.rowKey;
|
||||
const key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
|
||||
warning(
|
||||
key !== undefined,
|
||||
'Each record in table should have a unique `key` prop,' +
|
||||
'or set `rowKey` to an unique primary key.',
|
||||
);
|
||||
return key === undefined ? index : key;
|
||||
},
|
||||
|
||||
setScrollPosition(position) {
|
||||
this.scrollPosition = position;
|
||||
if (this.tableNode) {
|
||||
const { prefixCls } = this;
|
||||
if (position === 'both') {
|
||||
classes(this.tableNode)
|
||||
.remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
|
||||
.add(`${prefixCls}-scroll-position-left`)
|
||||
.add(`${prefixCls}-scroll-position-right`);
|
||||
} else {
|
||||
classes(this.tableNode)
|
||||
.remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
|
||||
.add(`${prefixCls}-scroll-position-${position}`);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
setScrollPositionClassName() {
|
||||
const node = this.ref_bodyTable;
|
||||
const scrollToLeft = node.scrollLeft === 0;
|
||||
const scrollToRight =
|
||||
node.scrollLeft + 1 >=
|
||||
node.children[0].getBoundingClientRect().width - node.getBoundingClientRect().width;
|
||||
if (scrollToLeft && scrollToRight) {
|
||||
this.setScrollPosition('both');
|
||||
} else if (scrollToLeft) {
|
||||
this.setScrollPosition('left');
|
||||
} else if (scrollToRight) {
|
||||
this.setScrollPosition('right');
|
||||
} else if (this.scrollPosition !== 'middle') {
|
||||
this.setScrollPosition('middle');
|
||||
}
|
||||
},
|
||||
|
||||
isTableLayoutFixed() {
|
||||
const { tableLayout, columns = [], useFixedHeader, scroll = {} } = this.$props;
|
||||
if (typeof tableLayout !== 'undefined') {
|
||||
return tableLayout === 'fixed';
|
||||
}
|
||||
// if one column is ellipsis, use fixed table layout to fix align issue
|
||||
if (columns.some(({ ellipsis }) => !!ellipsis)) {
|
||||
return true;
|
||||
}
|
||||
// if header fixed, use fixed table layout to fix align issue
|
||||
if (useFixedHeader || scroll.y) {
|
||||
return true;
|
||||
}
|
||||
// if scroll.x is number/px/% width value, we should fixed table layout
|
||||
// to avoid long word layout broken issue
|
||||
if (scroll.x && scroll.x !== true && scroll.x !== 'max-content') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
handleWindowResize() {
|
||||
this.syncFixedTableRowHeight();
|
||||
this.setScrollPositionClassName();
|
||||
},
|
||||
|
||||
syncFixedTableRowHeight() {
|
||||
const tableRect = this.tableNode.getBoundingClientRect();
|
||||
// If tableNode's height less than 0, suppose it is hidden and don't recalculate rowHeight.
|
||||
// see: https://github.com/ant-design/ant-design/issues/4836
|
||||
if (tableRect.height !== undefined && tableRect.height <= 0) {
|
||||
return;
|
||||
}
|
||||
const { prefixCls } = this;
|
||||
const headRows = this.ref_headTable
|
||||
? this.ref_headTable.querySelectorAll('thead')
|
||||
: this.ref_bodyTable.querySelectorAll('thead');
|
||||
const bodyRows = this.ref_bodyTable.querySelectorAll(`.${prefixCls}-row`) || [];
|
||||
const fixedColumnsHeadRowsHeight = [].map.call(headRows, row => {
|
||||
return row.getBoundingClientRect().height
|
||||
? row.getBoundingClientRect().height - 0.5
|
||||
: 'auto';
|
||||
});
|
||||
const state = this.store;
|
||||
const fixedColumnsBodyRowsHeight = [].reduce.call(
|
||||
bodyRows,
|
||||
(acc, row) => {
|
||||
const rowKey = row.getAttribute('data-row-key');
|
||||
const height =
|
||||
row.getBoundingClientRect().height ||
|
||||
state.fixedColumnsBodyRowsHeight[rowKey] ||
|
||||
'auto';
|
||||
acc[rowKey] = height;
|
||||
return acc;
|
||||
},
|
||||
{},
|
||||
);
|
||||
if (
|
||||
shallowequal(state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
|
||||
shallowequal(state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.store.fixedColumnsHeadRowsHeight = fixedColumnsHeadRowsHeight;
|
||||
this.store.fixedColumnsBodyRowsHeight = fixedColumnsBodyRowsHeight;
|
||||
},
|
||||
|
||||
resetScrollX() {
|
||||
if (this.ref_headTable) {
|
||||
this.ref_headTable.scrollLeft = 0;
|
||||
}
|
||||
if (this.ref_bodyTable) {
|
||||
this.ref_bodyTable.scrollLeft = 0;
|
||||
}
|
||||
},
|
||||
|
||||
hasScrollX() {
|
||||
const { scroll = {} } = this;
|
||||
return 'x' in scroll;
|
||||
},
|
||||
|
||||
handleBodyScrollLeft(e) {
|
||||
const target = e.target;
|
||||
const { scroll = {} } = this;
|
||||
const { ref_headTable, ref_bodyTable } = this;
|
||||
if (target.scrollLeft !== this.lastScrollLeft && scroll.x) {
|
||||
if (target === ref_bodyTable && ref_headTable) {
|
||||
ref_headTable.scrollLeft = target.scrollLeft;
|
||||
} else if (target === ref_headTable && ref_bodyTable) {
|
||||
ref_bodyTable.scrollLeft = target.scrollLeft;
|
||||
}
|
||||
this.setScrollPositionClassName();
|
||||
}
|
||||
// Remember last scrollLeft for scroll direction detecting.
|
||||
this.lastScrollLeft = target.scrollLeft;
|
||||
},
|
||||
|
||||
handleBodyScrollTop(e) {
|
||||
const target = e.target;
|
||||
// Fix https://github.com/ant-design/ant-design/issues/9033
|
||||
if (e.currentTarget !== target) {
|
||||
return;
|
||||
}
|
||||
const { scroll = {} } = this;
|
||||
const { ref_headTable, ref_bodyTable, ref_fixedColumnsBodyLeft, ref_fixedColumnsBodyRight } =
|
||||
this;
|
||||
if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== ref_headTable) {
|
||||
const scrollTop = target.scrollTop;
|
||||
if (ref_fixedColumnsBodyLeft && target !== ref_fixedColumnsBodyLeft) {
|
||||
ref_fixedColumnsBodyLeft.scrollTop = scrollTop;
|
||||
}
|
||||
if (ref_fixedColumnsBodyRight && target !== ref_fixedColumnsBodyRight) {
|
||||
ref_fixedColumnsBodyRight.scrollTop = scrollTop;
|
||||
}
|
||||
if (ref_bodyTable && target !== ref_bodyTable) {
|
||||
ref_bodyTable.scrollTop = scrollTop;
|
||||
}
|
||||
}
|
||||
// Remember last scrollTop for scroll direction detecting.
|
||||
this.lastScrollTop = target.scrollTop;
|
||||
},
|
||||
handleBodyScroll(e) {
|
||||
this.onScroll(e.target);
|
||||
this.handleBodyScrollLeft(e);
|
||||
this.handleBodyScrollTop(e);
|
||||
},
|
||||
handleWheel(event) {
|
||||
const { scroll = {} } = this.$props;
|
||||
if (window.navigator.userAgent.match(/Trident\/7\./) && scroll.y) {
|
||||
event.preventDefault();
|
||||
const wd = event.deltaY;
|
||||
const target = event.target;
|
||||
const {
|
||||
ref_bodyTable: bodyTable,
|
||||
ref_fixedColumnsBodyLeft: fixedColumnsBodyLeft,
|
||||
ref_fixedColumnsBodyRight: fixedColumnsBodyRight,
|
||||
} = this;
|
||||
let scrollTop = 0;
|
||||
|
||||
if (this.lastScrollTop) {
|
||||
scrollTop = this.lastScrollTop + wd;
|
||||
} else {
|
||||
scrollTop = wd;
|
||||
}
|
||||
|
||||
if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) {
|
||||
fixedColumnsBodyLeft.scrollTop = scrollTop;
|
||||
}
|
||||
if (fixedColumnsBodyRight && target !== fixedColumnsBodyRight) {
|
||||
fixedColumnsBodyRight.scrollTop = scrollTop;
|
||||
}
|
||||
if (bodyTable && target !== bodyTable) {
|
||||
bodyTable.scrollTop = scrollTop;
|
||||
}
|
||||
}
|
||||
},
|
||||
// saveChildrenRef(name, node) {
|
||||
// this[`ref_${name}`] = node;
|
||||
// },
|
||||
saveRef(name) {
|
||||
return node => {
|
||||
this[`ref_${name}`] = node;
|
||||
};
|
||||
},
|
||||
|
||||
saveTableNodeRef(node) {
|
||||
this.tableNode = node;
|
||||
},
|
||||
renderMainTable() {
|
||||
const { scroll, prefixCls } = this;
|
||||
const isAnyColumnsFixed = this.columnManager.isAnyColumnsFixed.value;
|
||||
const scrollable = isAnyColumnsFixed || scroll.x || scroll.y;
|
||||
|
||||
const table = [
|
||||
this.renderTable({
|
||||
columns: this.columnManager.groupedColumns.value,
|
||||
isAnyColumnsFixed,
|
||||
}),
|
||||
this.renderEmptyText(),
|
||||
this.renderFooter(),
|
||||
];
|
||||
|
||||
return scrollable ? (
|
||||
<ResizeObserver onResize={this.onFullTableResize}>
|
||||
<div class={`${prefixCls}-scroll`}>{table}</div>
|
||||
</ResizeObserver>
|
||||
) : (
|
||||
table
|
||||
);
|
||||
},
|
||||
|
||||
renderTable(options) {
|
||||
const { columns, isAnyColumnsFixed } = options;
|
||||
const { prefixCls, scroll = {} } = this;
|
||||
const tableClassName = scroll.x ? `${prefixCls}-fixed` : '';
|
||||
|
||||
const headTable = (
|
||||
<HeadTable
|
||||
key="head"
|
||||
columns={columns}
|
||||
tableClassName={tableClassName}
|
||||
handleBodyScrollLeft={this.handleBodyScrollLeft}
|
||||
expander={this.expander}
|
||||
/>
|
||||
);
|
||||
|
||||
const bodyTable = (
|
||||
<BodyTable
|
||||
key="body"
|
||||
columns={columns}
|
||||
tableClassName={tableClassName}
|
||||
getRowKey={this.getRowKey}
|
||||
handleWheel={this.handleWheel}
|
||||
handleBodyScroll={this.handleBodyScroll}
|
||||
expander={this.expander}
|
||||
isAnyColumnsFixed={isAnyColumnsFixed}
|
||||
ref="bodyRef"
|
||||
/>
|
||||
);
|
||||
|
||||
return [headTable, bodyTable];
|
||||
},
|
||||
|
||||
renderTitle() {
|
||||
const { title, prefixCls, data } = this;
|
||||
return title ? (
|
||||
<div class={`${prefixCls}-title`} key="title">
|
||||
{title(data)}
|
||||
</div>
|
||||
) : null;
|
||||
},
|
||||
|
||||
renderFooter() {
|
||||
const { footer, prefixCls, data } = this;
|
||||
return footer ? (
|
||||
<div class={`${prefixCls}-footer`} key="footer">
|
||||
{footer(data)}
|
||||
</div>
|
||||
) : null;
|
||||
},
|
||||
|
||||
renderEmptyText() {
|
||||
const { emptyText, prefixCls, data } = this;
|
||||
if (data.length) {
|
||||
return null;
|
||||
}
|
||||
const emptyClassName = `${prefixCls}-placeholder`;
|
||||
return (
|
||||
<div class={emptyClassName} key="emptyText">
|
||||
{typeof emptyText === 'function' ? emptyText() : emptyText}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const props = { ...getOptionProps(this), ...this.$attrs };
|
||||
const { columnManager, getRowKey } = this;
|
||||
const prefixCls = props.prefixCls;
|
||||
|
||||
const tableClassName = classNames(props.prefixCls, props.class, {
|
||||
[`${prefixCls}-fixed-header`]: props.useFixedHeader || (props.scroll && props.scroll.y),
|
||||
[`${prefixCls}-scroll-position-left ${prefixCls}-scroll-position-right`]:
|
||||
this.scrollPosition === 'both',
|
||||
[`${prefixCls}-scroll-position-${this.scrollPosition}`]: this.scrollPosition !== 'both',
|
||||
[`${prefixCls}-layout-fixed`]: this.isTableLayoutFixed(),
|
||||
[`${prefixCls}-ping-left`]: this.pingedLeft,
|
||||
[`${prefixCls}-ping-right`]: this.pingedRight,
|
||||
});
|
||||
const dataAndAriaProps = getDataAndAriaProps(props);
|
||||
const expandableTableProps = {
|
||||
...props,
|
||||
columnManager,
|
||||
getRowKey,
|
||||
};
|
||||
return (
|
||||
<ExpandableTable
|
||||
{...expandableTableProps}
|
||||
v-slots={{
|
||||
default: expander => {
|
||||
this.expander = expander;
|
||||
return (
|
||||
<div
|
||||
ref={this.saveTableNodeRef}
|
||||
class={tableClassName}
|
||||
style={props.style}
|
||||
id={props.id}
|
||||
{...dataAndAriaProps}
|
||||
>
|
||||
{this.renderTitle()}
|
||||
<div class={`${prefixCls}-content`}>{this.renderMainTable()}</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
import { inject, toRaw } from 'vue';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import get from 'lodash-es/get';
|
||||
import classNames from '../../_util/classNames';
|
||||
import { isValidElement } from '../../_util/props-util';
|
||||
|
||||
function isInvalidRenderCellText(text) {
|
||||
return (
|
||||
text && !isValidElement(text) && Object.prototype.toString.call(text) === '[object Object]'
|
||||
);
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'TableCell',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
record: PropTypes.object,
|
||||
prefixCls: PropTypes.string,
|
||||
index: PropTypes.number,
|
||||
indent: PropTypes.number,
|
||||
indentSize: PropTypes.number,
|
||||
column: PropTypes.object,
|
||||
expandIcon: PropTypes.any,
|
||||
component: PropTypes.any,
|
||||
colIndex: PropTypes.number,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
table: inject('table', {}),
|
||||
store: inject('table-store', {}),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
const {
|
||||
record,
|
||||
column: { onCellClick },
|
||||
} = this;
|
||||
if (onCellClick) {
|
||||
onCellClick(record, e);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const {
|
||||
record,
|
||||
indentSize,
|
||||
prefixCls,
|
||||
indent,
|
||||
index,
|
||||
expandIcon,
|
||||
column,
|
||||
component: BodyCell,
|
||||
} = this;
|
||||
const fixedInfoList = this.store.fixedInfoList || [];
|
||||
const fixedInfo = fixedInfoList[this.colIndex] || {};
|
||||
const { fixLeft, fixRight, firstFixLeft, lastFixLeft, firstFixRight, lastFixRight } = fixedInfo;
|
||||
// ====================== Fixed =======================
|
||||
const fixedStyle = {};
|
||||
const isFixLeft = typeof fixLeft === 'number';
|
||||
const isFixRight = typeof fixRight === 'number';
|
||||
|
||||
if (isFixLeft) {
|
||||
fixedStyle.position = 'sticky';
|
||||
fixedStyle.left = `${fixLeft}px`;
|
||||
}
|
||||
if (isFixRight) {
|
||||
fixedStyle.position = 'sticky';
|
||||
fixedStyle.right = `${fixRight}px`;
|
||||
}
|
||||
const { dataIndex, customRender, className = '' } = column;
|
||||
const { transformCellText, prefixCls: rootPrefixCls } = this.table;
|
||||
// We should return undefined if no dataIndex is specified, but in order to
|
||||
// be compatible with object-path's behavior, we return the record object instead.
|
||||
let text;
|
||||
if (typeof dataIndex === 'number') {
|
||||
text = get(record, dataIndex);
|
||||
} else if (!dataIndex || dataIndex.length === 0) {
|
||||
text = record;
|
||||
} else {
|
||||
text = get(record, dataIndex);
|
||||
}
|
||||
let tdProps = {
|
||||
onClick: this.handleClick,
|
||||
};
|
||||
let colSpan;
|
||||
let rowSpan;
|
||||
|
||||
if (customRender) {
|
||||
text = customRender({ text, record, index, column });
|
||||
if (isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || text.attrs || tdProps;
|
||||
({ colSpan, rowSpan } = tdProps);
|
||||
text = text.children;
|
||||
}
|
||||
}
|
||||
|
||||
if (column.customCell) {
|
||||
tdProps = { ...tdProps, ...column.customCell(record, index) };
|
||||
}
|
||||
|
||||
// Fix https://github.com/ant-design/ant-design/issues/1202
|
||||
if (isInvalidRenderCellText(text)) {
|
||||
text = null;
|
||||
}
|
||||
|
||||
if (transformCellText) {
|
||||
text = transformCellText({ text, column, record, index });
|
||||
}
|
||||
|
||||
const indentText = expandIcon ? (
|
||||
<span
|
||||
style={{ paddingLeft: `${indentSize * indent}px` }}
|
||||
class={`${prefixCls}-indent indent-level-${indent}`}
|
||||
/>
|
||||
) : null;
|
||||
|
||||
if (rowSpan === 0 || colSpan === 0) {
|
||||
return null;
|
||||
}
|
||||
if (column.align) {
|
||||
tdProps.style = { textAlign: column.align, ...tdProps.style };
|
||||
}
|
||||
|
||||
const cellClassName = classNames(className, column.class, {
|
||||
[`${prefixCls}-cell-ellipsis`]: !!column.ellipsis,
|
||||
// 如果有宽度，增加断行处理
|
||||
// https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241
|
||||
[`${prefixCls}-cell-break-word`]: !!column.width,
|
||||
[`${rootPrefixCls}-cell-fix-left`]: isFixLeft,
|
||||
[`${rootPrefixCls}-cell-fix-left-first`]: firstFixLeft,
|
||||
[`${rootPrefixCls}-cell-fix-left-last`]: lastFixLeft,
|
||||
[`${rootPrefixCls}-cell-fix-right`]: isFixRight,
|
||||
[`${rootPrefixCls}-cell-fix-right-first`]: firstFixRight,
|
||||
[`${rootPrefixCls}-cell-fix-right-last`]: lastFixRight,
|
||||
});
|
||||
|
||||
if (column.ellipsis) {
|
||||
if (typeof text === 'string') {
|
||||
tdProps.title = text;
|
||||
} else if (text) {
|
||||
// const { props: textProps } = text;
|
||||
// if (textProps && textProps.children && typeof textProps.children === 'string') {
|
||||
// tdProps.attrs.title = textProps.children;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<BodyCell
|
||||
class={cellClassName}
|
||||
{...tdProps}
|
||||
{...{ style: { ...(tdProps.style || {}), ...fixedStyle } }}
|
||||
>
|
||||
{indentText}
|
||||
{expandIcon}
|
||||
{toRaw(text)}
|
||||
</BodyCell>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
import { inject } from 'vue';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import TableHeaderRow from './TableHeaderRow';
|
||||
|
||||
function parseHeaderRows(rootColumns) {
|
||||
const rows = [];
|
||||
|
||||
function fillRowCells(columns, colIndex, rowIndex = 0) {
|
||||
// Init rows
|
||||
rows[rowIndex] = rows[rowIndex] || [];
|
||||
|
||||
let currentColIndex = colIndex;
|
||||
const colSpans = columns.filter(Boolean).map(column => {
|
||||
const cell = {
|
||||
key: column.key,
|
||||
className: column.className || column.class || '',
|
||||
children: column.title,
|
||||
column,
|
||||
colStart: currentColIndex,
|
||||
};
|
||||
|
||||
let colSpan = 1;
|
||||
|
||||
const subColumns = column.children;
|
||||
if (subColumns && subColumns.length > 0) {
|
||||
colSpan = fillRowCells(subColumns, currentColIndex, rowIndex + 1).reduce(
|
||||
(total, count) => total + count,
|
||||
0,
|
||||
);
|
||||
cell.hasSubColumns = true;
|
||||
}
|
||||
|
||||
if ('colSpan' in column) {
|
||||
({ colSpan } = column);
|
||||
}
|
||||
|
||||
if ('rowSpan' in column) {
|
||||
cell.rowSpan = column.rowSpan;
|
||||
}
|
||||
|
||||
cell.colSpan = colSpan;
|
||||
cell.colEnd = cell.colStart + colSpan - 1;
|
||||
rows[rowIndex].push(cell);
|
||||
|
||||
currentColIndex += colSpan;
|
||||
|
||||
return colSpan;
|
||||
});
|
||||
|
||||
return colSpans;
|
||||
}
|
||||
|
||||
// Generate `rows` cell data
|
||||
fillRowCells(rootColumns, 0);
|
||||
|
||||
// Handle `rowSpan`
|
||||
const rowCount = rows.length;
|
||||
for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
|
||||
rows[rowIndex].forEach(cell => {
|
||||
if (!('rowSpan' in cell) && !cell.hasSubColumns) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
cell.rowSpan = rowCount - rowIndex;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'TableHeader',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
fixed: PropTypes.string,
|
||||
columns: PropTypes.array.isRequired,
|
||||
expander: PropTypes.object.isRequired,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
table: inject('table', {}),
|
||||
};
|
||||
},
|
||||
|
||||
render() {
|
||||
const { sComponents: components, prefixCls, showHeader, customHeaderRow } = this.table;
|
||||
const { expander, columns, fixed } = this;
|
||||
|
||||
if (!showHeader) {
|
||||
return null;
|
||||
}
|
||||
const rows = parseHeaderRows(this.columns);
|
||||
expander.renderExpandIndentCell(rows, fixed);
|
||||
|
||||
const HeaderWrapper = components.header.wrapper;
|
||||
|
||||
return (
|
||||
<HeaderWrapper class={`${prefixCls}-thead`}>
|
||||
{rows.map((row, index) => (
|
||||
<TableHeaderRow
|
||||
prefixCls={prefixCls}
|
||||
key={index}
|
||||
index={index}
|
||||
fixed={fixed}
|
||||
columns={columns}
|
||||
rows={rows}
|
||||
row={row}
|
||||
components={components}
|
||||
customHeaderRow={customHeaderRow}
|
||||
/>
|
||||
))}
|
||||
</HeaderWrapper>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
import classNames from '../../_util/classNames';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import { computed, inject } from 'vue';
|
||||
import { getCellFixedInfo } from './fixUtil';
|
||||
|
||||
const TableHeaderRow = {
|
||||
name: 'TableHeaderRow',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
index: PropTypes.number,
|
||||
fixed: PropTypes.string,
|
||||
columns: PropTypes.array,
|
||||
rows: PropTypes.array,
|
||||
row: PropTypes.array,
|
||||
components: PropTypes.object,
|
||||
customHeaderRow: PropTypes.func,
|
||||
prefixCls: PropTypes.prefixCls,
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject('table-store', () => ({}));
|
||||
return {
|
||||
height: computed(() => {
|
||||
const { fixedColumnsHeadRowsHeight } = store;
|
||||
const { columns, rows, fixed } = props;
|
||||
const headerHeight = fixedColumnsHeadRowsHeight[0];
|
||||
|
||||
if (!fixed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (headerHeight && columns) {
|
||||
if (headerHeight === 'auto') {
|
||||
return 'auto';
|
||||
}
|
||||
return `${headerHeight / rows.length}px`;
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
store,
|
||||
};
|
||||
},
|
||||
render() {
|
||||
const { row, index, height, components, customHeaderRow, prefixCls } = this;
|
||||
const HeaderRow = components.header.row;
|
||||
const HeaderCell = components.header.cell;
|
||||
const rowProps = customHeaderRow(
|
||||
row.map(cell => cell.column),
|
||||
index,
|
||||
);
|
||||
const customStyle = rowProps ? rowProps.style : {};
|
||||
const style = { height, ...customStyle };
|
||||
if (style.height === null) {
|
||||
delete style.height;
|
||||
}
|
||||
const { stickyOffsets, columnManager } = this.store;
|
||||
return (
|
||||
<HeaderRow {...rowProps} style={style}>
|
||||
{row.map((cell, i) => {
|
||||
const { column, isLast, children, className, ...cellProps } = cell;
|
||||
const fixedInfo = getCellFixedInfo(
|
||||
cell.colStart,
|
||||
cell.colEnd,
|
||||
columnManager.leafColumns,
|
||||
stickyOffsets,
|
||||
);
|
||||
const customProps = column.customHeaderCell ? column.customHeaderCell(column) : {};
|
||||
const headerCellProps = {
|
||||
...cellProps,
|
||||
...customProps,
|
||||
key: column.key || column.dataIndex || i,
|
||||
};
|
||||
if (headerCellProps.colSpan === 0) {
|
||||
return null;
|
||||
}
|
||||
if (column.align) {
|
||||
headerCellProps.style = { ...customProps.style, textAlign: column.align };
|
||||
}
|
||||
// ====================== Fixed =======================
|
||||
const { fixLeft, fixRight, firstFixLeft, lastFixLeft, firstFixRight, lastFixRight } =
|
||||
fixedInfo;
|
||||
const fixedStyle = {};
|
||||
const isFixLeft = typeof fixLeft === 'number';
|
||||
const isFixRight = typeof fixRight === 'number';
|
||||
|
||||
if (isFixLeft) {
|
||||
fixedStyle.position = 'sticky';
|
||||
fixedStyle.left = `${fixLeft}px`;
|
||||
}
|
||||
if (isFixRight) {
|
||||
fixedStyle.position = 'sticky';
|
||||
fixedStyle.right = `${fixRight}px`;
|
||||
}
|
||||
headerCellProps.class = classNames(
|
||||
customProps.class,
|
||||
customProps.className,
|
||||
column.class,
|
||||
column.className,
|
||||
{
|
||||
[`${prefixCls}-align-${column.align}`]: !!column.align,
|
||||
[`${prefixCls}-row-cell-ellipsis`]: !!column.ellipsis,
|
||||
[`${prefixCls}-row-cell-break-word`]: !!column.width,
|
||||
[`${prefixCls}-row-cell-last`]: isLast,
|
||||
[`${prefixCls}-cell-fix-left`]: isFixLeft,
|
||||
[`${prefixCls}-cell-fix-left-first`]: firstFixLeft,
|
||||
[`${prefixCls}-cell-fix-left-last`]: lastFixLeft,
|
||||
[`${prefixCls}-cell-fix-right`]: isFixRight,
|
||||
[`${prefixCls}-cell-fix-right-first`]: firstFixRight,
|
||||
[`${prefixCls}-cell-fix-right-last`]: lastFixRight,
|
||||
},
|
||||
);
|
||||
headerCellProps.style = { ...(headerCellProps.style || {}), ...fixedStyle };
|
||||
if (typeof HeaderCell === 'function') {
|
||||
return HeaderCell(headerCellProps, children);
|
||||
}
|
||||
return <HeaderCell {...headerCellProps}>{children}</HeaderCell>;
|
||||
})}
|
||||
</HeaderRow>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default TableHeaderRow;
|
||||
|
|
@ -1,302 +0,0 @@
|
|||
import classNames from '../../_util/classNames';
|
||||
import PropTypes, { withUndefined } from '../../_util/vue-types';
|
||||
import TableCell from './TableCell';
|
||||
import { initDefaultProps, findDOMNode } from '../../_util/props-util';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { computed, inject } from 'vue';
|
||||
function noop() {}
|
||||
const TableRow = {
|
||||
name: 'TableRow',
|
||||
inheritAttrs: false,
|
||||
mixins: [BaseMixin],
|
||||
props: initDefaultProps(
|
||||
{
|
||||
customRow: PropTypes.func,
|
||||
// onRowClick: PropTypes.func,
|
||||
// onRowDoubleClick: PropTypes.func,
|
||||
// onRowContextMenu: PropTypes.func,
|
||||
// onRowMouseEnter: PropTypes.func,
|
||||
// onRowMouseLeave: PropTypes.func,
|
||||
record: PropTypes.object,
|
||||
prefixCls: PropTypes.string,
|
||||
// onHover: PropTypes.func,
|
||||
columns: PropTypes.array,
|
||||
index: PropTypes.number,
|
||||
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||||
className: PropTypes.string,
|
||||
indent: PropTypes.number,
|
||||
indentSize: PropTypes.number,
|
||||
hasExpandIcon: PropTypes.func,
|
||||
fixed: withUndefined(PropTypes.oneOfType([PropTypes.string, PropTypes.looseBool])),
|
||||
renderExpandIcon: PropTypes.func,
|
||||
renderExpandIconCell: PropTypes.func,
|
||||
components: PropTypes.any,
|
||||
expandedRow: PropTypes.looseBool,
|
||||
isAnyColumnsFixed: PropTypes.looseBool,
|
||||
ancestorKeys: PropTypes.array.isRequired,
|
||||
expandIconColumnIndex: PropTypes.number,
|
||||
expandRowByClick: PropTypes.looseBool,
|
||||
// visible: PropTypes.looseBool,
|
||||
// hovered: PropTypes.looseBool,
|
||||
// height: PropTypes.any,
|
||||
},
|
||||
{
|
||||
// expandIconColumnIndex: 0,
|
||||
// expandRowByClick: false,
|
||||
hasExpandIcon() {},
|
||||
renderExpandIcon() {},
|
||||
renderExpandIconCell() {},
|
||||
},
|
||||
),
|
||||
|
||||
setup(props) {
|
||||
const store = inject('table-store', () => ({}));
|
||||
const visible = computed(() => {
|
||||
const { expandedRowKeys } = store;
|
||||
const { ancestorKeys } = props;
|
||||
return !!(ancestorKeys.length === 0 || ancestorKeys.every(k => expandedRowKeys.includes(k)));
|
||||
});
|
||||
const height = computed(() => {
|
||||
const { expandedRowsHeight, fixedColumnsBodyRowsHeight } = store;
|
||||
const { fixed, rowKey } = props;
|
||||
|
||||
if (!fixed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (expandedRowsHeight[rowKey]) {
|
||||
return expandedRowsHeight[rowKey];
|
||||
}
|
||||
|
||||
if (fixedColumnsBodyRowsHeight[rowKey]) {
|
||||
return fixedColumnsBodyRowsHeight[rowKey];
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
const hovered = computed(() => {
|
||||
const { currentHoverKey } = store;
|
||||
const { rowKey } = props;
|
||||
return currentHoverKey === rowKey;
|
||||
});
|
||||
return {
|
||||
store,
|
||||
visible,
|
||||
hovered,
|
||||
height,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
this.rowRef = null;
|
||||
return {
|
||||
shouldRender: this.visible,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.shouldRender) {
|
||||
this.$nextTick(() => {
|
||||
this.saveRowRef();
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
if (val) {
|
||||
this.shouldRender = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
updated() {
|
||||
if (this.shouldRender && !this.rowRef) {
|
||||
this.$nextTick(() => {
|
||||
this.saveRowRef();
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onRowClick(event, rowPropFunc = noop) {
|
||||
const { record, index } = this;
|
||||
this.__emit('rowClick', record, index, event);
|
||||
rowPropFunc(event);
|
||||
},
|
||||
|
||||
onRowDoubleClick(event, rowPropFunc = noop) {
|
||||
const { record, index } = this;
|
||||
this.__emit('rowDoubleClick', record, index, event);
|
||||
rowPropFunc(event);
|
||||
},
|
||||
|
||||
onContextMenu(event, rowPropFunc = noop) {
|
||||
const { record, index } = this;
|
||||
this.__emit('rowContextmenu', record, index, event);
|
||||
rowPropFunc(event);
|
||||
},
|
||||
|
||||
onMouseEnter(event, rowPropFunc = noop) {
|
||||
const { record, index, rowKey } = this;
|
||||
this.__emit('hover', true, rowKey);
|
||||
this.__emit('rowMouseenter', record, index, event);
|
||||
rowPropFunc(event);
|
||||
},
|
||||
|
||||
onMouseLeave(event, rowPropFunc = noop) {
|
||||
const { record, index, rowKey } = this;
|
||||
this.__emit('hover', false, rowKey);
|
||||
this.__emit('rowMouseleave', record, index, event);
|
||||
rowPropFunc(event);
|
||||
},
|
||||
|
||||
setExpandedRowHeight() {
|
||||
const { store, rowKey } = this;
|
||||
let { expandedRowsHeight } = store;
|
||||
const height = this.rowRef.getBoundingClientRect().height;
|
||||
expandedRowsHeight = {
|
||||
...expandedRowsHeight,
|
||||
[rowKey]: height,
|
||||
};
|
||||
store.expandedRowsHeight = expandedRowsHeight;
|
||||
},
|
||||
|
||||
setRowHeight() {
|
||||
const { store, rowKey } = this;
|
||||
const { fixedColumnsBodyRowsHeight } = store;
|
||||
const height = this.rowRef.getBoundingClientRect().height;
|
||||
store.fixedColumnsBodyRowsHeight = {
|
||||
...fixedColumnsBodyRowsHeight,
|
||||
[rowKey]: height,
|
||||
};
|
||||
},
|
||||
|
||||
getStyle() {
|
||||
const { height, visible } = this;
|
||||
let style = this.$attrs.style || {};
|
||||
if (height) {
|
||||
style = { ...style, height };
|
||||
}
|
||||
|
||||
if (!visible && !style.display) {
|
||||
style = { ...style, display: 'none' };
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
|
||||
saveRowRef() {
|
||||
this.rowRef = findDOMNode(this);
|
||||
const { isAnyColumnsFixed, fixed, expandedRow, ancestorKeys } = this;
|
||||
if (!isAnyColumnsFixed) {
|
||||
return;
|
||||
}
|
||||
if (!fixed && expandedRow) {
|
||||
this.setExpandedRowHeight();
|
||||
}
|
||||
if (!fixed && ancestorKeys.length >= 0) {
|
||||
this.setRowHeight();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
if (!this.shouldRender) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const {
|
||||
prefixCls,
|
||||
columns,
|
||||
record,
|
||||
rowKey,
|
||||
index,
|
||||
customRow = noop,
|
||||
indent,
|
||||
indentSize,
|
||||
hovered,
|
||||
height,
|
||||
visible,
|
||||
components,
|
||||
hasExpandIcon,
|
||||
renderExpandIcon,
|
||||
renderExpandIconCell,
|
||||
} = this;
|
||||
const BodyRow = components.body.row;
|
||||
const BodyCell = components.body.cell;
|
||||
|
||||
let className = this.$attrs.class || '';
|
||||
|
||||
if (hovered) {
|
||||
className += ` ${prefixCls}-hover`;
|
||||
}
|
||||
|
||||
const cells = [];
|
||||
|
||||
renderExpandIconCell(cells);
|
||||
|
||||
for (let i = 0; i < columns.length; i += 1) {
|
||||
const column = columns[i];
|
||||
|
||||
cells.push(
|
||||
<TableCell
|
||||
prefixCls={prefixCls}
|
||||
record={record}
|
||||
indentSize={indentSize}
|
||||
indent={indent}
|
||||
index={index}
|
||||
colIndex={i}
|
||||
column={column}
|
||||
key={column.key || column.dataIndex}
|
||||
expandIcon={hasExpandIcon(i) && renderExpandIcon()}
|
||||
component={BodyCell}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
const {
|
||||
class: customClass,
|
||||
className: customClassName,
|
||||
style: customStyle,
|
||||
...rowProps
|
||||
} = customRow(record, index) || {};
|
||||
|
||||
let style = { height: typeof height === 'number' ? `${height}px` : height };
|
||||
|
||||
if (!visible) {
|
||||
style.display = 'none';
|
||||
}
|
||||
|
||||
style = { ...style, ...customStyle };
|
||||
const rowClassName = classNames(
|
||||
prefixCls,
|
||||
className,
|
||||
`${prefixCls}-level-${indent}`,
|
||||
customClassName,
|
||||
customClass,
|
||||
);
|
||||
const bodyRowProps = {
|
||||
...rowProps,
|
||||
style,
|
||||
onClick: e => {
|
||||
this.onRowClick(e, rowProps.onClick);
|
||||
},
|
||||
onDblclick: e => {
|
||||
this.onRowDoubleClick(e, rowProps.onDblclick);
|
||||
},
|
||||
onMouseenter: e => {
|
||||
this.onMouseEnter(e, rowProps.onMouseenter);
|
||||
},
|
||||
onMouseleave: e => {
|
||||
this.onMouseLeave(e, rowProps.onMouseleave);
|
||||
},
|
||||
onContextmenu: e => {
|
||||
this.onContextMenu(e, rowProps.onContextmenu);
|
||||
},
|
||||
class: rowClassName,
|
||||
'data-row-key': rowKey,
|
||||
};
|
||||
return <BodyRow {...bodyRowProps}>{cells}</BodyRow>;
|
||||
},
|
||||
};
|
||||
|
||||
export default TableRow;
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
export interface StickyOffsets {
|
||||
left: readonly number[];
|
||||
right: readonly number[];
|
||||
isSticky?: boolean;
|
||||
}
|
||||
export type FixedType = 'left' | 'right' | boolean;
|
||||
export interface FixedInfo {
|
||||
fixLeft: number | false;
|
||||
fixRight: number | false;
|
||||
lastFixLeft: boolean;
|
||||
firstFixRight: boolean;
|
||||
|
||||
// For Rtl Direction
|
||||
lastFixRight: boolean;
|
||||
firstFixLeft: boolean;
|
||||
|
||||
isSticky: boolean;
|
||||
}
|
||||
|
||||
export function getCellFixedInfo(
|
||||
colStart: number,
|
||||
colEnd: number,
|
||||
columns: readonly { fixed?: FixedType }[],
|
||||
stickyOffsets: StickyOffsets,
|
||||
direction: 'ltr' | 'rtl',
|
||||
): FixedInfo {
|
||||
const startColumn = columns[colStart] || {};
|
||||
const endColumn = columns[colEnd] || {};
|
||||
|
||||
let fixLeft: number;
|
||||
let fixRight: number;
|
||||
|
||||
if (startColumn.fixed === 'left') {
|
||||
fixLeft = stickyOffsets.left[colStart];
|
||||
} else if (endColumn.fixed === 'right') {
|
||||
fixRight = stickyOffsets.right[colEnd];
|
||||
}
|
||||
|
||||
let lastFixLeft = false;
|
||||
let firstFixRight = false;
|
||||
|
||||
let lastFixRight = false;
|
||||
let firstFixLeft = false;
|
||||
|
||||
const nextColumn = columns[colEnd + 1];
|
||||
const prevColumn = columns[colStart - 1];
|
||||
|
||||
if (direction === 'rtl') {
|
||||
if (fixLeft !== undefined) {
|
||||
const prevFixLeft = prevColumn && prevColumn.fixed === 'left';
|
||||
firstFixLeft = !prevFixLeft;
|
||||
} else if (fixRight !== undefined) {
|
||||
const nextFixRight = nextColumn && nextColumn.fixed === 'right';
|
||||
lastFixRight = !nextFixRight;
|
||||
}
|
||||
} else if (fixLeft !== undefined) {
|
||||
const nextFixLeft = nextColumn && nextColumn.fixed === 'left';
|
||||
lastFixLeft = !nextFixLeft;
|
||||
} else if (fixRight !== undefined) {
|
||||
const prevFixRight = prevColumn && prevColumn.fixed === 'right';
|
||||
firstFixRight = !prevFixRight;
|
||||
}
|
||||
|
||||
return {
|
||||
fixLeft,
|
||||
fixRight,
|
||||
lastFixLeft,
|
||||
firstFixRight,
|
||||
lastFixRight,
|
||||
firstFixLeft,
|
||||
isSticky: stickyOffsets.isSticky,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
import { computed } from 'vue';
|
||||
export default function useColumnManager(columns) {
|
||||
const _leafColumns = (cls, fixed = false) => {
|
||||
const leafColumns = [];
|
||||
cls.forEach(column => {
|
||||
column.fixed = fixed || column.fixed;
|
||||
if (!column.children) {
|
||||
leafColumns.push(column);
|
||||
} else {
|
||||
leafColumns.push(..._leafColumns(column.children, column.fixed));
|
||||
}
|
||||
});
|
||||
return leafColumns;
|
||||
};
|
||||
|
||||
// add appropriate rowspan and colspan to column
|
||||
const groupedColumns = computed(() => {
|
||||
const _groupColumns = (cls, currentRow = 0, parentColumn = {}, rows = [], fixed = false) => {
|
||||
// track how many rows we got
|
||||
rows[currentRow] = rows[currentRow] || [];
|
||||
const grouped = [];
|
||||
const setRowSpan = column => {
|
||||
const rowSpan = rows.length - currentRow;
|
||||
if (
|
||||
column &&
|
||||
!column.children && // parent columns.value are supposed to be one row
|
||||
rowSpan > 1 &&
|
||||
(!column.rowSpan || column.rowSpan < rowSpan)
|
||||
) {
|
||||
column.rowSpan = rowSpan;
|
||||
}
|
||||
};
|
||||
cls.forEach((column, index) => {
|
||||
const newColumn = { ...column };
|
||||
newColumn.fixed = fixed || column.fixed;
|
||||
rows[currentRow].push(newColumn);
|
||||
parentColumn.colSpan = parentColumn.colSpan || 0;
|
||||
if (newColumn.children && newColumn.children.length > 0) {
|
||||
newColumn.children = _groupColumns(
|
||||
newColumn.children,
|
||||
currentRow + 1,
|
||||
newColumn,
|
||||
rows,
|
||||
newColumn.fixed,
|
||||
);
|
||||
parentColumn.colSpan += newColumn.colSpan;
|
||||
} else {
|
||||
parentColumn.colSpan += 1;
|
||||
}
|
||||
// update rowspan to all same row columns.value
|
||||
for (let i = 0; i < rows[currentRow].length - 1; i += 1) {
|
||||
setRowSpan(rows[currentRow][i]);
|
||||
}
|
||||
// last column, update rowspan immediately
|
||||
if (index + 1 === cls.length) {
|
||||
setRowSpan(newColumn);
|
||||
}
|
||||
grouped.push(newColumn);
|
||||
});
|
||||
return grouped;
|
||||
};
|
||||
return _groupColumns(columns.value);
|
||||
});
|
||||
|
||||
const isAnyColumnsFixed = computed(() => columns.value.some(column => !!column.fixed));
|
||||
|
||||
const isAnyColumnsLeftFixed = computed(() =>
|
||||
columns.value.some(column => column.fixed === 'left' || column.fixed === true),
|
||||
);
|
||||
|
||||
const isAnyColumnsRightFixed = computed(() =>
|
||||
columns.value.some(column => column.fixed === 'right'),
|
||||
);
|
||||
|
||||
const leftColumns = computed(() =>
|
||||
groupedColumns.value.filter(column => column.fixed === 'left' || column.fixed === true),
|
||||
);
|
||||
|
||||
const rightColumns = computed(() => {
|
||||
return groupedColumns.value.filter(column => column.fixed === 'right');
|
||||
});
|
||||
|
||||
const leafColumns = computed(() => {
|
||||
return _leafColumns(columns.value);
|
||||
});
|
||||
|
||||
const leftLeafColumns = computed(() => _leafColumns(leftColumns.value));
|
||||
|
||||
const rightLeafColumns = computed(() => _leafColumns(rightColumns.value));
|
||||
return {
|
||||
groupedColumns,
|
||||
isAnyColumnsFixed,
|
||||
isAnyColumnsLeftFixed,
|
||||
isAnyColumnsRightFixed,
|
||||
leftColumns,
|
||||
rightColumns,
|
||||
leafColumns,
|
||||
leftLeafColumns,
|
||||
rightLeafColumns,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { ref, watch } from 'vue';
|
||||
|
||||
/**
|
||||
* Get sticky column offset width
|
||||
*/
|
||||
function useStickyOffsets(colWidths, columns) {
|
||||
const stickyOffsets = ref({
|
||||
left: [],
|
||||
right: [],
|
||||
});
|
||||
const columnCount = ref();
|
||||
watch(
|
||||
columns,
|
||||
() => {
|
||||
columnCount.value = columns.value.length;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
watch([colWidths, columnCount], () => {
|
||||
const leftOffsets = [];
|
||||
const rightOffsets = [];
|
||||
let left = 0;
|
||||
let right = 0;
|
||||
|
||||
for (let start = 0; start < columnCount.value; start += 1) {
|
||||
// Left offset
|
||||
leftOffsets[start] = left;
|
||||
left += colWidths.value[start] || 0;
|
||||
|
||||
// Right offset
|
||||
const end = columnCount.value - start - 1;
|
||||
rightOffsets[end] = right;
|
||||
right += colWidths.value[end] || 0;
|
||||
}
|
||||
stickyOffsets.value = {
|
||||
left: leftOffsets,
|
||||
right: rightOffsets,
|
||||
};
|
||||
});
|
||||
return stickyOffsets;
|
||||
}
|
||||
|
||||
export default useStickyOffsets;
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
let scrollbarVerticalSize;
|
||||
let scrollbarHorizontalSize;
|
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
const scrollbarMeasure = {
|
||||
position: 'absolute',
|
||||
top: '-9999px',
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
};
|
||||
|
||||
export const INTERNAL_COL_DEFINE = 'RC_TABLE_INTERNAL_COL_DEFINE';
|
||||
|
||||
export function measureScrollbar({ direction = 'vertical', prefixCls }) {
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
const isVertical = direction === 'vertical';
|
||||
if (isVertical && scrollbarVerticalSize) {
|
||||
return scrollbarVerticalSize;
|
||||
}
|
||||
if (!isVertical && scrollbarHorizontalSize) {
|
||||
return scrollbarHorizontalSize;
|
||||
}
|
||||
const scrollDiv = document.createElement('div');
|
||||
Object.keys(scrollbarMeasure).forEach(scrollProp => {
|
||||
scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
|
||||
});
|
||||
// apply hide scrollbar className ahead
|
||||
scrollDiv.className = `${prefixCls}-hide-scrollbar scroll-div-append-to-body`;
|
||||
|
||||
// Append related overflow style
|
||||
if (isVertical) {
|
||||
scrollDiv.style.overflowY = 'scroll';
|
||||
} else {
|
||||
scrollDiv.style.overflowX = 'scroll';
|
||||
}
|
||||
document.body.appendChild(scrollDiv);
|
||||
let size = 0;
|
||||
if (isVertical) {
|
||||
size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
scrollbarVerticalSize = size;
|
||||
} else {
|
||||
size = scrollDiv.offsetHeight - scrollDiv.clientHeight;
|
||||
scrollbarHorizontalSize = size;
|
||||
}
|
||||
|
||||
document.body.removeChild(scrollDiv);
|
||||
return size;
|
||||
}
|
||||
|
||||
export function debounce(func, wait, immediate) {
|
||||
let timeout;
|
||||
function debounceFunc(...args) {
|
||||
const context = this;
|
||||
// https://fb.me/react-event-pooling
|
||||
if (args[0] && args[0].persist) {
|
||||
args[0].persist();
|
||||
}
|
||||
const later = () => {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
const callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
}
|
||||
debounceFunc.cancel = function cancel() {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
timeout = null;
|
||||
}
|
||||
};
|
||||
return debounceFunc;
|
||||
}
|
||||
|
||||
export function remove(array, item) {
|
||||
const index = array.indexOf(item);
|
||||
const front = array.slice(0, index);
|
||||
const last = array.slice(index + 1, array.length);
|
||||
return front.concat(last);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns only data- and aria- key/value pairs
|
||||
* @param {object} props
|
||||
*/
|
||||
export function getDataAndAriaProps(props) {
|
||||
return Object.keys(props).reduce((memo, key) => {
|
||||
if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-') {
|
||||
memo[key] = props[key];
|
||||
}
|
||||
return memo;
|
||||
}, {});
|
||||
}
|
||||
|
||||
export function getColumnsKey(columns) {
|
||||
const columnKeys = [];
|
||||
|
||||
columns.forEach(column => {
|
||||
const { key, dataIndex } = column || {};
|
||||
|
||||
columnKeys.push(key !== undefined ? key : dataIndex);
|
||||
});
|
||||
|
||||
return columnKeys;
|
||||
}
|
||||
|
||||
export function validateValue(val) {
|
||||
return val !== null && val !== undefined;
|
||||
}
|
||||
Loading…
Reference in New Issue