JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

API文档加三级标题、解决无滚动条时，拖拽行报错问题、树形表格的图标换成箭头

This commit is contained in:
yangchch6 2019-04-30 10:01:58 +08:00
parent 6a4e574a1a
commit 527b2f20d6
22 changed files with 472 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
build/ExpandIcon.js
View File

@ -16,6 +16,10 @@ var _shallowequal = require('shallowequal');
var _shallowequal2 = _interopRequireDefault(_shallowequal); var _shallowequal2 = _interopRequireDefault(_shallowequal);
var _beeIcon = require('bee-icon');
var _beeIcon2 = _interopRequireDefault(_beeIcon);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; } function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@ -60,8 +64,9 @@ var ExpandIcon = function (_Component) {
if (expandable && !isHiddenExpandIcon) { if (expandable && !isHiddenExpandIcon) {
var expandClassName = expanded ? 'expanded' : 'collapsed'; var expandClassName = expanded ? 'expanded' : 'collapsed';
return _react2["default"].createElement('span', { return _react2["default"].createElement(_beeIcon2["default"], {
className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName, className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName,
type: expanded ? 'uf-triangle-down' : 'uf-triangle-right',
onClick: function onClick(e) { onClick: function onClick(e) {
return onExpand(!expanded, record, e); return onExpand(!expanded, record, e);
} }

184
build/Table.css
View File

@ -1,5 +1,169 @@
@charset "UTF-8";
/* FormGroup */ /* FormGroup */
/* Navlayout */ /* Navlayout */
/* FormGroup */
/* Navlayout */
/**
* 加载背景
*/
/**
* 文字
*/
.u-loading-desc {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 14px;
color: #212121;
text-align: center; }
/**
* default样式 单个圆圈加载
*/
.u-loading.u-loading-rotate > div {
position: absolute;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
width: 40px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -22px;
margin-top: -22px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 1s 0s linear infinite;
animation: rotate 1s 0s linear infinite;
text-align: center;
line-height: 40px; }
.u-loading.u-loading-rotate > div > img {
width: 40px; }
.u-loading.u-loading-rotate > div > .uf {
color: #0084ff;
font-size: 40px;
padding: 0; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
margin-left: -35px;
margin-top: -35px;
width: 60px;
height: 60px;
line-height: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > img {
width: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
font-size: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
margin-left: -15px;
margin-top: -15px;
width: 25px;
height: 25px;
line-height: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > img {
width: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
font-size: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
color: #3f51b5; }
.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
color: #4caf50; }
.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
color: #ff9800; }
.u-loading-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1900;
background-color: rgba(255, 255, 255, 0.4); }
.u-loading-backdrop.full-screen {
position: fixed; }
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1); }
50% {
-webkit-transform: rotate(180deg) scale(1);
transform: rotate(180deg) scale(1); }
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1); } }
.u-loading.u-loading-line {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -25px; }
.u-loading.u-loading-line > div {
background-color: #C2C3C5;
width: 6px;
height: 50px;
border-radius: 2px;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block; }
.u-loading.u-loading-line.u-loading-line-lg {
margin-top: -50px;
margin-left: -30px; }
.u-loading.u-loading-line.u-loading-line-lg > div {
width: 8px;
height: 90px; }
.u-loading.u-loading-line.u-loading-line-sm {
margin-top: -22px;
margin-left: -20px; }
.u-loading.u-loading-line.u-loading-line-sm > div {
width: 4px;
height: 35px; }
.u-loading.u-loading-line div:nth-child(1) {
-webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #F44336; }
.u-loading.u-loading-line div:nth-child(2) {
-webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #7ED321; }
.u-loading.u-loading-line div:nth-child(3) {
-webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #0084FF; }
.u-loading.u-loading-line div:nth-child(4) {
-webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #FF9800; }
.u-loading.u-loading-line div:nth-child(5) {
-webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #D0021B; }
.u-loading.u-loading-line.u-loading-line-primary > div {
background-color: #3f51b5; }
.u-loading.u-loading-line.u-loading-line-success > div {
background-color: #4caf50; }
.u-loading.u-loading-line.u-loading-line-warning > div {
background-color: #ff9800; }
@keyframes line-scale {
0% {
-webkit-transform: scaley(1);
transform: scaley(1); }
50% {
-webkit-transform: scaley(0.4);
transform: scaley(0.4); }
100% {
-webkit-transform: scaley(1);
transform: scaley(1); } }
.u-table { .u-table {
font-size: 12px; font-size: 12px;
color: #212121; color: #212121;
@ -132,7 +296,12 @@
text-align: center; text-align: center;
position: relative; } position: relative; }
.u-table-placeholder .table-nodata { .u-table-placeholder .table-nodata {
font-size: 48px; } font-size: 40px;
line-height: 44px; }
.u-table-placeholder .table-nodata + span {
font-size: 12px;
line-height: 12px;
display: block; }
.u-table-expand-icon-col { .u-table-expand-icon-col {
width: 10px; } width: 10px; }
.u-table-row .u-table tr, .u-table-expanded-row .u-table tr { .u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
@ -143,22 +312,19 @@
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
margin-right: 0px; margin-right: 0px;
width: 16px; width: 14px;
height: 16px; height: 14px;
text-align: center; text-align: center;
line-height: 14px; line-height: 14px;
border: 1px solid rgb(193, 199, 208);
user-select: none; user-select: none;
background: #fff;
margin-right: 10px; } margin-right: 10px; }
.u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
font-size: 12px;
padding: 0; }
.u-table-row-spaced, .u-table-expanded-row-spaced { .u-table-row-spaced, .u-table-expanded-row-spaced {
visibility: hidden; } visibility: hidden; }
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after { .u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
content: "."; } content: "."; }
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
content: "-"; }
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
content: "+"; }
.u-table-row.selected { .u-table-row.selected {
background: #FFF7E7; } background: #FFF7E7; }
.u-table tr.u-table-expanded-row { .u-table tr.u-table-expanded-row {

11
build/Table.js
View File

@ -142,7 +142,16 @@ var defaultProps = {
return body; return body;
}, },
emptyText: function emptyText() { emptyText: function emptyText() {
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-nodata', className: 'table-nodata' }); return _react2["default"].createElement(
'div',
null,
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-nodata', className: 'table-nodata' }),
_react2["default"].createElement(
'span',
null,
'\u6682\u65E0\u6570\u636E'
)
);
}, },
columns: [], columns: [],
minColumnWidth: 80, minColumnWidth: 80,

2
build/TableRow.js
View File

@ -164,6 +164,8 @@ var TableRow = function (_Component) {
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'), _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody'); _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
_table_trs = _table_trs ? _table_trs : contentTable.querySelector('.u-table table tbody');
_this.synchronizeTrStyle(_table_trs, currentIndex, type); _this.synchronizeTrStyle(_table_trs, currentIndex, type);
if (_table_fixed_left_trs) { if (_table_fixed_left_trs) {
_this.synchronizeTrStyle(_table_fixed_left_trs, currentIndex, type); _this.synchronizeTrStyle(_table_fixed_left_trs, currentIndex, type);

6
build/lib/sum.js
View File

@ -106,9 +106,9 @@ function sum(Table) {
return _this; return _this;
} }
/** /**
* 获取当前的表格类型。 * 获取当前的表格类型。
* *
*/ */

110
build/lib/util.js
View File

@ -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; };
@ -9,71 +9,71 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
exports.sortBy = sortBy; exports.sortBy = sortBy;
exports.compare = compare; exports.compare = compare;
exports.ObjectAssign = ObjectAssign; exports.ObjectAssign = ObjectAssign;
/* /*
* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序. * 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
* @method soryBy * @method soryBy
* @static * @static
* @param {array} arr 待处理数组 * @param {array} arr 待处理数组
* @param {string|function} prop 排序依据属性，获取 * @param {string|function} prop 排序依据属性，获取
* @param {boolean} desc 降序 * @param {boolean} desc 降序
* @return {array} 返回排序后的新数组 * @return {array} 返回排序后的新数组
*/ */
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 '参数类型错误';
} }
props.sort(); } else if (typeof prop == 'function') {
for (i = 0; i < len; i++) { for (; i < len; i++) {
ret[i] = props[i]._obj; var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
} }
if (desc) ret.reverse(); } else {
return ret; throw '参数类型错误';
}
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
}
if (desc) ret.reverse();
return ret;
}; };
/** /**
* 数组对象排序 * 数组对象排序
* console.log(arr.sort(compare('age'))) * console.log(arr.sort(compare('age')))
* @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;
}; };
} }
/** /**
* 简单数组数据对象拷贝 * 简单数组数据对象拷贝
* @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;
} }

10
build/render/CheckboxRender.js
View File

@ -19,11 +19,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
/** /**
* 渲染checkbox * 渲染checkbox
* @param Checkbox * @param Checkbox
* @param Icon * @param Icon
* @returns {CheckboxRender} * @returns {CheckboxRender}
*/ */
function renderCheckbox(Checkbox, Icon) { function renderCheckbox(Checkbox, Icon) {
return function (_Component) { return function (_Component) {

12
build/render/InputRender.js
View File

@ -28,12 +28,12 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
/** /**
* 渲染输入框 * 渲染输入框
* @param Form * @param Form
* @param Input * @param Input
* @param Icon * @param Icon
* @returns {InputRender} * @returns {InputRender}
*/ */
function renderInput(Form, Input, Icon) { function renderInput(Form, Input, Icon) {
var _class, _temp2; var _class, _temp2;

10
build/render/SelectRender.js
View File

@ -26,11 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
/** /**
* 渲染下拉框 * 渲染下拉框
* @param Select * @param Select
* @param Icon * @param Icon
* @returns {SelectRender} * @returns {SelectRender}
*/ */
function renderSelect(Select, Icon) { function renderSelect(Select, Icon) {
var _class, _temp2; var _class, _temp2;

2
demo/demolist/Demo0501.js
View File

@ -1,6 +1,6 @@
/** /**
* *
* @title 行编辑 - 行内编辑 * @title 行内编辑
* @parent 编辑 Editor * @parent 编辑 Editor
* @description 可以对行进行编辑的表格 * @description 可以对行进行编辑的表格
* demo0501 * demo0501

2
demo/demolist/Demo0501.scss
View File

@ -2,7 +2,7 @@
.u-row-hover { .u-row-hover {
.opt-btns { .opt-btns {
button { button {
border-radius: 5px; border-radius: 3px;
&:first-child { &:first-child {
margin-right: 10px; margin-right: 10px;

2
demo/demolist/Demo0503.js
View File

@ -1,6 +1,6 @@
/** /**
* *
* @title 行编辑 - 弹框编辑 * @title 弹框（表单）编辑
* @parent 编辑 Editor * @parent 编辑 Editor
* @description 以弹框形式以对行进行编辑的表格 * @description 以弹框形式以对行进行编辑的表格
* demo0503 * demo0503

2
demo/demolist/Demo0505.js
View File

@ -1,6 +1,6 @@
/** /**
* *
* @title 全表编辑 * @title 全表格编辑
* @parent 编辑 Editor * @parent 编辑 Editor
* @description 以行内编辑形式对全表数据进行编辑 * @description 以行内编辑形式对全表数据进行编辑
* demo0505 * demo0505

2
demo/demolist/Demo0505.scss
View File

@ -4,7 +4,7 @@
margin-bottom: 15px; margin-bottom: 15px;
button { button {
border-radius: 5px; border-radius: 3px;
&:first-child { &:first-child {
margin-right: 10px; margin-right: 10px;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

161
dist/demo.css vendored
View File

@ -1,5 +1,155 @@
@charset "UTF-8";
/* FormGroup */ /* FormGroup */
/* Navlayout */ /* Navlayout */
/* FormGroup */
/* Navlayout */
/**
* 加载背景
*/
/**
* 文字
*/
.u-loading-desc {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 14px;
color: #212121;
text-align: center; }
/**
* default样式 单个圆圈加载
*/
.u-loading.u-loading-rotate > div {
position: absolute;
border-radius: 100%;
margin: 2px;
animation-fill-mode: both;
width: 40px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -22px;
margin-top: -22px;
background: transparent !important;
display: inline-block;
animation: rotate 1s 0s linear infinite;
text-align: center;
line-height: 40px; }
.u-loading.u-loading-rotate > div > img {
width: 40px; }
.u-loading.u-loading-rotate > div > .uf {
color: #0084ff;
font-size: 40px;
padding: 0; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
margin-left: -35px;
margin-top: -35px;
width: 60px;
height: 60px;
line-height: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > img {
width: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
font-size: 60px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
margin-left: -15px;
margin-top: -15px;
width: 25px;
height: 25px;
line-height: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > img {
width: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
font-size: 25px; }
.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
color: #3f51b5; }
.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
color: #4caf50; }
.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
color: #ff9800; }
.u-loading-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1900;
background-color: rgba(255, 255, 255, 0.4); }
.u-loading-backdrop.full-screen {
position: fixed; }
@keyframes rotate {
0% {
transform: rotate(0deg) scale(1); }
50% {
transform: rotate(180deg) scale(1); }
100% {
transform: rotate(360deg) scale(1); } }
.u-loading.u-loading-line {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -25px; }
.u-loading.u-loading-line > div {
background-color: #C2C3C5;
width: 6px;
height: 50px;
border-radius: 2px;
margin: 2px;
animation-fill-mode: both;
display: inline-block; }
.u-loading.u-loading-line.u-loading-line-lg {
margin-top: -50px;
margin-left: -30px; }
.u-loading.u-loading-line.u-loading-line-lg > div {
width: 8px;
height: 90px; }
.u-loading.u-loading-line.u-loading-line-sm {
margin-top: -22px;
margin-left: -20px; }
.u-loading.u-loading-line.u-loading-line-sm > div {
width: 4px;
height: 35px; }
.u-loading.u-loading-line div:nth-child(1) {
animation: line-scale 1s 0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #F44336; }
.u-loading.u-loading-line div:nth-child(2) {
animation: line-scale 1s 0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #7ED321; }
.u-loading.u-loading-line div:nth-child(3) {
animation: line-scale 1s 0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #0084FF; }
.u-loading.u-loading-line div:nth-child(4) {
animation: line-scale 1s 0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #FF9800; }
.u-loading.u-loading-line div:nth-child(5) {
animation: line-scale 1s 0.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
background-color: #D0021B; }
.u-loading.u-loading-line.u-loading-line-primary > div {
background-color: #3f51b5; }
.u-loading.u-loading-line.u-loading-line-success > div {
background-color: #4caf50; }
.u-loading.u-loading-line.u-loading-line-warning > div {
background-color: #ff9800; }
@keyframes line-scale {
0% {
transform: scaley(1); }
50% {
transform: scaley(0.4); }
100% {
transform: scaley(1); } }
.u-table { .u-table {
font-size: 12px; font-size: 12px;
color: #212121; color: #212121;
@ -132,7 +282,12 @@
text-align: center; text-align: center;
position: relative; } position: relative; }
.u-table-placeholder .table-nodata { .u-table-placeholder .table-nodata {
font-size: 48px; } font-size: 40px;
line-height: 44px; }
.u-table-placeholder .table-nodata + span {
font-size: 12px;
line-height: 12px;
display: block; }
.u-table-expand-icon-col { .u-table-expand-icon-col {
width: 10px; } width: 10px; }
.u-table-row .u-table tr, .u-table-expanded-row .u-table tr { .u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
@ -673,7 +828,7 @@
padding-bottom: 0px; } padding-bottom: 0px; }
.demo0501 .u-table .u-row-hover .opt-btns button { .demo0501 .u-table .u-row-hover .opt-btns button {
border-radius: 5px; } border-radius: 3px; }
.demo0501 .u-table .u-row-hover .opt-btns button:first-child { .demo0501 .u-table .u-row-hover .opt-btns button:first-child {
margin-right: 10px; } margin-right: 10px; }
.demo0501 .u-table .u-row-hover .opt-btns button.btn-abort { .demo0501 .u-table .u-row-hover .opt-btns button.btn-abort {
@ -818,7 +973,7 @@
.demo0505 .opt-btns { .demo0505 .opt-btns {
margin-bottom: 15px; } margin-bottom: 15px; }
.demo0505 .opt-btns button { .demo0505 .opt-btns button {
border-radius: 5px; } border-radius: 3px; }
.demo0505 .opt-btns button:first-child { .demo0505 .opt-btns button:first-child {
margin-right: 10px; } margin-right: 10px; }
.demo0505 .opt-btns button.btn-abort { .demo0505 .opt-btns button.btn-abort {

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

21
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

16
docs/api.md
View File

@ -2,9 +2,19 @@
## 何时使用 ## 何时使用
- 当有大量结构化的数据需要展现时； - 当有大量结构化的数据需要展现时，可使用 `Table` 组件；
- Table组件拥有多种可自由组合使用的功能，包括：大数据渲染、拖拽列、过滤列、排序、多选、分页、自定义操作、合计、搜索等复杂行为； - `Table` 组件拥有多种可自由组合使用的功能特性，包括：
- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](https://design.yonyoucloud.com/tinper-acs/bee-complex-grid)。 1. 大数据渲染
2. 拖拽交换、拖拽改变列宽
3. 行选择（单选/多选）
4. 表体滚动
5. 数据操作
6. 支持多种表格编辑形式
7. 列锁定
8. 列过滤
9. 列隐藏
10. 列排序
- `Grid` 组件聚合了 `Table` 组件的所有功能特性，并在此基础上封装了导出数据、工具栏、分页、数据关联等高级功能。可达到随用随取、开箱即用的体验。当需要使用多种功能组合的 `Table` 展示时，推荐使用[Grid组件](https://design.yonyoucloud.com/tinper-acs/bee-complex-grid)。
## 如何使用 ## 如何使用

2
src/Table.js
View File

@ -80,7 +80,7 @@ const defaultProps = {
scroll: {}, scroll: {},
rowRef: () => null, rowRef: () => null,
getBodyWrapper: body => body, getBodyWrapper: body => body,
emptyText: () => <Icon type="uf-nodata" className="table-nodata"></Icon>, emptyText: () => <div><Icon type="uf-nodata" className="table-nodata"></Icon><span>暂无数据</span></div>,
columns:[], columns:[],
minColumnWidth: 80, minColumnWidth: 80,
locale:{}, locale:{},

12
src/Table.scss
View File

@ -1,6 +1,6 @@
@import "../node_modules/tinper-bee-core/scss/minxin-variables"; @import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins"; @import "../node_modules/tinper-bee-core/scss/minxin-mixins";
// @import "../node_modules/bee-loading/src/Loading"; @import "../node_modules/bee-loading/src/Loading";
$text-color: $font-color-base; $text-color: $font-color-base;
$font-size-base: 12px; $font-size-base: 12px;
@ -247,7 +247,15 @@ $icon-color:#505F79;
border-bottom: 1px solid $table-border-color; border-bottom: 1px solid $table-border-color;
text-align: center; text-align: center;
position: relative; position: relative;
.table-nodata{ font-size:48px; } .table-nodata{
font-size: 40px;
line-height: 44px;
+ span{
font-size: 12px;
line-height: 12px;
display: block;
}
}
} }
&-expand-icon-col { &-expand-icon-col {