固定列下的滚动条无法拖拽

This commit is contained in:
wanghaoo 2018-10-26 15:03:36 +08:00
parent 6b6688d24c
commit 71c5b3e347
9 changed files with 1124 additions and 1367 deletions

View File

@ -27,7 +27,7 @@ const columns16 = [
); );
} }
}, },
{ title: "用户名", dataIndex: "a", key: "a", width: 1500 }, { title: "用户名", dataIndex: "a", key: "a", width: 250 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 }, { id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }, { title: "年龄", dataIndex: "c", key: "c", width: 200 },

File diff suppressed because one or more lines are too long

34
dist/demo.css vendored
View File

@ -6765,7 +6765,15 @@ input.u-button[type="submit"] {
float: left; } float: left; }
.u-pagination .data_per_select { .u-pagination .data_per_select {
margin: 5px; margin: 5px;
float: left; } float: left;
min-width: 120px; }
.u-pagination .data_per_select .u-select {
width: 50px;
margin: 0 6px; }
.u-pagination .data_per_select .u-select .u-select-selection {
height: 36px; }
.u-pagination .data_per_select .u-select .u-select-selection .u-select-selection-rendered {
line-height: 36px; }
.u-pagination .data_select { .u-pagination .data_select {
outline: none; outline: none;
-webkit-appearance: none; -webkit-appearance: none;
@ -8656,12 +8664,15 @@ ul {
position: relative; } position: relative; }
.u-table-filter-column-filter-icon { .u-table-filter-column-filter-icon {
position: absolute; position: absolute;
top: 6px; top: 3px;
right: 3px; right: 2px;
width: 30px; width: 25px;
height: 30px; height: 38px;
line-height: 30px; line-height: 38px;
z-index: 2; } z-index: 2;
background: #f7f7f7; }
.u-table-filter-column-filter-iconi.uf {
padding: 0px; }
.u-table-filter-column-pop-cont-item { .u-table-filter-column-pop-cont-item {
margin-top: 10px; margin-top: 10px;
line-height: 30px; line-height: 30px;
@ -9228,7 +9239,8 @@ ul {
box-shadow: 0 1px 5px #ccc; box-shadow: 0 1px 5px #ccc;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #ccc; border: 1px solid #ccc;
line-height: 1.5; } line-height: 1.5;
z-index: 1800; }
.rc-calendar-date-panel, .rc-calendar-date-panel,
.rc-calendar-panel { .rc-calendar-panel {
@ -9678,6 +9690,9 @@ ul {
background: #3fc7fa; background: #3fc7fa;
color: #fff; } color: #fff; }
.rc-calendar > .rc-calendar-year-panel {
position: relative; }
.rc-calendar-year-panel { .rc-calendar-year-panel {
left: 0; left: 0;
top: 0; top: 0;
@ -9966,7 +9981,8 @@ ul {
left: 36px; } left: 36px; }
.rc-calendar-range .rc-calendar-year-panel, .rc-calendar-range .rc-calendar-year-panel,
.rc-calendar-range .rc-calendar-month-panel { .rc-calendar-range .rc-calendar-month-panel,
.rc-calendar-range .rc-calendar-decade-panel {
top: 35px; } top: 35px; }
.rc-calendar-range .rc-calendar-month-panel .rc-calendar-year-panel { .rc-calendar-range .rc-calendar-month-panel .rc-calendar-year-panel {

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

2264
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -337,7 +337,7 @@ class Table extends Component {
drgHover: column.drgHover, drgHover: column.drgHover,
fixed: column.fixed, fixed: column.fixed,
width: column.width, width: column.width,
dataIndex:column.dataIndex dataindex:column.dataIndex
}; };
if (column.onHeadCellClick) { if (column.onHeadCellClick) {
cell.onClick = column.onHeadCellClick; cell.onClick = column.onHeadCellClick;
@ -618,6 +618,7 @@ class Table extends Component {
let { useFixedHeader } = this.props; let { useFixedHeader } = this.props;
const bodyStyle = { ...this.props.bodyStyle }; const bodyStyle = { ...this.props.bodyStyle };
const headStyle = {}; const headStyle = {};
const innerBodyStyle = {};
let tableClassName = ''; let tableClassName = '';
//表格元素的宽度大于容器的宽度也显示滚动条 //表格元素的宽度大于容器的宽度也显示滚动条
@ -632,7 +633,9 @@ class Table extends Component {
// maxHeight will make fixed-Table scrolling not working // maxHeight will make fixed-Table scrolling not working
// so we only set maxHeight to body-Table here // so we only set maxHeight to body-Table here
if (fixed) { if (fixed) {
bodyStyle.height = bodyStyle.height || scroll.y; // bodyStyle.height = bodyStyle.height || scroll.y;
innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
innerBodyStyle.overflowY = bodyStyle.overflowY || 'auto';
} else { } else {
bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y; bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
} }
@ -659,7 +662,6 @@ class Table extends Component {
} }
// 自动出现滚动条 // 自动出现滚动条
if (this.contentDomWidth > this.contentWidth) { if (this.contentDomWidth > this.contentWidth) {
console.log(this.contentDomWidth);
tableStyle.width = this.contentDomWidth; tableStyle.width = this.contentDomWidth;
} }
const tableBody = hasBody ? getBodyWrapper( const tableBody = hasBody ? getBodyWrapper(
@ -723,6 +725,7 @@ class Table extends Component {
style={{ ...bodyStyle }} style={{ ...bodyStyle }}
> >
<div <div
style={{...innerBodyStyle}}
className={`${clsPrefix}-body-inner`} className={`${clsPrefix}-body-inner`}
ref={refName} ref={refName}
onMouseOver={this.detectScrollTarget} onMouseOver={this.detectScrollTarget}
@ -900,15 +903,17 @@ class Table extends Component {
<div className={className} style={props.style} ref={el => this.contentTable = el}> <div className={className} style={props.style} ref={el => this.contentTable = el}>
{this.getTitle()} {this.getTitle()}
<div className={`${clsPrefix}-content`}> <div className={`${clsPrefix}-content`}>
{this.columnManager.isAnyColumnsLeftFixed() &&
<div className={`${clsPrefix}-fixed-left`}>
{this.getLeftFixedTable()}
</div>}
<div className={isTableScroll ? `${clsPrefix}-scroll` : ''}> <div className={isTableScroll ? `${clsPrefix}-scroll` : ''}>
{this.getTable({ columns: this.columnManager.groupedColumns() })} {this.getTable({ columns: this.columnManager.groupedColumns() })}
{this.getEmptyText()} {this.getEmptyText()}
{this.getFooter()} {this.getFooter()}
</div> </div>
{this.columnManager.isAnyColumnsLeftFixed() &&
<div className={`${clsPrefix}-fixed-left`}>
{this.getLeftFixedTable()}
</div>}
{this.columnManager.isAnyColumnsRightFixed() && {this.columnManager.isAnyColumnsRightFixed() &&
<div className={`${clsPrefix}-fixed-right`}> <div className={`${clsPrefix}-fixed-right`}>
{this.getRightFixedTable()} {this.getRightFixedTable()}

View File

@ -405,12 +405,16 @@ $table-move-in-color: $bg-color-base;
} }
&-filter-icon{ &-filter-icon{
position: absolute; position: absolute;
top: 6px; top: 3px;
right: 3px; right: 2px;
width: 30px; width: 25px;
height: 30px; height: 38px;
line-height: 30px; line-height: 38px;
z-index: 2; z-index: 2;
background: #f7f7f7;
&i.uf{
padding: 0px;
}
} }
&-pop-cont-item{ &-pop-cont-item{
margin-top: 10px; margin-top: 10px;