固定列下的滚动条无法拖拽
This commit is contained in:
parent
6b6688d24c
commit
71c5b3e347
|
@ -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
|
@ -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 {
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
19
src/Table.js
19
src/Table.js
|
@ -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()}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue