Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading
Loading status checks…
解决冲突
Browse files Browse the repository at this point in the history
liyuan-meng committed Jan 10, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
2 parents a66d296 + 68caad7 commit 7513026
Showing 7 changed files with 204 additions and 161 deletions.
16 changes: 12 additions & 4 deletions src/components/c-table/css/business.less
View file
Original file line number Diff line number Diff line change
@@ -302,8 +302,8 @@

// 表格支持配置列的展示和隐藏
&.@{tablePrefixCls}-config-column {
tr td:last-child,
tr th:last-child {
tbody tr td:last-child,
thead tr th:nth-last-of-type(-n+1) {
padding-right: 40px;
}
}
@@ -376,21 +376,29 @@
}
}
}

// 表格不展示纵向滚动条
&.@{tablePrefixCls}-no-scroll {
.@{tablePrefixCls}-container {
height: auto;
}
}
}

.@{tablePrefixCls}-tooltip {
min-width: 236px;
max-height: 300px;
overflow: auto;
padding: 16px;
box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1), 0 0 1px 0 rgba(0,0,0,0.3) !important;
border-radius: 3px;

&-content {
display: flex;
flex-direction: column;
gap: 12px;

> li {
width: 114px;
width: 180px;
.text-overflow-ellipsis;

.@{prefix}-checkbox-text {
7 changes: 4 additions & 3 deletions src/components/c-table/demos/goods-table.md
View file
Original file line number Diff line number Diff line change
@@ -200,7 +200,7 @@ class CTableDemo extends Component {
dataIndex: 'operate',
align: 'right',
width: 140,
// fixed: 'right',
fixed: 'right',
render: (_, row) => {
return row.skus && row.skus.length ? (
<Button
@@ -287,15 +287,16 @@ class CTableDemo extends Component {

render() {
return (
<div className="cloud-table-goods">
<div className="cloud-table-goods" style={{ height: 400, overflow: 'auto' }}>
<Button style={{ marginBottom: 20 }} onClick={this.onExpandAll}>{this.state.isExpandAll ? '展开全部' : '收起全部'}</Button>
<CTable
supportConfigColumn
defaultShowColumns={this.state.defaultShowColumns}
disabledConfigColumns={this.columns.slice(0, 2).map(item => item.dataIndex)}
hideConfigColumns={['operate']}
ref={this.tableRef}
style={{ width: '100%', height: 400 }}
noScroll
// stickyFooter
supportExpend
supportTree
supportCheckbox
80 changes: 50 additions & 30 deletions src/components/c-table/index.js
View file
Original file line number Diff line number Diff line change
@@ -81,7 +81,7 @@ class CTable extends Component {
isLoading: false,
filterValue: [],
sortParams: {},
columnConfigStyle: {},
// columnConfigStyle: {},
};
this.column = new Column(this);
}
@@ -113,7 +113,7 @@ class CTable extends Component {
window.addEventListener('resize', this.onResize());
}

this.setColumnConfigStyle();
// this.setColumnConfigStyle();
}

componentDidUpdate(prevProps) {
@@ -331,28 +331,28 @@ class CTable extends Component {
});
};

setColumnConfigStyle = () => {
setTimeout(() => {
if (this.props.supportConfigColumn) {
const modalEles = document.querySelectorAll(`.${prefixCls}-modal-body`);
if (modalEles?.length) {
const currentModalEle = modalEles[modalEles.length - 1];
const { bottom: modalBottom } = currentModalEle.getClientRects()[0];

const { bottom: tableConfigBtnBottom } = this.ref.current?.querySelector(`.${prefixCls}-table-config-icon`)?.getClientRects()?.[0];

console.log(modalBottom, tableConfigBtnBottom);
if (modalBottom && tableConfigBtnBottom && modalBottom - tableConfigBtnBottom > 0) {
this.setState({
columnConfigStyle: {
maxHeight: modalBottom - tableConfigBtnBottom
}
})
}
}
}
}, 1000)
}
// setColumnConfigStyle = () => {
// setTimeout(() => {
// if (this.props.supportConfigColumn) {
// const modalEles = document.querySelectorAll(`.${prefixCls}-modal-body`);
// if (modalEles?.length) {
// const currentModalEle = modalEles[modalEles.length - 1];
// const { bottom: modalBottom } = currentModalEle.getClientRects()[0];
//
// const { bottom: tableConfigBtnBottom } = this.ref.current?.querySelector(`.${prefixCls}-table-config-icon`)?.getClientRects()?.[0];
//
// console.log(modalBottom, tableConfigBtnBottom);
// if (modalBottom && tableConfigBtnBottom && modalBottom - tableConfigBtnBottom > 0) {
// this.setState({
// columnConfigStyle: {
// maxHeight: modalBottom - tableConfigBtnBottom
// }
// })
// }
// }
// }
// }, 1000)
// }

/**
* 表格翻页后，滚动到顶部
@@ -707,6 +707,17 @@ class CTable extends Component {
}, 500);
};

getScroll = () => {
const { scroll, maxHeight, noScroll } = this.props;
if (scroll) {
return scroll;
}
if (noScroll) {
return { x: '100%' };
}
return { x: '100%', y: maxHeight || '100%' };
};

/**
* 表格数据为空模板
* @returns {*}
@@ -808,6 +819,7 @@ class CTable extends Component {
sticky,
stickyFooter,
supportConfigColumn,
noScroll,
} = this.props;
const {
data,
@@ -817,9 +829,10 @@ class CTable extends Component {
pageOpts,
selectedNodeList,
isLoading,
columnConfigStyle,
// columnConfigStyle,
} = this.state;
const { pageNum, pageSize, totals } = pageOpts;
const scroll = this.getScroll();

return (
<div className={`${tablePrefixCls}-container`} style={style} ref={ref}>
@@ -847,10 +860,11 @@ class CTable extends Component {
[`${tablePrefixCls}-support-resize`]: supportResizeColumn, // 表格列拉伸
[`${tablePrefixCls}-full-column`]: supportFullColumn, // 表格通栏
[`${tablePrefixCls}-config-column`]: supportConfigColumn, // 表格通栏
[`${tablePrefixCls}-no-scroll`]: noScroll, // 无纵向滚动条的表格
},
className,
)}
style={{
style={noScroll ? {} : {
height: `calc(100% - ${
hideEmptyFooter && !totals ? 0 : footerHeight
}px)`,
@@ -863,7 +877,7 @@ class CTable extends Component {
data={data}
expandIconColumnIndex={expandIconColumnIndex}
sticky={sticky}
scroll={{ x: '100%', y: maxHeight || '100%' }}
scroll={scroll}
expandable={getExpandableConfig({ ...this.props })}
emptyText={emptyTpl()}
rowKey={rowKey}
@@ -906,7 +920,7 @@ class CTable extends Component {
: undefined
}
/>
{loadingTpl(isLoading) || (
{loadingTpl(isLoading || loadingOpts.loading) || (
<Loading
className={`${tablePrefixCls}-loading-layer`}
loading={isLoading}
@@ -971,9 +985,15 @@ class CTable extends Component {
placement="bottom-right"
className={`${tablePrefixCls}-tooltip`}
content={this.renderConfig()}
overlayStyle={columnConfigStyle}
overlayStyle={{
maxHeight: 466,
top: 40,
right: 1,
left: 'auto',
}}
containerEle={this.ref.current}
>
<span className={`${tablePrefixCls}-config-icon`} style={isLoading ? { zIndex: -1 } : {}}>
<span className={`${tablePrefixCls}-config-icon`} style={isLoading || loadingOpts.loading ? { zIndex: -1 } : {}}>
<Icon type="config" />
</span>
</Tooltip>
Loading

0 comments on commit 7513026

Please sign in to comment.