fix: 纵向滚动条动态显示
This commit is contained in:
parent
06a0d594fd
commit
c0167c3ed2
|
@ -367,6 +367,10 @@ var Table = function (_Component) {
|
||||||
if (nextProps.resetScroll) {
|
if (nextProps.resetScroll) {
|
||||||
this.resetScrollX();
|
this.resetScrollX();
|
||||||
}
|
}
|
||||||
|
// fix:模态框中使用table,计算的滚动条宽度为0的bug
|
||||||
|
if (this.scrollbarWidth <= 0 && this.props.scroll.y) {
|
||||||
|
this.scrollbarWidth = (0, _utils.measureScrollbar)();
|
||||||
|
}
|
||||||
|
|
||||||
// console.log('this.scrollTop**********',this.scrollTop);
|
// console.log('this.scrollTop**********',this.scrollTop);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
|
|
||||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||||
|
@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function sortBy(arr, prop, desc) {
|
function sortBy(arr, prop, desc) {
|
||||||
var props = [],
|
var props = [],
|
||||||
ret = [],
|
ret = [],
|
||||||
i = 0,
|
i = 0,
|
||||||
len = arr.length;
|
len = arr.length;
|
||||||
if (typeof prop == 'string') {
|
if (typeof prop == 'string') {
|
||||||
for (; i < len; i++) {
|
for (; i < len; i++) {
|
||||||
var oI = arr[i];
|
var oI = arr[i];
|
||||||
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
(props[i] = new String(oI && oI[prop] || ''))._obj = oI;
|
||||||
|
}
|
||||||
|
} else if (typeof prop == 'function') {
|
||||||
|
for (; i < len; i++) {
|
||||||
|
var _oI = arr[i];
|
||||||
|
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
throw '参数类型错误';
|
||||||
}
|
}
|
||||||
} else if (typeof prop == 'function') {
|
props.sort();
|
||||||
for (; i < len; i++) {
|
for (i = 0; i < len; i++) {
|
||||||
var _oI = arr[i];
|
ret[i] = props[i]._obj;
|
||||||
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
|
|
||||||
}
|
}
|
||||||
} else {
|
if (desc) ret.reverse();
|
||||||
throw '参数类型错误';
|
return ret;
|
||||||
}
|
|
||||||
props.sort();
|
|
||||||
for (i = 0; i < len; i++) {
|
|
||||||
ret[i] = props[i]._obj;
|
|
||||||
}
|
|
||||||
if (desc) ret.reverse();
|
|
||||||
return ret;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
|
||||||
* @param {} property
|
* @param {} property
|
||||||
*/
|
*/
|
||||||
function compare(property) {
|
function compare(property) {
|
||||||
return function (a, b) {
|
return function (a, b) {
|
||||||
var value1 = a[property];
|
var value1 = a[property];
|
||||||
var value2 = b[property];
|
var value2 = b[property];
|
||||||
return value1 - value2;
|
return value1 - value2;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -63,17 +63,17 @@ function compare(property) {
|
||||||
* @param {*} obj 要拷贝的对象
|
* @param {*} obj 要拷贝的对象
|
||||||
*/
|
*/
|
||||||
function ObjectAssign(obj) {
|
function ObjectAssign(obj) {
|
||||||
var b = obj instanceof Array;
|
var b = obj instanceof Array;
|
||||||
var tagObj = b ? [] : {};
|
var tagObj = b ? [] : {};
|
||||||
if (b) {
|
if (b) {
|
||||||
//数组
|
//数组
|
||||||
obj.forEach(function (da) {
|
obj.forEach(function (da) {
|
||||||
var _da = {};
|
var _da = {};
|
||||||
_extends(_da, da);
|
_extends(_da, da);
|
||||||
tagObj.push(_da);
|
tagObj.push(_da);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
_extends(tagObj, obj);
|
_extends(tagObj, obj);
|
||||||
}
|
}
|
||||||
return tagObj;
|
return tagObj;
|
||||||
}
|
}
|
|
@ -74,6 +74,45 @@ const columns = [{
|
||||||
render: renderContent,
|
render: renderContent,
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
|
||||||
|
const columns1 = [{
|
||||||
|
title: '姓名',
|
||||||
|
key: "name",
|
||||||
|
dataIndex: 'name',
|
||||||
|
render: (text, row, index) => {
|
||||||
|
if (index < 4) {
|
||||||
|
return <a href="#">{text}</a>;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
children: <a href="#">{text}</a>,
|
||||||
|
props: {
|
||||||
|
colSpan: 5,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
title: '年龄',
|
||||||
|
key: "age",
|
||||||
|
dataIndex: 'age',
|
||||||
|
render: renderContent,
|
||||||
|
}, {
|
||||||
|
title: '联系方式',
|
||||||
|
colSpan: 2,
|
||||||
|
key: "tel",
|
||||||
|
dataIndex: 'tel',
|
||||||
|
render: renderContent
|
||||||
|
}, {
|
||||||
|
title: '手机号',
|
||||||
|
colSpan: 0,
|
||||||
|
key: "phone",
|
||||||
|
dataIndex: 'phone',
|
||||||
|
render: renderContent,
|
||||||
|
}, {
|
||||||
|
title: '家庭住址',
|
||||||
|
key: "address",
|
||||||
|
dataIndex: 'address',
|
||||||
|
render: renderContent,
|
||||||
|
}];
|
||||||
const data = [{
|
const data = [{
|
||||||
key: '1',
|
key: '1',
|
||||||
name: '小红',
|
name: '小红',
|
||||||
|
@ -112,9 +151,26 @@ const data = [{
|
||||||
}];
|
}];
|
||||||
|
|
||||||
class Demo15 extends Component {
|
class Demo15 extends Component {
|
||||||
|
constructor(props){
|
||||||
|
super(props);
|
||||||
|
this.state={
|
||||||
|
colFlag:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onChange=()=>{
|
||||||
|
const colFlag = this.state.colFlag;
|
||||||
|
this.setState({
|
||||||
|
colFlag:!colFlag
|
||||||
|
})
|
||||||
|
}
|
||||||
render() {
|
render() {
|
||||||
|
let cols = this.state.colFlag?columns:columns1;
|
||||||
return (
|
return (
|
||||||
<Table columns={columns} data={data} bordered/>
|
<div>
|
||||||
|
<button onClick={this.onChange}>change列</button>
|
||||||
|
<Table columns={cols} data={data} bordered/>
|
||||||
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
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
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "bee-table",
|
"name": "bee-table",
|
||||||
"version": "2.0.24",
|
"version": "2.0.25-beta.0",
|
||||||
"description": "Table ui component for react",
|
"description": "Table ui component for react",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"react",
|
"react",
|
||||||
|
|
|
@ -237,7 +237,7 @@ class Table extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 是否传入 scroll中的y属性,如果传入判断是否是整数,如果是则进行比较 。bodyTable 的clientHeight进行判断
|
// 是否传入 scroll中的y属性,如果传入判断是否是整数,如果是则进行比较 。bodyTable 的clientHeight进行判断
|
||||||
// this.isShowScrollY();
|
this.isShowScrollY();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
@ -313,7 +313,7 @@ class Table extends Component {
|
||||||
const bodyH = this.bodyTable.clientHeight;
|
const bodyH = this.bodyTable.clientHeight;
|
||||||
const bodyContentH = this.bodyTable.querySelector('table').clientHeight;
|
const bodyContentH = this.bodyTable.querySelector('table').clientHeight;
|
||||||
const rightBodyTable = this.refs.fixedColumnsBodyRight;
|
const rightBodyTable = this.refs.fixedColumnsBodyRight;
|
||||||
const leftBodyTable = this.refs.fixedColumnsBodyLeft;
|
// const leftBodyTable = this.refs.fixedColumnsBodyLeft;
|
||||||
const overflowy = bodyContentH <= bodyH ? 'auto':'scroll';
|
const overflowy = bodyContentH <= bodyH ? 'auto':'scroll';
|
||||||
this.bodyTable.style.overflowY = overflowy;
|
this.bodyTable.style.overflowY = overflowy;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue