diff --git a/build/Table.css b/build/Table.css
index eeaa362..f8cd1f4 100644
--- a/build/Table.css
+++ b/build/Table.css
@@ -4,7 +4,7 @@
font-size: 12px;
color: #212121;
position: relative;
- line-height: 1.5;
+ line-height: 1.33;
overflow: hidden; }
.u-table-body {
position: relative; }
@@ -47,13 +47,15 @@
background: rgb(235, 236, 240); }
.u-table th,
.u-table td {
- padding: 12px 8px;
+ padding: 12px 16px;
word-break: break-all; }
.u-table tr.filterable th {
padding-top: 5px !important;
padding-bottom: 5px !important; }
.u-table tr.filterable th .filterContext {
height: 35px; }
+ .u-table tr.filterable th .u-select-selection--single {
+ height: 26px; }
.u-table-row-hover {
background: rgb(235, 236, 240); }
.u-table-scroll {
@@ -80,7 +82,7 @@
background: rgb(241, 242, 245);
color: rgb(33, 33, 33); }
.u-table.fixed-height td {
- padding: 0px 8px; }
+ padding: 0px 16px; }
.u-table-fixed-header .u-table-body {
background: #fff;
position: relative; }
@@ -98,17 +100,17 @@
overflow-y: scroll;
box-sizing: border-box; }
.u-table-title {
- padding: 12px 8px;
+ padding: 12px 16px;
border-top: 1px solid rgb(193, 199, 208); }
.u-table-content {
position: relative; }
.u-table-footer {
- padding: 12px 8px;
+ padding: 12px 16px;
border-bottom: 1px solid rgb(193, 199, 208); }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
- margin: -12px -8px; }
+ margin: -12px -16px; }
.u-table-placeholder {
padding: 12px 8px;
background: #fff;
@@ -219,13 +221,18 @@
.u-table-thead th .bee-table-column-sorter {
position: relative;
margin-left: 4px;
- height: 1em;
+ height: 16px;
vertical-align: middle;
text-align: center;
- display: inline-block; }
+ display: inline-block;
+ margin-top: -3px; }
+ .u-table-thead th .bee-table-column-sorter i {
+ padding: 0px;
+ font-weight: 600;
+ color: #505F79; }
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
- line-height: 6px;
+ line-height: 16px;
display: block;
width: 34px;
cursor: pointer; }
@@ -296,17 +303,18 @@
position: relative; }
.u-table-filter-column-filter-icon {
position: absolute;
- top: 8px;
- right: 18px;
- width: 22px;
- height: 25px;
- line-height: 25px;
+ width: 30px;
+ height: 38px;
+ line-height: 38px;
+ right: 12px;
+ top: 1px;
z-index: 2;
background: rgb(241, 242, 245);
text-align: center;
cursor: pointer; }
.u-table-filter-column-filter-icon i.uf {
- padding: 0px; }
+ padding: 0px;
+ color: #505F79; }
.u-table-filter-column-pop-cont-item {
margin-top: 8px;
cursor: pointer; }
@@ -329,9 +337,14 @@
display: none;
pointer-events: none; }
.u-table .u-checkbox {
- height: 16px;
- line-height: 16px;
+ height: 14px;
+ line-height: 14px;
margin: 0px; }
+ .u-table .u-checkbox .u-checkbox-label {
+ line-height: 14px; }
+ .u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
+ width: 14px;
+ height: 14px; }
.u-table:focus {
outline: none;
@@ -521,16 +534,16 @@
.u-filter-dropdown-menu-wrap {
z-index: 1800; }
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
- line-height: 28px;
- height: 28px;
+ line-height: 26px;
+ height: 26px;
padding: 0px 16px 0 16px;
cursor: pointer; }
.filter-wrap .u-form-control {
- height: 28px; }
+ height: 26px; }
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
- height: 28px; }
+ height: 26px; }
.u-row-hover {
position: absolute;
diff --git a/build/lib/bigData.js b/build/lib/bigData.js
index 1c6e038..e285b10 100644
--- a/build/lib/bigData.js
+++ b/build/lib/bigData.js
@@ -490,6 +490,7 @@ function bigData(Table) {
if (!_this.props.expandedRowKeys) {
if (expandState) {
expandedRowKeys.push(rowKey);
+ _this4.setState({ needRender: !needRender });
} else {
var _index = -1;
expandedRowKeys.forEach(function (r, i) {
diff --git a/build/lib/dragColumn.js b/build/lib/dragColumn.js
index 74ae9b6..c4d1c4d 100644
--- a/build/lib/dragColumn.js
+++ b/build/lib/dragColumn.js
@@ -1,7 +1,7 @@
'use strict';
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; };
@@ -36,137 +36,137 @@ var cloneDeep = require('lodash.clonedeep');
function dragColumn(Table) {
- return function (_Component) {
- _inherits(DragColumn, _Component);
+ return function (_Component) {
+ _inherits(DragColumn, _Component);
- function DragColumn(props) {
- _classCallCheck(this, DragColumn);
+ function DragColumn(props) {
+ _classCallCheck(this, DragColumn);
- var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+ var _this = _possibleConstructorReturn(this, _Component.call(this, props));
- _this.setColumOrderByIndex = function (_column) {
- _column.forEach(function (da, i) {
- da.dragIndex = i;
- da.drgHover = false;
- });
- return _column;
- };
-
- _this.onDrop = function (event, data) {
- var dragSource = data.dragSource,
- dragTarg = data.dragTarg;
- var columns = _this.state.columns;
-
- var sourceIndex = -1,
- targetIndex = -1;
-
- sourceIndex = columns.findIndex(function (da, i) {
- return da.key == dragSource.key;
- });
- targetIndex = columns.findIndex(function (da, i) {
- return da.key == dragTarg.key;
- });
- // for (let index = 0; index < columns.length; index++) {
- // const da = columns[index];
- // if(da.key === dragSource.key){
- // columns[index] = dragTargColum;
- // }
- // if(da.key === dragTarg.key){
- // columns[index] = dragSourceColum;
- // }
- // }
- // 向前移动
- if (targetIndex < sourceIndex) {
- targetIndex = targetIndex + 1;
- }
- columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
- _this.setState({
- columns: cloneDeep(columns)
- });
- if (_this.props.onDrop) {
- _this.props.onDrop(event, data, columns);
- }
- };
-
- _this.getTarget = function (evt) {
- return evt.target || evt.srcElement;
- };
-
- _this.state = {
- columns: _this.setColumOrderByIndex(props.columns)
- };
- return _this;
- }
-
- DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
- if (nextProps.columns != this.props.columns) {
- this.setState({
- columns: this.setColumOrderByIndex(nextProps.columns)
- });
- }
- };
-
- DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
- if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
- return obj;
- }
- var resultData = {};
- return this.recursion(obj, resultData);
- };
-
- DragColumn.prototype.recursion = function (_recursion) {
- function recursion(_x) {
- return _recursion.apply(this, arguments);
- }
-
- recursion.toString = function () {
- return _recursion.toString();
- };
-
- return recursion;
- }(function (obj) {
- var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
- for (key in obj) {
- if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
- data[key] = recursion(obj[key]);
- } else {
- data[key] = obj[key];
- }
- }
- return data;
+ _this.setColumOrderByIndex = function (_column) {
+ _column.forEach(function (da, i) {
+ da.dragIndex = i;
+ da.drgHover = false;
});
+ return _column;
+ };
- DragColumn.prototype.render = function render() {
- var _props = this.props,
- data = _props.data,
- dragborder = _props.dragborder,
- draggable = _props.draggable,
- className = _props.className,
- columns = _props.columns,
- onDragStart = _props.onDragStart,
- onDragEnter = _props.onDragEnter,
- onDragOver = _props.onDragOver,
- onDrop = _props.onDrop,
- others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
+ _this.onDrop = function (event, data) {
+ var dragSource = data.dragSource,
+ dragTarg = data.dragTarg;
+ var columns = _this.state.columns;
- var key = new Date().getTime();
- return _react2["default"].createElement(Table, _extends({}, others, {
- columns: this.state.columns,
- data: data,
- className: className + ' u-table-drag-border',
- onDragStart: this.onDragStart,
- onDragOver: this.onDragOver,
- onDrop: this.onDrop,
- onDragEnter: this.onDragEnter,
- draggable: draggable,
- dragborder: dragborder
- // dragborder={false}
- , dragborderKey: key
- }));
- };
+ var sourceIndex = -1,
+ targetIndex = -1;
- return DragColumn;
- }(_react.Component);
+ sourceIndex = columns.findIndex(function (da, i) {
+ return da.key == dragSource.key;
+ });
+ targetIndex = columns.findIndex(function (da, i) {
+ return da.key == dragTarg.key;
+ });
+ // for (let index = 0; index < columns.length; index++) {
+ // const da = columns[index];
+ // if(da.key === dragSource.key){
+ // columns[index] = dragTargColum;
+ // }
+ // if(da.key === dragTarg.key){
+ // columns[index] = dragSourceColum;
+ // }
+ // }
+ // 向前移动
+ if (targetIndex < sourceIndex) {
+ targetIndex = targetIndex + 1;
+ }
+ columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
+ _this.setState({
+ columns: cloneDeep(columns)
+ });
+ if (_this.props.onDrop) {
+ _this.props.onDrop(event, data, columns);
+ }
+ };
+
+ _this.getTarget = function (evt) {
+ return evt.target || evt.srcElement;
+ };
+
+ _this.state = {
+ columns: _this.setColumOrderByIndex(props.columns)
+ };
+ return _this;
+ }
+
+ DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+ if (nextProps.columns != this.props.columns) {
+ this.setState({
+ columns: this.setColumOrderByIndex(nextProps.columns)
+ });
+ }
+ };
+
+ DragColumn.prototype.cloneDeep = function cloneDeep(obj) {
+ if ((typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) !== 'object' || Object.keys(obj).length === 0) {
+ return obj;
+ }
+ var resultData = {};
+ return this.recursion(obj, resultData);
+ };
+
+ DragColumn.prototype.recursion = function (_recursion) {
+ function recursion(_x) {
+ return _recursion.apply(this, arguments);
+ }
+
+ recursion.toString = function () {
+ return _recursion.toString();
+ };
+
+ return recursion;
+ }(function (obj) {
+ var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+ for (key in obj) {
+ if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
+ data[key] = recursion(obj[key]);
+ } else {
+ data[key] = obj[key];
+ }
+ }
+ return data;
+ });
+
+ DragColumn.prototype.render = function render() {
+ var _props = this.props,
+ data = _props.data,
+ dragborder = _props.dragborder,
+ draggable = _props.draggable,
+ className = _props.className,
+ columns = _props.columns,
+ onDragStart = _props.onDragStart,
+ onDragEnter = _props.onDragEnter,
+ onDragOver = _props.onDragOver,
+ onDrop = _props.onDrop,
+ others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
+
+ var key = new Date().getTime();
+ return _react2["default"].createElement(Table, _extends({}, others, {
+ columns: this.state.columns,
+ data: data,
+ className: className + ' u-table-drag-border',
+ onDragStart: this.onDragStart,
+ onDragOver: this.onDragOver,
+ onDrop: this.onDrop,
+ onDragEnter: this.onDragEnter,
+ draggable: draggable,
+ dragborder: dragborder
+ // dragborder={false}
+ , dragborderKey: key
+ }));
+ };
+
+ return DragColumn;
+ }(_react.Component);
}
module.exports = exports['default'];
\ No newline at end of file
diff --git a/build/lib/util.js b/build/lib/util.js
index 237dba1..9ea2e19 100644
--- a/build/lib/util.js
+++ b/build/lib/util.js
@@ -1,7 +1,7 @@
'use strict';
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; };
@@ -20,29 +20,29 @@ exports.ObjectAssign = ObjectAssign;
*/
function sortBy(arr, prop, desc) {
- var props = [],
- ret = [],
- i = 0,
- len = arr.length;
- if (typeof prop == 'string') {
- for (; i < len; i++) {
- var oI = arr[i];
- (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+ var props = [],
+ ret = [],
+ i = 0,
+ len = arr.length;
+ if (typeof prop == 'string') {
+ for (; i < len; i++) {
+ var oI = arr[i];
+ (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') {
- for (; i < len; i++) {
- var _oI = arr[i];
- (props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
+ props.sort();
+ for (i = 0; i < len; i++) {
+ ret[i] = props[i]._obj;
}
- } else {
- throw '参数类型错误';
- }
- props.sort();
- for (i = 0; i < len; i++) {
- ret[i] = props[i]._obj;
- }
- if (desc) ret.reverse();
- return ret;
+ if (desc) ret.reverse();
+ return ret;
};
/**
@@ -51,11 +51,11 @@ function sortBy(arr, prop, desc) {
* @param {} property
*/
function compare(property) {
- return function (a, b) {
- var value1 = a[property];
- var value2 = b[property];
- return value1 - value2;
- };
+ return function (a, b) {
+ var value1 = a[property];
+ var value2 = b[property];
+ return value1 - value2;
+ };
}
/**
@@ -63,17 +63,17 @@ function compare(property) {
* @param {*} obj 要拷贝的对象
*/
function ObjectAssign(obj) {
- var b = obj instanceof Array;
- var tagObj = b ? [] : {};
- if (b) {
- //数组
- obj.forEach(function (da) {
- var _da = {};
- _extends(_da, da);
- tagObj.push(_da);
- });
- } else {
- _extends(tagObj, obj);
- }
- return tagObj;
+ var b = obj instanceof Array;
+ var tagObj = b ? [] : {};
+ if (b) {
+ //数组
+ obj.forEach(function (da) {
+ var _da = {};
+ _extends(_da, da);
+ tagObj.push(_da);
+ });
+ } else {
+ _extends(tagObj, obj);
+ }
+ return tagObj;
}
\ No newline at end of file
diff --git a/demo/demolist/Demo131.js b/demo/demolist/Demo131.js
index 07835ce..35b4d38 100644
--- a/demo/demolist/Demo131.js
+++ b/demo/demolist/Demo131.js
@@ -13,7 +13,7 @@ const columns = [
{
title:'序号',
dataIndex:'index',
- width:'50',
+ width:'60',
key:'index',
render:(text,record,index)=>{
return index
diff --git a/demo/demolist/Demo133.js b/demo/demolist/Demo133.js
index b873d76..73e0753 100644
--- a/demo/demolist/Demo133.js
+++ b/demo/demolist/Demo133.js
@@ -17,7 +17,7 @@ const columns = [
{
title:'序号',
dataIndex:'index',
- width:'50',
+ width:'80',
key:'index',
render:(text,record,index)=>{
return index
diff --git a/demo/demolist/Demo134.js b/demo/demolist/Demo134.js
index b83eb33..3f06b9d 100644
--- a/demo/demolist/Demo134.js
+++ b/demo/demolist/Demo134.js
@@ -1,10 +1,3 @@
-/**
-*
-* @title 树状表滚动加载
-* 【Tooltip】
-* @description
-*/
-
import React, { Component } from "react";
import {Tooltip} from "tinper-bee";
@@ -83,6 +76,7 @@ class Demo34 extends Component {
parentNodeId='parent'
scroll={{y:300}}
height={40}
+ onExpand={this.onExpand}
onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index);
}}
@@ -93,4 +87,4 @@ class Demo34 extends Component {
}
}
-export default Demo34;
+export default Demo34;
\ No newline at end of file
diff --git a/demo/demolist/Demo35.js b/demo/demolist/Demo35.js
index ffe287d..2b4773b 100644
--- a/demo/demolist/Demo35.js
+++ b/demo/demolist/Demo35.js
@@ -17,7 +17,7 @@ const columns = [
title: "Name",
dataIndex: "name",
key: "name",
- width: 100,
+ width: 120,
fixed: "left"
},
{
diff --git a/demo/demolist/Demo53.js b/demo/demolist/Demo53.js
index 3ce2567..75f109a 100644
--- a/demo/demolist/Demo53.js
+++ b/demo/demolist/Demo53.js
@@ -74,7 +74,7 @@ const columns24 = [
title: "武功类型",
dataIndex: "g",
key: "g",
- width: 100
+ width: 150
},
{
title: "师傅",
diff --git a/demo/demolist/Demo83.js b/demo/demolist/Demo83.js
index 1cedfc9..f53b8de 100644
--- a/demo/demolist/Demo83.js
+++ b/demo/demolist/Demo83.js
@@ -70,7 +70,7 @@ const data13 = [
//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常
-let ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);
+let ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);
class Demo13 extends Component {
constructor(props) {
diff --git a/demo/index.js b/demo/index.js
index 6be1070..6c3c129 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -8,7 +8,7 @@ import Button from '../src';
-var Demo01 = require("./demolist/Demo01");var Demo02 = require("./demolist/Demo02");var Demo03 = require("./demolist/Demo03");var Demo04 = require("./demolist/Demo04");var Demo05 = require("./demolist/Demo05");var Demo11 = require("./demolist/Demo11");var Demo12 = require("./demolist/Demo12");var Demo21 = require("./demolist/Demo21");var Demo22 = require("./demolist/Demo22");var Demo32 = require("./demolist/Demo32");var Demo35 = require("./demolist/Demo35");var Demo41 = require("./demolist/Demo41");var Demo51 = require("./demolist/Demo51");var Demo52 = require("./demolist/Demo52");var Demo53 = require("./demolist/Demo53");var Demo62 = require("./demolist/Demo62");var Demo63 = require("./demolist/Demo63");var Demo71 = require("./demolist/Demo71");var Demo81 = require("./demolist/Demo81");var Demo82 = require("./demolist/Demo82");var Demo83 = require("./demolist/Demo83");var Demo91 = require("./demolist/Demo91");var Demo92 = require("./demolist/Demo92");var Demo101 = require("./demolist/Demo101");var Demo102 = require("./demolist/Demo102");var Demo103 = require("./demolist/Demo103");var Demo104 = require("./demolist/Demo104");var Demo105 = require("./demolist/Demo105");var Demo121 = require("./demolist/Demo121");var Demo131 = require("./demolist/Demo131");var Demo132 = require("./demolist/Demo132");var Demo133 = require("./demolist/Demo133");var Demo134 = require("./demolist/Demo134");var Demo161 = require("./demolist/Demo161");var Demo162 = require("./demolist/Demo162");var Demo181 = require("./demolist/Demo181");var DemoArray = [{"example":,"title":" 基本表格","code":"/**\n*\n* @title 基本表格\n* 【Tooltip】\n* @description 鼠标hover行时呼出操作按钮\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500, \"textAlign\":\"center\"},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200, \"textAlign\":\"center\"}\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo01 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 鼠标hover行时呼出操作按钮"},{"example":,"title":" 默认无数据展示","code":"/**\r\n*\r\n* @title 默认无数据展示\r\n* @description 无数据时显示效果展示(可自定义)\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table, Icon } from 'tinper-bee';\r\n\n\r\n\r\nconst columns02 = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"Address\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n }\r\n ];\r\n \r\n const data02 = [];\r\n\r\n const emptyFunc = () => \r\n \r\nclass Demo02 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n","desc":" 无数据时显示效果展示(可自定义)","scss_code":".demo02 {\n .u-table-placeholder i{\n font-size: 60px;\n }\n}"},{"example":,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @description 设置`scroll.y`指定滚动区域的高度,添加纵向滚动条,达到固定表头效果\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns03 = [\r\n {\r\n title: \"Full Name\",\r\n width: 100,\r\n dataIndex: \"name\",\r\n key: \"name\"\r\n },\r\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\r\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\r\n];\r\n\r\nconst data03 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },{\r\n key: \"11\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"12\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"13\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"14\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n }\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n","desc":" 设置`scroll.y`指定滚动区域的高度,添加纵向滚动条,达到固定表头效果"},{"example":,"title":" 隔行换色","code":"/**\n*\n* @title 隔行换色\n* @description 可自定义斑马线颜色\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns04 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data04 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo04 extends Component {\n render() {\n return ;\n }\n}\n\n","desc":" 可自定义斑马线颜色","scss_code":".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}"},{"example":,"title":" 表格 Loading 加载","code":"/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @description loading可以传boolean或者object对象,object为bee-loading组件的参数类型\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button,Popconfirm} from \"tinper-bee\";\r\n\r\nconst columns05 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n render(text, record, index) {\r\n return (\r\n \r\n \r\n 一些操作\r\n \r\n \r\n );\r\n }\r\n }\r\n];\r\n\r\nconst data05 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n
标题: 这是一个标题
}\r\n footer={currentData => 表尾: 我是小尾巴
}\r\n // loading={this.state.loading}或者是boolean\r\n loading={{show:this.state.loading}}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" loading可以传boolean或者object对象,object为bee-loading组件的参数类型"},{"example":,"title":" 横向滚动条","code":"/**\n*\n* @title 横向滚动条\n* @description 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns11 = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 200, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 200, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 200\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 200\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 200\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 200\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 200\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 200\n }\n];\n\nconst data11 = [\n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"4\"\n },\n];\n\nclass Demo11 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值"},{"example":,"title":" 纵向滚动条","code":"/**\n*\n* @title 纵向滚动条\n* @description 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns12 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data12 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\nclass Demo12 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值"},{"example":,"title":" 渲染本地数据","code":"/**\n*\n* @title 渲染本地数据\n* @description \n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo21 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" "},{"example":,"title":" 渲染远程数据","code":"/**\n*\n* @title 渲染远程数据\n* @description \n*/\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\nimport reqwest from 'reqwest';\nimport { Table } from 'tinper-bee';\n\nconst columns = [{\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n render: name => `${name.first} ${name.last}`,\n width: '20%',\n}, {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n}, {\n title: 'Email',\n dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [],\n loading: false,\n }\n }\n\n componentDidMount() {\n this.fetch();\n }\n\n handleTableChange = (pagination, filters, sorter) => {\n const pager = { ...this.state.pagination };\n pager.current = pagination.current;\n this.setState({\n pagination: pager,\n });\n this.fetch({\n results: pagination.pageSize,\n page: pagination.current,\n sortField: sorter.field,\n sortOrder: sorter.order,\n ...filters,\n });\n }\n\n fetch = (params = {}) => {\n console.log('params:', params);\n this.setState({ loading: true });\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then((data) => {\n const pagination = { ...this.state.pagination };\n // Read total count from server\n // pagination.total = data.totalCount;\n pagination.total = 200;\n this.setState({\n loading: false,\n data: data.results,\n pagination,\n });\n });\n }\n \n onPageIndexSelect = pageIndex => {\n let { pageSize, nodeId } = this.state\n\n dataMaintainStore.getTableRequest( nodeId, pageIndex, pageSize)\n this.setState({\n pageIndex: pageIndex\n })\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" "},{"example":,"title":" 多列表头","code":"/**\r\n *\r\n * @title 多列表头\r\n * @description columns[n] 可以内嵌 children,以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight,注:修改th的padding top和bottom置为0,否则会有影响\r\n *\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" columns[n] 可以内嵌 children,以渲染分组表头。","scss_code":".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}"},{"example":,"title":" 合并列后合计","code":"/**\n *\n * @title 合并列后合计\n * @description 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\n \nlet ComplexTable = sum(Table);\n\nconst columns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: 100,\n fixed: \"left\"\n },\n {\n title: \"Other\",\n children: [\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: 200,\n sumCol: true,\n },\n {\n title: \"Address\",\n children: [\n {\n title: \"Street\",\n dataIndex: \"street\",\n key: \"street\",\n width: 200\n },\n {\n title: \"Block\",\n children: [\n {\n title: \"Building\",\n dataIndex: \"building\",\n key: \"building\",\n width: 100\n },\n {\n title: \"Door No.\",\n dataIndex: \"number\",\n key: \"number\",\n // width: 100,\n sumCol: true,\n }\n ]\n }\n ]\n }\n ]\n },\n // {\n // title: \"Company\",\n // children: [\n // {\n // title: \"Company Address\",\n // dataIndex: \"companyAddress\",\n // key: \"companyAddress\",\n // width: 100,\n // },\n // {\n // title: \"Company Name\",\n // dataIndex: \"companyName\",\n // key: \"companyName\",\n // width: 100,\n // }\n // ]\n // },\n {\n title: \"Gender\",\n dataIndex: \"gender\",\n key: \"gender\",\n width: 80,\n fixed: \"right\"\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n name: \"John Brown\"+i,\n age: i + Math.floor(Math.random()*10),\n street: \"Lake Park\",\n building: \"C\",\n number: 20 * Math.floor(Math.random()*10),\n companyAddress: \"Lake Street 42\",\n companyName: \"SoftLake Co\",\n gender: \"M\"\n });\n }\n return data;\n}\n\nclass Demo35 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData()\n };\n }\n\n changeData = ()=>{\n this.setState({\n data: getData()\n });\n }\n\n render() {\n const {data} = this.state;\n return (\n \n \n\n \n
\n );\n }\n}\n\n","desc":" 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)"},{"example":,"title":" 编辑态表格","code":"/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)\n*\n*/\n\nimport React from \"react\";\nimport {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from \"tinper-bee\";\nimport { Table, Datepicker } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderDate from \"tinper-bee/lib/DateRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, FormControl, Icon);\nconst DateRender = renderDate(Datepicker, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\nconst dataSource = [\n {\n key: \"boyuzhou\",\n value: \"jack\"\n },\n {\n key: \"renhualiu\",\n value: \"lucy\"\n },\n {\n key: \"yuzhao\",\n value: \"yiminghe\"\n }\n];\nclass Demo41 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n />\n )\n },\n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n reg={/^[0-9]+$/}\n />\n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n check = (flag, obj) => {\n console.log(flag);\n console.log(obj);\n };\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = (index, key) => {\n return value => {\n console.log(`selected ${value}`);\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n getData = () => {\n console.log(this.state.dataSource);\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n
\n
\n
\n );\n }\n}\n\n\n","desc":" 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)"},{"example":,"title":" 左侧固定列","code":"/**\n*\n* @title 左侧固定列\n* @description 固定列到表格的左侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"address\", dataIndex: \"address\", key: \"address\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo51 extends Component {\n render() {\n return ;\n }\n}\n\n","desc":" 固定列到表格的左侧"},{"example":,"title":" 右侧固定列","code":"/**\n*\n* @title 右侧固定列\n* @description 固定列到表格的右侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\n\nconst columns5 = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 100\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 100,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 100\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 100\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:100,\n fixed: \"right\",\n render(text, record, index) {\n return (\n \n )\n }\n }\n];\n\nconst data5 = [\n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n d:\"操作\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"2操作\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"3操作\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"4操作\",\n key: \"4\"\n },\n];\n\nclass Demo52 extends Component {\n render() {\n return ;\n }\n}\n\n","desc":" 固定列到表格的右侧"},{"example":,"title":" 动态设置列锁定、解除锁定","code":"/**\n*\n* @title 动态设置列锁定、解除锁定\n* @description 动态设置固、取消固定列\n* @description 动态固定列设置 一个table动态设置一个方向【fixed: \"left\",fixed: \"right\"】。\n*\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\n// const columns24 = [\n// {\n// title: \"Full Name\",\n// width: 100,\n// dataIndex: \"name\",\n// key: \"name\",\n// fixed: \"left\",\n// },\n// { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n// { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n// { title: \"Column 2\", dataIndex: \"address2\", key: \"2\" },\n// { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n// { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n// { title: \"Column 24\", dataIndex: \"address\", key: \"24\" },\n// { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n// { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n// { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n// ];\n\n\nconst columns24 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100, \n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 150 \n },\n {\n title: \"对手\",\n dataIndex: \"e\",\n key: \"e\",\n width: 100 \n },\n {\n title: \"帮派\",\n dataIndex: \"f\",\n key: \"f\",\n width: 100 \n },\n {\n title: \"武功类型\",\n dataIndex: \"g\",\n key: \"g\",\n width: 100 \n },\n {\n title: \"师傅\",\n dataIndex: \"k\",\n key: \"k\",\n // width: 100 \n },\n {\n title: \"攻击系数\",\n dataIndex: \"h\",\n key: \"h\",\n width: 100 \n }\n];\n\n\nconst data24 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: \"1\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: \"3\" }\n]; \n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns24\n }\n }\n\n \n onSelect = ({key,item})=>{ \n console.log(`${key} selected`); //获取key\n let currentObject = item.props.data; //获取选中对象的数据\n let {columns} = this.state;\n let fixedCols = [];\n let nonColums = [];\n columns.find(da=>{\n if(da.key == key){\n da.fixed?delete da.fixed:da.fixed = 'left';\n }\n da.fixed?fixedCols.push(da):nonColums.push(da);\n });\n \n columns = [...fixedCols,...nonColums]\n\n this.setState({\n columns\n });\n }\n //表头增加下拉菜单\n renderColumnsDropdown(columns) {\n const icon ='uf-arrow-down';\n \n return columns.map((originColumn,index) => {\n let column = Object.assign({}, originColumn);\n let menuInfo = [], title='锁定';\n if(originColumn.fixed){\n title = '解锁'\n }\n menuInfo.push({\n info:title,\n key:originColumn.key,\n index:index\n });\n const menu = (\n )\n column.title = (\n \n {column.title}\n \n \n \n \n \n );\n return column;\n });\n \n }\n\n render() {\n let {columns} = this.state;\n columns = this.renderColumnsDropdown(columns);\n return ;\n }\n}\n\n","desc":" 动态设置固、取消固定列","scss_code":"th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n"},{"example":,"title":" 按条件、值过滤","code":"/**\n*\n* @title 按条件、值过滤\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns26 = [\n { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\n { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\n { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\n];\n\nconst data26 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo26 extends Component {\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n render() {\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns26}\n data={data26} />;\n }\n}\n\n","desc":" 可以根据输入项目以及判断条件对表格内的数据进行过滤"},{"example":,"title":" 复杂表格中行过滤","code":"/**\n*\n* @title 复杂表格中行过滤\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n*\n*/\n\n/**\n * @description \n */\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\nconst data27 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\nclass Demo27 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n dropdownvalue: []\n }\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onClick = (item) => {\n console.log(item);\n }\n\n render() {\n const menu1 = (\n )\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\n {\n title: \"\", width: 40, dataIndex: \"key\", key: \"key\", render: (text, record, index) => {\n return \n \n \n }\n },\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"年龄\",\n width: 180,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"日期\",\n width: 190,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"时间范围\",\n width: 290,\n dataIndex: \"mark\",\n key: \"mark\",\n filterType: \"daterange\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"地址\",\n width: 100,\n dataIndex: \"address\",\n key: \"address\",\n filterType: \"dropdown\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n }\n ];\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认500ms\n filterable={true}//是否开启过滤数据功能\n getSelectedDataFunc={this.getSelectedDataFunc}\n bordered\n multiSelect={multiObj}\n columns={columns27}\n data={data27} />;\n }\n}\n\n","desc":" 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等"},{"example":,"title":" 列过滤面板","code":"/**\n*\n* @title 列过滤面板\n* @description 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Popover,Popconfirm} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data21 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e: \"操作\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠',e: \"操作\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e: \"操作\", key: \"3\" }\n];\n\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\n\nconst defaultProps21 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo21 extends Component {\n constructor(props) {\n super(props);\n this.state ={\n columns21: [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\"\n // width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n // width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n ifshow:false,\n // width: 200,\n // sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"操作\",\n dataIndex: \"e\",\n key: \"e\",\n render(text, record, index){\n return (\n \n );\n }\n }\n ]};\n }\n afterFilter = (optData,columns)=>{\n if(optData.key == 'b'){\n if(optData.ifshow){\n columns[2].ifshow = false;\n }else{\n columns[2].ifshow = true;\n }\n this.setState({\n columns21 :columns,\n showFilterPopover:true\n });\n }\n \n }\n \n render() {\n \n return ;\n }\n}\nDemo21.defaultProps = defaultProps21;\n\n\n","desc":" 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数"},{"example":,"title":" 列排序","code":"/**\n* @title 列排序\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\n\nlet ComplexTable = sort(Table, Icon);\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n render() {\n\n return ;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n","desc":" column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称"},{"example":,"title":" 后端列排序","code":"/**\n* @title 后端列排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\nlet ComplexTable = sort(Table, Icon);\n\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"分数\",\n dataIndex: \"e\",\n key: \"e\",\n sorter: (a, b) => a.c - b.c\n },\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\n];\n\nconst defaultProps = {\n prefixCls: \"bee-table\"\n};\nclass Demo28 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n /**\n * 后端获取数据\n */\n sortFun = (sortParam)=>{\n console.info(sortParam);\n //将参数传递给后端排序\n }\n render() {\n let sortObj = {\n mode:'multiple',\n backSource:true,\n sortFun:this.sortFun\n }\n return ;\n }\n}\nDemo28.defaultProps = defaultProps;\n\n\n","desc":""},{"example":,"title":" 多列排序","code":"/**\n *\n * @title 多列排序\n * @description 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox,Button,Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\nimport sort from \"tinper-bee/lib/sort.js\";;\nimport sum from \"tinper-bee/lib/sum.js\";;\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n className:'dfasd',\n width: 200\n },\n {\n title: \"功力指数\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"成绩\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: 675, c: 30, d: \"内行\",e:100, key: \"2\" },\n { a: \"令狐冲\", b: 43, c: 41, d: \"大侠\",e:90, key: \"1\" },\n { a: \"令狐冲1\", b: 43, c: 81, d: \"大侠\", e:120,key: \"4\" },\n { a: \"令狐冲2\", b: 43, c: 81, d: \"大侠\", e:130,key: \"5\" },\n { a: \"郭靖\", b: 153, c: 25, d: \"大侠\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);\n\nclass Demo13 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data13: data13,\n selectedRow: this.selectedRow,\n selectDisabled: this.selectDisabled\n };\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n selectDisabled = (record, index) => {\n // console.log(record);\n if (index === 1) {\n return true;\n }\n return false;\n };\n selectedRow = (record, index) => {\n // console.log(record);\n if (index === 0) {\n return true;\n }\n return false;\n };\n onClick = () => {\n this.setState({\n selectedRow: function() {}\n });\n };\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let sortObj = {\n mode:'multiple'\n }\n \n return (\n \n \n \n
\n );\n }\n}\n","desc":" 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)"},{"example":,"title":" 拖拽改变列顺序","code":"/**\n*\n* @title 拖拽改变列顺序\n* @description 点击列的表头,进行左右拖拽,注意:固定列不可以交换\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns22 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200,\n }\n];\n\nconst data22 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return ;\n }\n}\nDemo22.defaultProps = defaultProps22;\n\n\n","desc":" 点击列的表头,进行左右拖拽,注意:固定列不可以交换"},{"example":,"title":" 拖拽改变列宽度","code":"/**\n*\n* @title 拖拽改变列宽度\n* @description 注:不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n }, \n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return {\n console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n","desc":" 注:不支持tree结构的表头、合并表头的table"},{"example":,"title":" 嵌套子表格","code":"/**\n*\n* @title 嵌套子表格\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Popconfirm } from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\nconst DragColumnTable = dragColumn(Table);\nconst columns16 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst columns17 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\n\nclass Demo16 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{}\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 42 * (this.state.data_obj[record.key].length+ 2);\n \n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格"},{"example":,"title":" 层级树型展示","code":"/**\n*\n* @title 层级树型展示\n* @description 通过在data中配置children数据,来自动生成树形表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n\n constructor(props){\n super(props);\n this.state = {\n data: data4,\n factoryValue: 0,\n selectedRow: new Array(data4.length)//状态同步\n }\n }\n\n render() {\n return {\n if (this.state.selectedRow[index]) {\n return 'selected';\n } else {\n return '';\n }\n }}\n onRowClick={(record,index,indent)=>{\n let selectedRow = new Array(this.state.data.length);\n selectedRow[index] = true;\n this.setState({\n factoryValue: record,\n selectedRow: selectedRow\n });\n }}\n \n columns={columns4} data={data4} />;\n }\n}\n\n\n","desc":" 通过在data中配置children数据,来自动生成树形表格"},{"example":,"title":" 选中行颜色、自定义表格标题和表尾","code":"/**\r\n*\r\n* @title 选中行颜色、自定义表格标题和表尾\r\n* @description\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip,} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width:80 , className:\"rowClassName\"},\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n];\r\n\r\nconst data = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"黄蓉\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nclass Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n {\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\r\n title={currentData => 标题: 这是一个标题
}\r\n footer={currentData => 表尾: 我是小尾巴
}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":""},{"example":,"title":" 自定义行高","code":"/**\n*\n* @title 自定义行高\n* @description 设置`height`属性自定义表格行高,设置`headerHeight`属性自定义表头高度。\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n \n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n","desc":" 设置`height`属性自定义表格行高,设置`headerHeight`属性自定义表头高度。"},{"example":,"title":" 自定义行、列合并","code":"/**\n*\n* @title 自定义行、列合并\n* @description 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst renderContent = (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n};\n\nconst columns = [{\n title: 'Name',\n key: \"name\",\n dataIndex: 'name',\n render: (text, row, index) => {\n if (index < 4) {\n return {text};\n }\n return {\n children: {text},\n props: {\n colSpan: 5,\n },\n };\n },\n}, {\n title: 'Age',\n key: \"Age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: 'Home phone',\n colSpan: 2,\n key: \"tel\",\n dataIndex: 'tel',\n render: (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 2) {\n obj.props.rowSpan = 2;\n }\n if (index === 3) {\n obj.props.rowSpan = 0;\n }\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n },\n}, {\n title: 'Phone',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: 'Address',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\nconst data = [{\n key: '1',\n name: 'John Brown',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: 'New York No. 1 Lake Park',\n}, {\n key: '2',\n name: 'Jim Green',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: 'London No. 1 Lake Park',\n}, {\n key: '3',\n name: 'Joe Black',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Sidney No. 1 Lake Park',\n}, {\n key: '4',\n name: 'Jim Red',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'London No. 2 Lake Park',\n}, {\n key: '5',\n name: 'Jake White',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Dublin No. 2 Lake Park',\n}];\n\nclass Demo15 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n\n","desc":" 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。"},{"example":,"title":" 多选表格","code":"/**\r\n*\r\n* @title 多选表格\r\n* @description 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport {Checkbox} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n\r\nconst columns12 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst data12 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\",_checked:true },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" ,_checked:false},\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" ,_checked:false},\r\n { a: \"郭靖1\", b: \"男\", c: 25,d:'大侠', key: \"4\" ,_disabled:true},\r\n { a: \"郭靖2\", b: \"男\", c: 25,d:'大侠', key: \"5\" ,_checked:false}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data12\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 如果在回调中增加setState逻辑,需要同步data中的_checked属性。即下面的代码\r\n // const allChecked = selectedList.length == 0?false:true;\r\n // record为undefind则为全选或者全不选\r\n // if(!record){\r\n // data12.forEach(item=>{\r\n // item._checked = allChecked;\r\n // })\r\n // }else{\r\n // data12[index]['_checked'] = record._checked;\r\n // } \r\n\r\n \r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n {\r\n if (record._checked) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。"},{"example":,"title":" 滚动加载","code":"/**\n*\n* @title 滚动加载\n* @description 万行数据渲染\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo30 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n","desc":" 万行数据渲染","scss_code":".big-data tr td {\n // height: 48px;\n}"},{"example":,"title":" 嵌套子表格滚动加载","code":"/**\n*\n* @title 嵌套子表格滚动加载\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst outColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst innerColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [ ...new Array(10000) ].map((e, i) => {\n return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n })\n\n\n\n\n\nclass Demo31 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{\n 0:[\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ],\n 1: [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ],\n }\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 200;\n let innderData = [ ...new Array(100) ].map((e, i) => {\n return { a: index+\"-\"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+\"-\"+ i };\n })\n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格"},{"example":,"title":" 多功能表格滚动加载","code":"/**\n*\n* @title 多功能表格滚动加载\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip,Checkbox,Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\n\nlet ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);\n\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo32 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n\n render() {\n return (\n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n getSelectedDataFunc={this.getSelectedDataFunc}/>\n\n );\n }\n}\n\n\n","desc":""},{"example":,"title":" 树状表滚动加载","code":"/**\n*\n* @title 树状表滚动加载\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'150',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(1000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }else{\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }\n return rs;\n })\n\n\nclass Demo34 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n onExpandedRowsChange = (params)=>{\n console.log(params);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n\n","desc":""},{"example":,"title":" 表格+分页","code":"/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns8 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst pageData = {\n 1: [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n ],\n 2: [\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\n { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\n","desc":" 点击分页联动表格","scss_code":".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}"},{"example":,"title":" 表格+搜索","code":"/**\n *\n * @title 表格+搜索\n * @description 搜索刷新表格数据\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Icon,FormControl,InputGroup} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let { onSearch } = this.props;\n this.setState({\n empty: true\n });\n onSearch && onSearch(this.state.searchValue);\n };\n\n /**\n * 捕获回车\n * @param e\n */\n handleKeyDown = e => {\n if (e.keyCode === 13) {\n this.handleSearch();\n }\n };\n\n /**\n * 输入框改变\n * @param e\n */\n handleChange = (e) => {\n this.setState({\n searchValue: e\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let { onEmpty } = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty ? (\n \n ) : null}\n\n \n \n \n \n );\n }\n}\n\nconst columns9 = [\n {\n title: \"姓名\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst userData = [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: userData\n };\n }\n\n handleSearch = value => {\n if (value === \"\") {\n return this.setState({\n data: userData\n });\n }\n let regExp = new RegExp(value, \"ig\");\n let data = userData.filter(item => regExp.test(item.a));\n this.setState({\n data\n });\n };\n\n handleEmpty = () => {\n this.setState({\n data: userData\n });\n };\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 搜索刷新表格数据"},{"example":,"title":" 主子表","code":"/**\n *\n * @title 主子表\n * @description 点击主表行,子表联动切换\n * @description 具体场景演示请前往典型案例(http://yanshi01.app.yyuap.com/wbalone/index.html#/)\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns7 = [\n { title: \"班级\", dataIndex: \"a\", key: \"a\" },\n { title: \"人数\", dataIndex: \"b\", key: \"b\" },\n { title: \"班主任\", dataIndex: \"c\", key: \"c\" },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data7 = [\n { a: \"02级一班\", b: \"2\", c: \"欧阳锋\", d: \"大侠\", key: \"1\" },\n { a: \"03级二班\", b: \"3\", c: \"归海一刀\", d: \"大侠\", key: \"2\" },\n { a: \"05级三班\", b: \"1\", c: \"一拳超人\", d: \"愣头青\", key: \"3\" }\n];\n\nconst columns7_1 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\" },\n { title: \"班级\", dataIndex: \"b\", key: \"b\" },\n { title: \"系别\", dataIndex: \"c\", key: \"c\" }\n];\n\nclass Demo7 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n children_data: [],\n selectedRowIndex: -1\n };\n }\n\n rowclick = (record, index) => {\n if (record.a === \"02级一班\") {\n this.setState({\n children_data: [\n { a: \"郭靖\", b: \"02级一班\", c: \"文学系\", key: \"1\" },\n { a: \"黄蓉\", b: \"02级一班\", c: \"文学系\", key: \"2\" }\n ],\n selectedRowIndex: index\n });\n } else if (record.a === \"03级二班\") {\n this.setState({\n children_data: [\n { a: \"杨过\", b: \"03级二班\", c: \"外语系\", key: \"1\" },\n { a: \"小龙女\", b: \"03级二班\", c: \"外语系\", key: \"2\" },\n { a: \"傻姑\", b: \"03级二班\", c: \"外语系\", key: \"3\" }\n ],\n selectedRowIndex: index\n });\n } else if (record.a === \"05级三班\") {\n this.setState({\n children_data: [{ a: \"金圣叹\", b: \"05级三班\", c: \"美术系\", key: \"1\" }],\n selectedRowIndex: index\n });\n }\n };\n\n render() {\n return (\n \n {/*
{\n if (this.state.selectedRowIndex == index) {\n return 'selected';\n } else {\n return '';\n }\n }}\n title={currentData => 标题: 我是主表
}\n />\n 标题: 我是子表
}\n /> */}\n \n );\n }\n}\n\n\n","desc":" 点击主表行,子表联动切换"}]
+var Demo01 = require("./demolist/Demo01");var Demo02 = require("./demolist/Demo02");var Demo03 = require("./demolist/Demo03");var Demo04 = require("./demolist/Demo04");var Demo05 = require("./demolist/Demo05");var Demo11 = require("./demolist/Demo11");var Demo12 = require("./demolist/Demo12");var Demo21 = require("./demolist/Demo21");var Demo32 = require("./demolist/Demo32");var Demo35 = require("./demolist/Demo35");var Demo41 = require("./demolist/Demo41");var Demo51 = require("./demolist/Demo51");var Demo52 = require("./demolist/Demo52");var Demo53 = require("./demolist/Demo53");var Demo62 = require("./demolist/Demo62");var Demo63 = require("./demolist/Demo63");var Demo71 = require("./demolist/Demo71");var Demo81 = require("./demolist/Demo81");var Demo82 = require("./demolist/Demo82");var Demo83 = require("./demolist/Demo83");var Demo91 = require("./demolist/Demo91");var Demo92 = require("./demolist/Demo92");var Demo101 = require("./demolist/Demo101");var Demo102 = require("./demolist/Demo102");var Demo103 = require("./demolist/Demo103");var Demo104 = require("./demolist/Demo104");var Demo105 = require("./demolist/Demo105");var Demo121 = require("./demolist/Demo121");var Demo131 = require("./demolist/Demo131");var Demo132 = require("./demolist/Demo132");var Demo133 = require("./demolist/Demo133");var Demo134 = require("./demolist/Demo134");var Demo161 = require("./demolist/Demo161");var Demo162 = require("./demolist/Demo162");var DemoArray = [{"example":,"title":" 基本表格","code":"/**\n*\n* @title 基本表格\n* 【Tooltip】\n* @description 鼠标hover行时呼出操作按钮\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500, \"textAlign\":\"center\"},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200, \"textAlign\":\"center\"}\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo01 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 鼠标hover行时呼出操作按钮"},{"example":,"title":" 默认无数据展示","code":"/**\r\n*\r\n* @title 默认无数据展示\r\n* @description 无数据时显示效果展示(可自定义)\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table, Icon } from 'tinper-bee';\r\n\n\r\n\r\nconst columns02 = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"Address\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n }\r\n ];\r\n \r\n const data02 = [];\r\n\r\n const emptyFunc = () => \r\n \r\nclass Demo02 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n","desc":" 无数据时显示效果展示(可自定义)","scss_code":".demo02 {\n .u-table-placeholder i{\n font-size: 60px;\n }\n}"},{"example":,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @description 设置`scroll.y`指定滚动区域的高度,添加纵向滚动条,达到固定表头效果\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns03 = [\r\n {\r\n title: \"Full Name\",\r\n width: 100,\r\n dataIndex: \"name\",\r\n key: \"name\"\r\n },\r\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\r\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\r\n];\r\n\r\nconst data03 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },{\r\n key: \"11\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"12\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"13\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"14\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n }\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n","desc":" 设置`scroll.y`指定滚动区域的高度,添加纵向滚动条,达到固定表头效果"},{"example":,"title":" 隔行换色","code":"/**\n*\n* @title 隔行换色\n* @description 可自定义斑马线颜色\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns04 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data04 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo04 extends Component {\n render() {\n return ;\n }\n}\n\n","desc":" 可自定义斑马线颜色","scss_code":".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}"},{"example":,"title":" 表格 Loading 加载","code":"/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @description loading可以传boolean或者object对象,object为bee-loading组件的参数类型\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button,Popconfirm} from \"tinper-bee\";\r\n\r\nconst columns05 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n render(text, record, index) {\r\n return (\r\n \r\n \r\n 一些操作\r\n \r\n \r\n );\r\n }\r\n }\r\n];\r\n\r\nconst data05 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n
标题: 这是一个标题
}\r\n footer={currentData => 表尾: 我是小尾巴
}\r\n // loading={this.state.loading}或者是boolean\r\n loading={{show:this.state.loading}}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" loading可以传boolean或者object对象,object为bee-loading组件的参数类型"},{"example":,"title":" 横向滚动条","code":"/**\n*\n* @title 横向滚动条\n* @description 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns11 = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 200, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 200, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 200\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 200\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 200\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 200\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 200\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 200\n }\n];\n\nconst data11 = [\n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"4\"\n },\n];\n\nclass Demo11 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值"},{"example":,"title":" 纵向滚动条","code":"/**\n*\n* @title 纵向滚动条\n* @description 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns12 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data12 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\nclass Demo12 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值"},{"example":,"title":" 渲染本地数据","code":"/**\n*\n* @title 渲染本地数据\n* @description \n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo21 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" "},{"example":,"title":" 多列表头","code":"/**\r\n *\r\n * @title 多列表头\r\n * @description columns[n] 可以内嵌 children,以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight,注:修改th的padding top和bottom置为0,否则会有影响\r\n *\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" columns[n] 可以内嵌 children,以渲染分组表头。","scss_code":".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}"},{"example":,"title":" 合并列后合计","code":"/**\n *\n * @title 合并列后合计\n * @description 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\n \nlet ComplexTable = sum(Table);\n\nconst columns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"Other\",\n children: [\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: 200,\n sumCol: true,\n },\n {\n title: \"Address\",\n children: [\n {\n title: \"Street\",\n dataIndex: \"street\",\n key: \"street\",\n width: 200\n },\n {\n title: \"Block\",\n children: [\n {\n title: \"Building\",\n dataIndex: \"building\",\n key: \"building\",\n width: 100\n },\n {\n title: \"Door No.\",\n dataIndex: \"number\",\n key: \"number\",\n // width: 100,\n sumCol: true,\n }\n ]\n }\n ]\n }\n ]\n },\n // {\n // title: \"Company\",\n // children: [\n // {\n // title: \"Company Address\",\n // dataIndex: \"companyAddress\",\n // key: \"companyAddress\",\n // width: 100,\n // },\n // {\n // title: \"Company Name\",\n // dataIndex: \"companyName\",\n // key: \"companyName\",\n // width: 100,\n // }\n // ]\n // },\n {\n title: \"Gender\",\n dataIndex: \"gender\",\n key: \"gender\",\n width: 80,\n fixed: \"right\"\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n name: \"John Brown\"+i,\n age: i + Math.floor(Math.random()*10),\n street: \"Lake Park\",\n building: \"C\",\n number: 20 * Math.floor(Math.random()*10),\n companyAddress: \"Lake Street 42\",\n companyName: \"SoftLake Co\",\n gender: \"M\"\n });\n }\n return data;\n}\n\nclass Demo35 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData()\n };\n }\n\n changeData = ()=>{\n this.setState({\n data: getData()\n });\n }\n\n render() {\n const {data} = this.state;\n return (\n \n \n\n \n
\n );\n }\n}\n\n","desc":" 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)"},{"example":,"title":" 编辑态表格","code":"/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)\n*\n*/\n\nimport React from \"react\";\nimport {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from \"tinper-bee\";\nimport { Table, Datepicker } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderDate from \"tinper-bee/lib/DateRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, FormControl, Icon);\nconst DateRender = renderDate(Datepicker, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\nconst dataSource = [\n {\n key: \"boyuzhou\",\n value: \"jack\"\n },\n {\n key: \"renhualiu\",\n value: \"lucy\"\n },\n {\n key: \"yuzhao\",\n value: \"yiminghe\"\n }\n];\nclass Demo41 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n />\n )\n },\n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n reg={/^[0-9]+$/}\n />\n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n check = (flag, obj) => {\n console.log(flag);\n console.log(obj);\n };\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = (index, key) => {\n return value => {\n console.log(`selected ${value}`);\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n getData = () => {\n console.log(this.state.dataSource);\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n
\n
\n
\n );\n }\n}\n\n\n","desc":" 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)"},{"example":,"title":" 左侧固定列","code":"/**\n*\n* @title 左侧固定列\n* @description 固定列到表格的左侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"address\", dataIndex: \"address\", key: \"address\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo51 extends Component {\n render() {\n return ;\n }\n}\n\n","desc":" 固定列到表格的左侧"},{"example":,"title":" 右侧固定列","code":"/**\n*\n* @title 右侧固定列\n* @description 固定列到表格的右侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\n\nconst columns5 = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 100\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 100,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 100\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 100\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:100,\n fixed: \"right\",\n render(text, record, index) {\n return (\n \n )\n }\n }\n];\n\nconst data5 = [\n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n d:\"操作\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"2操作\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"3操作\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"4操作\",\n key: \"4\"\n },\n];\n\nclass Demo52 extends Component {\n render() {\n return ;\n }\n}\n\n","desc":" 固定列到表格的右侧"},{"example":,"title":" 动态设置列锁定、解除锁定","code":"/**\n*\n* @title 动态设置列锁定、解除锁定\n* @description 动态设置固、取消固定列\n* @description 动态固定列设置 一个table动态设置一个方向【fixed: \"left\",fixed: \"right\"】。\n*\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\n// const columns24 = [\n// {\n// title: \"Full Name\",\n// width: 100,\n// dataIndex: \"name\",\n// key: \"name\",\n// fixed: \"left\",\n// },\n// { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n// { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n// { title: \"Column 2\", dataIndex: \"address2\", key: \"2\" },\n// { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n// { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n// { title: \"Column 24\", dataIndex: \"address\", key: \"24\" },\n// { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n// { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n// { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n// ];\n\n\nconst columns24 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100, \n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 150 \n },\n {\n title: \"对手\",\n dataIndex: \"e\",\n key: \"e\",\n width: 100 \n },\n {\n title: \"帮派\",\n dataIndex: \"f\",\n key: \"f\",\n width: 100 \n },\n {\n title: \"武功类型\",\n dataIndex: \"g\",\n key: \"g\",\n width: 150 \n },\n {\n title: \"师傅\",\n dataIndex: \"k\",\n key: \"k\",\n // width: 100 \n },\n {\n title: \"攻击系数\",\n dataIndex: \"h\",\n key: \"h\",\n width: 100 \n }\n];\n\n\nconst data24 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: \"1\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: \"3\" }\n]; \n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns24\n }\n }\n\n \n onSelect = ({key,item})=>{ \n console.log(`${key} selected`); //获取key\n let currentObject = item.props.data; //获取选中对象的数据\n let {columns} = this.state;\n let fixedCols = [];\n let nonColums = [];\n columns.find(da=>{\n if(da.key == key){\n da.fixed?delete da.fixed:da.fixed = 'left';\n }\n da.fixed?fixedCols.push(da):nonColums.push(da);\n });\n \n columns = [...fixedCols,...nonColums]\n\n this.setState({\n columns\n });\n }\n //表头增加下拉菜单\n renderColumnsDropdown(columns) {\n const icon ='uf-arrow-down';\n \n return columns.map((originColumn,index) => {\n let column = Object.assign({}, originColumn);\n let menuInfo = [], title='锁定';\n if(originColumn.fixed){\n title = '解锁'\n }\n menuInfo.push({\n info:title,\n key:originColumn.key,\n index:index\n });\n const menu = (\n )\n column.title = (\n \n {column.title}\n \n \n \n \n \n );\n return column;\n });\n \n }\n\n render() {\n let {columns} = this.state;\n columns = this.renderColumnsDropdown(columns);\n return ;\n }\n}\n\n","desc":" 动态设置固、取消固定列","scss_code":"th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n"},{"example":,"title":" 按条件、值过滤","code":"/**\n*\n* @title 按条件、值过滤\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns26 = [\n { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\n { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\n { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\n];\n\nconst data26 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo26 extends Component {\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n render() {\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns26}\n data={data26} />;\n }\n}\n\n","desc":" 可以根据输入项目以及判断条件对表格内的数据进行过滤"},{"example":,"title":" 复杂表格中行过滤","code":"/**\n*\n* @title 复杂表格中行过滤\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n*\n*/\n\n/**\n * @description \n */\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\nconst data27 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\nclass Demo27 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n dropdownvalue: []\n }\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onClick = (item) => {\n console.log(item);\n }\n\n render() {\n const menu1 = (\n )\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\n {\n title: \"\", width: 40, dataIndex: \"key\", key: \"key\", render: (text, record, index) => {\n return \n \n \n }\n },\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"年龄\",\n width: 180,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"日期\",\n width: 190,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"时间范围\",\n width: 290,\n dataIndex: \"mark\",\n key: \"mark\",\n filterType: \"daterange\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"地址\",\n width: 100,\n dataIndex: \"address\",\n key: \"address\",\n filterType: \"dropdown\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n }\n ];\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认500ms\n filterable={true}//是否开启过滤数据功能\n getSelectedDataFunc={this.getSelectedDataFunc}\n bordered\n multiSelect={multiObj}\n columns={columns27}\n data={data27} />;\n }\n}\n\n","desc":" 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等"},{"example":,"title":" 列过滤面板","code":"/**\n*\n* @title 列过滤面板\n* @description 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Popover,Popconfirm} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data21 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e: \"操作\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠',e: \"操作\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e: \"操作\", key: \"3\" }\n];\n\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\n\nconst defaultProps21 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo21 extends Component {\n constructor(props) {\n super(props);\n this.state ={\n columns21: [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\"\n // width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n // width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n ifshow:false,\n // width: 200,\n // sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"操作\",\n dataIndex: \"e\",\n key: \"e\",\n render(text, record, index){\n return (\n \n );\n }\n }\n ]};\n }\n afterFilter = (optData,columns)=>{\n if(optData.key == 'b'){\n if(optData.ifshow){\n columns[2].ifshow = false;\n }else{\n columns[2].ifshow = true;\n }\n this.setState({\n columns21 :columns,\n showFilterPopover:true\n });\n }\n \n }\n \n render() {\n \n return ;\n }\n}\nDemo21.defaultProps = defaultProps21;\n\n\n","desc":" 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数"},{"example":,"title":" 列排序","code":"/**\n* @title 列排序\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\n\nlet ComplexTable = sort(Table, Icon);\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n render() {\n\n return ;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n","desc":" column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称"},{"example":,"title":" 后端列排序","code":"/**\n* @title 后端列排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\nlet ComplexTable = sort(Table, Icon);\n\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"分数\",\n dataIndex: \"e\",\n key: \"e\",\n sorter: (a, b) => a.c - b.c\n },\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\n];\n\nconst defaultProps = {\n prefixCls: \"bee-table\"\n};\nclass Demo28 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n /**\n * 后端获取数据\n */\n sortFun = (sortParam)=>{\n console.info(sortParam);\n //将参数传递给后端排序\n }\n render() {\n let sortObj = {\n mode:'multiple',\n backSource:true,\n sortFun:this.sortFun\n }\n return ;\n }\n}\nDemo28.defaultProps = defaultProps;\n\n\n","desc":""},{"example":,"title":" 多列排序","code":"/**\n *\n * @title 多列排序\n * @description 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox,Button,Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\nimport sort from \"tinper-bee/lib/sort.js\";;\nimport sum from \"tinper-bee/lib/sum.js\";;\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n className:'dfasd',\n width: 200\n },\n {\n title: \"功力指数\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"成绩\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: 675, c: 30, d: \"内行\",e:100, key: \"2\" },\n { a: \"令狐冲\", b: 43, c: 41, d: \"大侠\",e:90, key: \"1\" },\n { a: \"令狐冲1\", b: 43, c: 81, d: \"大侠\", e:120,key: \"4\" },\n { a: \"令狐冲2\", b: 43, c: 81, d: \"大侠\", e:130,key: \"5\" },\n { a: \"郭靖\", b: 153, c: 25, d: \"大侠\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);\n\nclass Demo13 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data13: data13,\n selectedRow: this.selectedRow,\n selectDisabled: this.selectDisabled\n };\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n selectDisabled = (record, index) => {\n // console.log(record);\n if (index === 1) {\n return true;\n }\n return false;\n };\n selectedRow = (record, index) => {\n // console.log(record);\n if (index === 0) {\n return true;\n }\n return false;\n };\n onClick = () => {\n this.setState({\n selectedRow: function() {}\n });\n };\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let sortObj = {\n mode:'multiple'\n }\n \n return (\n \n \n \n
\n );\n }\n}\n","desc":" 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)"},{"example":,"title":" 拖拽改变列顺序","code":"/**\n*\n* @title 拖拽改变列顺序\n* @description 点击列的表头,进行左右拖拽,注意:固定列不可以交换\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns22 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200,\n }\n];\n\nconst data22 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return ;\n }\n}\nDemo22.defaultProps = defaultProps22;\n\n\n","desc":" 点击列的表头,进行左右拖拽,注意:固定列不可以交换"},{"example":,"title":" 拖拽改变列宽度","code":"/**\n*\n* @title 拖拽改变列宽度\n* @description 注:不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n }, \n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return {\n console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n","desc":" 注:不支持tree结构的表头、合并表头的table"},{"example":,"title":" 嵌套子表格","code":"/**\n*\n* @title 嵌套子表格\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Popconfirm } from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\nconst DragColumnTable = dragColumn(Table);\nconst columns16 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst columns17 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\n\nclass Demo16 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{}\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 42 * (this.state.data_obj[record.key].length+ 2);\n \n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格"},{"example":,"title":" 层级树型展示","code":"/**\n*\n* @title 层级树型展示\n* @description 通过在data中配置children数据,来自动生成树形表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n\n constructor(props){\n super(props);\n this.state = {\n data: data4,\n factoryValue: 0,\n selectedRow: new Array(data4.length)//状态同步\n }\n }\n\n render() {\n return {\n if (this.state.selectedRow[index]) {\n return 'selected';\n } else {\n return '';\n }\n }}\n onRowClick={(record,index,indent)=>{\n let selectedRow = new Array(this.state.data.length);\n selectedRow[index] = true;\n this.setState({\n factoryValue: record,\n selectedRow: selectedRow\n });\n }}\n \n columns={columns4} data={data4} />;\n }\n}\n\n\n","desc":" 通过在data中配置children数据,来自动生成树形表格"},{"example":,"title":" 选中行颜色、自定义表格标题和表尾","code":"/**\r\n*\r\n* @title 选中行颜色、自定义表格标题和表尾\r\n* @description\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip,} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width:80 , className:\"rowClassName\"},\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n];\r\n\r\nconst data = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"黄蓉\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nclass Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n {\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\r\n title={currentData => 标题: 这是一个标题
}\r\n footer={currentData => 表尾: 我是小尾巴
}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":""},{"example":,"title":" 自定义行高","code":"/**\n*\n* @title 自定义行高\n* @description 设置`height`属性自定义表格行高,设置`headerHeight`属性自定义表头高度。\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n \n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n","desc":" 设置`height`属性自定义表格行高,设置`headerHeight`属性自定义表头高度。"},{"example":,"title":" 自定义行、列合并","code":"/**\n*\n* @title 自定义行、列合并\n* @description 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst renderContent = (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n};\n\nconst columns = [{\n title: 'Name',\n key: \"name\",\n dataIndex: 'name',\n render: (text, row, index) => {\n if (index < 4) {\n return {text};\n }\n return {\n children: {text},\n props: {\n colSpan: 5,\n },\n };\n },\n}, {\n title: 'Age',\n key: \"Age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: 'Home phone',\n colSpan: 2,\n key: \"tel\",\n dataIndex: 'tel',\n render: (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 2) {\n obj.props.rowSpan = 2;\n }\n if (index === 3) {\n obj.props.rowSpan = 0;\n }\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n },\n}, {\n title: 'Phone',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: 'Address',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\nconst data = [{\n key: '1',\n name: 'John Brown',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: 'New York No. 1 Lake Park',\n}, {\n key: '2',\n name: 'Jim Green',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: 'London No. 1 Lake Park',\n}, {\n key: '3',\n name: 'Joe Black',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Sidney No. 1 Lake Park',\n}, {\n key: '4',\n name: 'Jim Red',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'London No. 2 Lake Park',\n}, {\n key: '5',\n name: 'Jake White',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Dublin No. 2 Lake Park',\n}];\n\nclass Demo15 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n\n","desc":" 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。"},{"example":,"title":" 多选表格","code":"/**\r\n*\r\n* @title 多选表格\r\n* @description 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport {Checkbox} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n\r\nconst columns12 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst data12 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\",_checked:true },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" ,_checked:false},\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" ,_checked:false},\r\n { a: \"郭靖1\", b: \"男\", c: 25,d:'大侠', key: \"4\" ,_disabled:true},\r\n { a: \"郭靖2\", b: \"男\", c: 25,d:'大侠', key: \"5\" ,_checked:false}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data12\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 如果在回调中增加setState逻辑,需要同步data中的_checked属性。即下面的代码\r\n // const allChecked = selectedList.length == 0?false:true;\r\n // record为undefind则为全选或者全不选\r\n // if(!record){\r\n // data12.forEach(item=>{\r\n // item._checked = allChecked;\r\n // })\r\n // }else{\r\n // data12[index]['_checked'] = record._checked;\r\n // } \r\n\r\n \r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n {\r\n if (record._checked) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。"},{"example":,"title":" 无限滚动 Infinite Scroll","code":"/**\n*\n* @title 无限滚动 Infinite Scroll\n* @description 万行数据渲染\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'60',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo30 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n","desc":" 万行数据渲染","scss_code":".big-data tr td {\n // height: 48px;\n}"},{"example":,"title":" 嵌套子表格滚动加载","code":"/**\n*\n* @title 嵌套子表格滚动加载\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst outColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst innerColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [ ...new Array(10000) ].map((e, i) => {\n return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n })\n\n\n\n\n\nclass Demo31 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{\n 0:[\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ],\n 1: [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ],\n }\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 200;\n let innderData = [ ...new Array(100) ].map((e, i) => {\n return { a: index+\"-\"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+\"-\"+ i };\n })\n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n","desc":" 通过expandedRowRender参数来实现子表格"},{"example":,"title":" 多功能表格滚动加载","code":"/**\n*\n* @title 多功能表格滚动加载\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip,Checkbox,Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\n\nlet ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);\n\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'80',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo32 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n\n render() {\n return (\n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n getSelectedDataFunc={this.getSelectedDataFunc}/>\n\n );\n }\n}\n\n\n","desc":""},{"example":,"title":"Demo134","code":"import React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'150',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(1000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }else{\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }\n return rs;\n })\n\n\nclass Demo34 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n onExpandedRowsChange = (params)=>{\n console.log(params);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n","desc":""},{"example":,"title":" 表格+分页","code":"/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns8 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst pageData = {\n 1: [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n ],\n 2: [\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\n { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\n","desc":" 点击分页联动表格","scss_code":".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}"},{"example":,"title":" 表格+搜索","code":"/**\n *\n * @title 表格+搜索\n * @description 搜索刷新表格数据\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Icon,FormControl,InputGroup} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let { onSearch } = this.props;\n this.setState({\n empty: true\n });\n onSearch && onSearch(this.state.searchValue);\n };\n\n /**\n * 捕获回车\n * @param e\n */\n handleKeyDown = e => {\n if (e.keyCode === 13) {\n this.handleSearch();\n }\n };\n\n /**\n * 输入框改变\n * @param e\n */\n handleChange = (e) => {\n this.setState({\n searchValue: e\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let { onEmpty } = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty ? (\n \n ) : null}\n\n \n \n \n \n );\n }\n}\n\nconst columns9 = [\n {\n title: \"姓名\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst userData = [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: userData\n };\n }\n\n handleSearch = value => {\n if (value === \"\") {\n return this.setState({\n data: userData\n });\n }\n let regExp = new RegExp(value, \"ig\");\n let data = userData.filter(item => regExp.test(item.a));\n this.setState({\n data\n });\n };\n\n handleEmpty = () => {\n this.setState({\n data: userData\n });\n };\n\n render() {\n return (\n \n );\n }\n}\n\n\n","desc":" 搜索刷新表格数据"}]
class Demo extends Component {
diff --git a/dist/demo.css b/dist/demo.css
index 7602fee..072e95c 100644
--- a/dist/demo.css
+++ b/dist/demo.css
@@ -4,7 +4,7 @@
font-size: 12px;
color: #212121;
position: relative;
- line-height: 1.5;
+ line-height: 1.33;
overflow: hidden; }
.u-table-body {
position: relative; }
@@ -47,13 +47,15 @@
background: rgb(235, 236, 240); }
.u-table th,
.u-table td {
- padding: 12px 8px;
+ padding: 12px 16px;
word-break: break-all; }
.u-table tr.filterable th {
padding-top: 5px !important;
padding-bottom: 5px !important; }
.u-table tr.filterable th .filterContext {
height: 35px; }
+ .u-table tr.filterable th .u-select-selection--single {
+ height: 26px; }
.u-table-row-hover {
background: rgb(235, 236, 240); }
.u-table-scroll {
@@ -80,7 +82,7 @@
background: rgb(241, 242, 245);
color: rgb(33, 33, 33); }
.u-table.fixed-height td {
- padding: 0px 8px; }
+ padding: 0px 16px; }
.u-table-fixed-header .u-table-body {
background: #fff;
position: relative; }
@@ -98,17 +100,17 @@
overflow-y: scroll;
box-sizing: border-box; }
.u-table-title {
- padding: 12px 8px;
+ padding: 12px 16px;
border-top: 1px solid rgb(193, 199, 208); }
.u-table-content {
position: relative; }
.u-table-footer {
- padding: 12px 8px;
+ padding: 12px 16px;
border-bottom: 1px solid rgb(193, 199, 208); }
.u-table-footer .u-table-scroll {
overflow-x: hidden; }
.u-table-footer .u-table {
- margin: -12px -8px; }
+ margin: -12px -16px; }
.u-table-placeholder {
padding: 12px 8px;
background: #fff;
@@ -224,13 +226,18 @@
.u-table-thead th .bee-table-column-sorter {
position: relative;
margin-left: 4px;
- height: 1em;
+ height: 16px;
vertical-align: middle;
text-align: center;
- display: inline-block; }
+ display: inline-block;
+ margin-top: -3px; }
+ .u-table-thead th .bee-table-column-sorter i {
+ padding: 0px;
+ font-weight: 600;
+ color: #505F79; }
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
- line-height: 6px;
+ line-height: 16px;
display: block;
width: 34px;
cursor: pointer; }
@@ -298,17 +305,18 @@
position: relative; }
.u-table-filter-column-filter-icon {
position: absolute;
- top: 8px;
- right: 18px;
- width: 22px;
- height: 25px;
- line-height: 25px;
+ width: 30px;
+ height: 38px;
+ line-height: 38px;
+ right: 12px;
+ top: 1px;
z-index: 2;
background: rgb(241, 242, 245);
text-align: center;
cursor: pointer; }
.u-table-filter-column-filter-icon i.uf {
- padding: 0px; }
+ padding: 0px;
+ color: #505F79; }
.u-table-filter-column-pop-cont-item {
margin-top: 8px;
cursor: pointer; }
@@ -331,9 +339,14 @@
display: none;
pointer-events: none; }
.u-table .u-checkbox {
- height: 16px;
- line-height: 16px;
+ height: 14px;
+ line-height: 14px;
margin: 0px; }
+ .u-table .u-checkbox .u-checkbox-label {
+ line-height: 14px; }
+ .u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
+ width: 14px;
+ height: 14px; }
.u-table:focus {
outline: none;
@@ -523,16 +536,16 @@
.u-filter-dropdown-menu-wrap {
z-index: 1800; }
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
- line-height: 28px;
- height: 28px;
+ line-height: 26px;
+ height: 26px;
padding: 0px 16px 0 16px;
cursor: pointer; }
.filter-wrap .u-form-control {
- height: 28px; }
+ height: 26px; }
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
- height: 28px; }
+ height: 26px; }
.u-row-hover {
position: absolute;
diff --git a/dist/demo.css.map b/dist/demo.css.map
index a4cb3af..ebb1a91 100644
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../node_modules/tinper-bee-core/scss/minxin-variables.scss","../src/Table.scss","TableDemo.scss","demolist/Demo02.scss","demolist/Demo04.scss","demolist/Demo161.scss","demolist/Demo32.scss","demolist/Demo53.scss"],"names":[],"mappings":"AAsXA,eAAe;AAWf,iBAAiB;AC3WjB;EACE,gBAlBmB;EAmBnB,eDmBuB;ECjBvB,mBAAkB;EAClB,iBArBe;EAsBf,iBAAgB,EAwhBjB;EAvhBC;IAEE,mBAAkB,EACnB;EACD;IACE,mBAAkB,EAOnB;IANC;MACE,mBAAkB;MAClB,SAAQ;MACR,UAAS,EAEV;EAlBL;IAqBI,YAAW;IACX,0BAAyB;IACzB,iBAAgB,EACjB;EAxBH;IA4BI,kBA7ByB;IA8BzB,iBAAgB,EAQjB;IArCH;MAgCM,mBAAkB,EACnB;IAjCL;MAmCM,iBAAgB,EACjB;EApCL;IAwCI,4CAtD4D,EAgE7D;IAlDH;MA0CM,eAAc,EAOf;MAjDL;QA4CQ,eAAc,EACf;MA7CP;QA+CQ,eAAc,EACf;EAhDP;IAqDM,iCAzDyB,EA0D1B;EAtDL;IA+DU,+BAA8B,EAC/B;EAhET;IAoEM,eAAc,EAOf;IA3EL;MAsEQ,eAAc,EACf;IAvEP;MAyEQ,eAAc,EACf;EA1EP;IA8EI,+BDgH8D,EC/G/D;EA/EH;;IAmFI,kBA7FoB;IA8FpB,sBAAqB,EACtB;EArFH;IA0FQ,4BAA2B;IAC3B,+BAA8B,EAI/B;IA/FP;MA6FU,aAAY,EACb;EAIP;IACE,+BAAuD,EACxD;EAED;IACE,eAAc,EACf;EACA;IAEG,qCAzH0D;IA0H1D,uBAAsB;IACtB,oBAAmB,EAEpB;EANF;IASK,iBAAgB,EACnB;EAVF;IAaK,gBAAgB,EACjB;EAdJ;IAkBG,4CAzI0D;IA0I1D,uBAAsB,EACvB;EApBF;;IAuBG,2CA9I0D;IA+I1D,uBAAsB,EACvB;EAEF;IAGK,iBAAgB,EACjB;EAGL;IACE,iBAAgB;IAChB,+BDozC2E;ICnzC3E,uBDozC+D,ECnzChE;EA/IH;IAkJI,iBAAgB,EACjB;EAED;IACE,iBAAgB;IAChB,mBAAkB,EACnB;EACD;IACE,oBAAmB;IACnB,oBAAmB,EACpB;EAEA;IACC,mBAAkB,EACnB;EAED;IACE,aAAY,EAEb;EAGD;IACE,mBAAkB;IAClB,qBAAoB;IACpB,qBAAoB;IACpB,mBAAkB;IAClB,uBAAsB,EACvB;EAED;IACE,kBA3LoB;IA4LpB,yCAhM4D,EAiM7D;EAED;IACE,mBAAkB,EACnB;EAED;IACE,kBApMoB;IAqMpB,4CAzM4D,EA6M7D;IANA;MAIG,mBAAkB,EACnB;EAEH;IACE,mBA3MoB,EA4MrB;EAED;IACE,kBAA8B;IAC9B,iBAAgB;IAChB,4CArN4D;IAsN5D,mBAAkB;IAClB,mBAAkB,EACnB;EAED;IACE,YAAW,EACZ;EACA;IAIK,iBAAgB,EACjB;EALJ;IAOK,+BAAuD,EACxD;EAEH;IACE,gBAAe;IACf,sBAAqB;IACrB,kBAAiB;IACjB,YAAW;IACX,aAAY;IACZ,mBAAkB;IAClB,kBAAiB;IACjB,qCA/O0D;IAgP1D,0BAAiB;IAAjB,uBAAiB;IAAjB,sBAAiB;IAAjB,kBAAiB;IACjB,iBAAgB;IAChB,mBAAkB,EACnB;EACD;IACE,mBAAkB,EACnB;EACD;IACE,aAAY,EACb;EAED;IACE,aAAY,EACb;EAED;IACE,aAAY,EACb;EAEF;IAEG,oBAAmB,EACpB;EAxPL;IA2PI,oBAAmB,EAQpB;IAnQH;MA6PM,oBAAmB,EACpB;IA9PL;MAiQM,WAAU,EACX;EAEH;IACE,cAAa,EACd;EACD;IAEE,gBAAe;IACf,YAAW;IACX,WAAU,EAWX;IAfA;MAMG,eAAc,EACf;IACD;MACE,oBAAmB;MACnB,YAAW,EAIZ;MANA;QAIG,YAAW,EACZ;EAGL;IACE,kBAAiB,EAIlB;IALA;MAGG,aAAY,EACb;EAEH;IACE,aAAY,EAIb;IALA;MAGG,aAAY,EACb;EAGH;IAEE,mBAAkB;IAClB,OAAM;IACN,iBAAgB;IAChB,WAAU,EAKX;IAVA;MAOG,YAAW;MACX,iBAAgB,EACjB;EAGH;IACE,QAAO;IACP,+CAA8C,EAQ/C;IAPC;MACE,oBAAmB;MACnB,oBAAmB,EACpB;IACD;MACE,iBAAgB,EACjB;EAGH;IACE,SAAQ;IACR,gDAA+C,EAShD;IALC;MACE,mBAAkB;MAClB,qBAAoB,EACrB;EAIH;IACE,iBAAgB,EACjB;EAED;IACE,iBAAgB,EACjB;EAEA;IAEG,oBAAmB,EACpB;EAHF;IAKG,qBAAa;IAAb,cAAa;IACb,sBAAuB;IAAvB,wBAAuB;IACvB,uBAAmB;IAAnB,oBAAmB,EAIpB;IAXF;MASK,gBAAe,EAChB;EAVJ;IAaG,+BDmmCyE;IClmCzE,uBDmmC6D;IClmC7D,6BAA2B;IAE3B,4BAA2B;IAE3B,0BAAyB;IACzB;;QAEE;IACA,sBAAqB;IACrB,kBAAiB,EAyDpB;IAjFF;MA8BK,mBAAkB;MAClB,iBAAgB;MAChB,YAAW;MACX,uBAAsB;MACtB,mBAAkB;MAClB,sBAAqB,EAUtB;MA7CJ;;QAuCO,iBAAgB;QAChB,eAAc;QACd,YAAW;QACX,gBAAe,EAChB;IA3CN;;;;MAmDK,eAAc,EACf;IApDJ;;MAwDK,aAAY;MACZ,gBAAe,EAChB;IA1DJ;;MA6DK,sBAAqB;MACrB,WAAU;MACV,gBAAe;MACf,iBAAgB;MAGhB,uCAAyC;MACzC,+GAA8G;MAC9G,QAAO;MACP,iBAAgB;MAChB,YAAW;MACX,YAAW,EAGZ;IA3EJ;MA8ES,sBAAqB,EACxB;EA/EN;IAmFG,aAAY,EACb;EApFF;IAsFG,+BDzO4D,EC0O7D;EAvFF;IA6FG,iBAAgB,EACjB;EACD;IACE,mBAAkB,EAgCnB;IA9BC;MACE,aAAY;MACZ,mBAAkB;MAClB,aAAY;MACZ,OAAM;MAIN,YAAW;MAEX,uBAAsB;MACtB,WAAU,EAYX;MAvBA;QAcG,aAAY;QACZ,WAAU;QACV,wBAAsB;QACtB,eAAc,EACf;MAlBF;QAoBG,oBAAkB,EACnB;IAGH;MACE,mBAAkB,EAInB;MALA;QAGG,oBACF,EAAC;EAGJ;IAEG,aAAY,EACb;EAOH;IACE,YAAW;IACX,kBAAiB;IACjB,mBAAkB;IAClB,eAAa,EACd;EACD;IAEE,gBAAe;IACf,mBAAkB,EACnB;EACD;IACE,mBAAkB,EACnB;EACD;IACE,mBAAkB;IAClB,SAAQ;IACR,YAAW;IACX,YAAW;IACX,aAAY;IACZ,kBAAiB;IACjB,WAAU;IACV,+BD+8ByE;IC98BzE,mBAAkB;IAClB,gBAAe,EAIhB;IAdA;MAYG,aAAY,EACb;EAEH;IACE,gBAAe;IAEf,gBAAe,EAKhB;IARA;MAKG,YAAW,EAEZ;EAEH;IACE,kBAAiB;IACjB,iBAAgB;IAChB,uBAAsB;IACtB,gBAAe;IACf,iBAAgB;IAChB,wBAAuB;IACvB,oBAAmB;IACnB,sBAAqB;IACrB,uBAAsB,EACvB;EACD;IACE,uBAAsB;IACtB,iBAAgB,EACjB;EAGH;IAEE,cAAY;IACZ,qBAAoB,EACrB;EAvhBH;IA0hBI,aA/hBiB;IAgiBjB,kBAhiBiB;IAiiBjB,YAAU,EACX;;AAEH;EACE,cAAa;EAGb,kBAAiB,EAClB;;AAEC;EAEI,oBAAkB,EACnB;;AAEL;EAEI,0BAAyB,EAC1B;;AAHH;;EAMI,qCA/jB4D,EAgkB7D;;AAGH;;EAEE,WAAU;EACV,+DAA8D;EAC9D,yBAAwB;EACxB,0BAAyB;EACzB,6BAA4B,EAC7B;;AAED;EACE,kEAAiE;EACjE,yBAAwB;EACxB,0BAAyB;EACzB,6BAA4B,EAC7B;;AAED;;EAEE,2BAA0B;EAC1B,8BAA6B,EAC9B;;AAED;EACE,6BAA4B;EAC5B,8BAA6B,EAC9B;;AAED;EACE;IACE,sBAAqB;IACrB,4BAA2B;IAC3B,WAAU;IACV,6BD7iB+C,EAAA;EC+iBjD;IACE,sBAAqB;IACrB,yBAAwB;IACxB,WAAU,EAAA;EAEZ;IACE,6BDrjB+C,EAAA;ECujBjD;IACE,wBAAuB;IACvB,WAAU,EAAA,EAAA;;AAId;EACE;IACE,sBAAqB;IACrB,yBAAwB;IACxB,WAAU,EAAA;EAEZ;IACE,sBAAqB;IACrB,6BAA4B;IAC5B,WAAU,EAAA,EAAA;;AAId;EACE,cAAa;EACb,kBAAiB;EACjB,WAAU,EACX;;AACD;EACE,cAAa;EACb,aAAY;EACZ,sBAAsB;EACtB,yBAAyB;EACzB,wBAAuB;EACvB,eAAc;EACd,yBAAyB;EACzB,0BAA0B;EAC1B,UAAS;EACT,mBAAkB;EAClB,WAAU;EACV,SAAQ;EACR,SAAQ,EACT;;AAED;EACE,mBAAkB,EACnB;;AAED;;EAEE,oBAAmB,EACpB;;AACD;EAEI,cAAa,EACd;;AAHH;EAKI,aAAY;EACZ,gBAAe,EAChB;;AAGH;EACE,0BAAyB;EACzB,aAAY,EACb;;AAED;;EAEE,mBAAkB;EAClB,OAAM;EACN,SAAQ;EACR,YAAW;EACX,gBAAe,EAChB;;AAED;EACE,kBAAiB;EACjB,cAAa,EACd;;AAED;EACE,kBAAiB,EAClB;;AAED;EACE,sBAAqB,EACtB;;AAED;;EAEE,eAAc,EACf;;AAED;EACE,mBAAkB,EACnB;;AAED;EACE,oBAAmB,EAuBpB;EAxBD;IAGI,mBAAkB;IAClB,YAAW;IACX,YAAW;IACX,SAAQ;IACR,eAAc;IACd,gBAAe,EAChB;EATH;IAWI,aAAY,EACb;EAZH;IAcI,aAAY;IACZ,oBAAmB;IACnB,sBAAqB;IACrB,oBAAmB,EACpB;EAlBH;IAoBI,SAAQ;IACR,YAAW;IACX,mBAAkB,EACnB;;AAIH;EACE,YAAW;EACX,mBAAkB,EAyDnB;EA3DD;IAKI,oBAAmB,EACpB;EANH;IASI,oBAAmB,EACpB;EAVH;IAaI,cAAa,EACd;EAdH;IAiBI,kBAAiB;IACjB,mBAAkB;IAClB,WAAU;IACV,YAAW;IACX,mBAAkB,EAqCnB;IA1DH;MAwBM,eAAc;MACd,UAAS;MACT,mBAAkB;MAClB,mBAAkB,EAQnB;MAnCL;QA8BQ,WACF,EAAC;MA/BP;QAiCQ,UACF,EAAC;IAlCP;MAuCQ,oBAAmB,EACpB;IAxCP;MA0CQ,kBAAiB,EAClB;IA3CP;MA+CM,gBAAe;MACf,cAAa,EACd;IAjDL;MAoDM,mBAAkB;MAClB,WAAU;MACV,aAAY;MACZ,SAAQ;MACR,UAAS,EACV;;AAIL;EACI,cAAa,EAShB;EAVD;IAIY,kBA3xBoB;IA4xBpB,aA5xBoB;IA6xBpB,yBAAwB;IACxB,gBAAe,EAClB;;AAGT;EAEI,aApyB4B,EAqyB7B;;AAHH;EAKI,aAvyB4B,EAwyB7B;;AAEH;EACE,mBAAkB;EAClB,YAAW;EACX,cAAa;EACb,uBAAmB;EAAnB,oBAAmB;EACnB,sBAAuB;EAAvB,wBAAuB;EACvB,wBAAuB,EACxB;;AAED;EACE,mBAAkB;EAClB,UAAS,EACV;;AAGD;EACE,WAAU;EACV,YAAW,EACZ;;AACD;EACE,cAAa,EACd;;AACD;EACE,+BAA8B;EAC9B,mBAAkB,EACnB;;AACD;EACE,mBAAkB;EAClB,0BAAyB;EACzB,mBAAkB,EACnB;;AAED;EACE,cAAa,EACd;;AAED;EACE,cAAa,EACd;;AC70BD;EACE,oBAAmB,EACpB;;AAED;EACE,aAAY,EAMb;EAPD;IAII,YAAW,EACZ;;AChCH;EAEQ,gBAAe,EAClB;;ACHL;EAEQ,oBAAmB,EACtB;;AAHL;EAKQ,oBAAmB,EACtB;;;ACNL;EAEQ,oBAAmB,EACtB;;AAHL;EAKQ,qBAAa;EAAb,cAAa;EACb,uBAAmB;EAAnB,oBAAmB;EACnB,sBAAuB;EAAvB,wBAAuB,EAC1B;;ACRL;EAEQ,iBAAgB;EAChB,oBAAmB,EACtB;;ACJL;EAGY,gBAAe;EACf,mBAAkB;EAClB,kBAAiB,EACpB;;AANT;EAYgB,oBAAmB,EAC1B","file":"demo.css","sourcesContent":["\r\n\r\n// $performance_font: 'Helvetica', 'Arial', sans-serif !default;\r\n\r\n@import \"minxin-colors\";\r\n\r\n\r\n\r\n@function strip-units($number) {\r\n @return $number / ($number * 0 + 1);\r\n}\r\n$unit: 10px !default;\r\n// IMAGES\r\n$image_path: '/images' !default;\r\n\r\n\r\n\r\n//默认颜色\r\n$trim-color-classes: false !default;\r\n\r\n@import \"minxin-themeColors\";\r\n\r\n//对比色\r\n$color-primary-contrast: $color-dark-contrast !default;\r\n$color-accent-contrast: $color-dark-contrast !default;\r\n//字体颜色\r\n$color-text: $palette-grey-900 !default;\r\n\r\n//不明所以 $primary-color: unquote(\"rgba(#{$palette-grey-500}, 0.20)\") !default;\r\n\r\n// -- Fonts 字体大小权重预定义\r\n$preferred-font: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei',sans-serif !default;\r\n$font-size: 1.6 * $unit !default;\r\n$font-size-tiny: 1.2 * $unit !default;\r\n$font-size-small: 1.4 * $unit !default;\r\n$font-size-normal: $font-size !default;\r\n$font-size-big: 1.8 * $unit !default;\r\n$font-weight-thin: 300 !default;\r\n$font-weight-normal: 400 !default;\r\n$font-weight-semi-bold: 500 !default;\r\n$font-weight-bold: 700 !default;\r\n$font-color:unquote(\"rgb(#{$palette-u-gray-800})\") !default;\r\n// 白色背景下的文字颜色\r\n$font-color-base: #212121 !default;\r\n\r\n$font-weight-override: false;\r\n$font-weight-light: 300;\r\n$font-weight-normal: 400;\r\n$font-weight-medium: 500;\r\n$font-weight-bold: 700;\r\n$font-weight-base: $font-weight-normal;\r\n\r\n\r\n\r\n\r\n$gray-base: unquote(\"rgb(#{$palette-grey-900})\") !default;\r\n$gray-darkest: unquote(\"rgb(#{$palette-grey-800})\") !default;\r\n$gray-darker: unquote(\"rgb(#{$palette-grey-700})\") !default;\r\n$gray-dark: unquote(\"rgb(#{$palette-grey-600})\") !default;\r\n$gray: unquote(\"rgb(#{$palette-grey-500})\") !default;\r\n$gray-light: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n$gray-lighter: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n$gray-lightest:unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$inverse: unquote(\"rgb(#{$color-white})\") !default;\r\n// $border-color-base: $gray-lighter;\r\n$border-color-base: unquote(\"rgb(#{$border-color})\") !default;\r\n$line-height-base: 1.57142857;\r\n\r\n// 边框圆角\r\n$border-radius-base: $border-radius;\r\n\r\n// 阴影\r\n\r\n$shadow-key-umbra-opacity: 0.2 !default;\r\n$shadow-key-penumbra-opacity: 0.14 !default;\r\n$shadow-ambient-shadow-opacity: 0.12 !default;\r\n\r\n$shadow-base: 0 1px 5px $gray-lighter;\r\n\r\n\r\n\r\n//-- Indexes\r\n$z-index-highest: 300;\r\n$z-index-higher: 200;\r\n$z-index-high: 100;\r\n$z-index-normal: 1;\r\n$z-index-low: -100;\r\n$z-index-lower: -200;\r\n\r\n$zindex-modal: 1700;\r\n$zindex-modal-background: 1600;\r\n$zIndex-notification: 1560;\r\n$zIndex-message: 1550;\r\n$zIndex-popconfirm: 1540;\r\n$zIndex-popover: 1540;\r\n$zIndex-tooltip: 1530;\r\n$zIndex-alert: 1510;\r\n$zindex-navbar-fixed: 1500;\r\n$zindex-menubar: 1400;\r\n$zindex-overlay: 1300;\r\n$zindex-dropdown: 1200;\r\n$zindex-navbar: 1200;\r\n$zindex-header: 1100;\r\n$zindex-footer: 1000;\r\n$zindex-backtop:2000;\r\n\r\n// 文本字体\r\n\r\n//todo\r\n$text-color-primary: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$text-link-color: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n$target-elements-directly: true !default;\r\n\r\n\r\n$global-selected-color: unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n\r\n\r\n// 控件\r\n$cursor-disabled: not-allowed;\r\n\r\n\r\n$title-color: $gray-darkest;\r\n//todo\r\n$subtitle-color: $gray-darker;\r\n$text-color: $gray-dark;\r\n\r\n$prompt-color: $gray;\r\n//全局不同状态颜色\r\n//todo\r\n$active-color-base: unquote(\"rgb(#{$palette-blue-800})\") !default;\r\n$normal-color-base: unquote(\"rgb(#{$palette-blue-600})\") !default;\r\n$hover-color-base: unquote(\"rgb(#{$palette-blue-400})\") !default;\r\n\r\n$bg-color-base: $gray-lightest;\r\n\r\n//disable颜色\r\n$disabled-color-base: #909090;\r\n$disabled-border-color: $gray-lighter;\r\n$disabled-bg-color: $gray-lightest;\r\n\r\n// 全局链接颜色\r\n$link-color: $normal-color-base;\r\n$link-hover-color: $hover-color-base;\r\n$link-active-color: $active-color-base;\r\n\r\n// 品牌色\r\n$brand-default: $gray-lighter;\r\n$brand-default-hover: $gray-lightest;\r\n$brand-default-active: $gray-light;\r\n// $brand-default: unquote(\"rgb(#{$color-primary})\");\r\n// $brand-default-hover: unquote(\"rgb(#{$color-primary-light})\");\r\n// $brand-default-active: unquote(\"rgb(#{$color-primary-dark})\");\r\n\r\n$brand-primary : unquote(\"rgb(#{$primary-color})\") !default;\r\n$brand-primary-hover: unquote(\"rgb(#{$primary-color-light})\") !default;\r\n$brand-primary-active: unquote(\"rgb(#{$primary-color-dark})\") !default;\r\n\r\n$brand-secondary : unquote(\"rgb(#{$secondary-color})\") !default;\r\n$brand-secondary-hover: unquote(\"rgb(#{$secondary-color-light})\") !default;\r\n$brand-secondary-active: unquote(\"rgb(#{$secondary-color-dark})\") !default;\r\n\r\n$brand-success: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$brand-success-hover: unquote(\"rgb(#{$palette-green-300})\") !default;\r\n$brand-success-active: unquote(\"rgb(#{$palette-green-700})\") !default;\r\n\r\n$brand-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\r\n$brand-info-hover: unquote(\"rgb(#{$palette-cyan-300})\") !default;\r\n$brand-info-active: unquote(\"rgb(#{$palette-cyan-700})\") !default;\r\n\r\n$brand-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\r\n$brand-warning-hover: unquote(\"rgb(#{$palette-orange-300})\") !default;\r\n$brand-warning-active: unquote(\"rgb(#{$palette-orange-700})\") !default;\r\n\r\n\r\n$brand-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\r\n$brand-news-hover: unquote(\"rgb(#{$palette-blue-300})\") !default;\r\n$brand-news-active: unquote(\"rgb(#{$palette-blue-700})\") !default;\r\n\r\n$brand-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$brand-danger-hover: unquote(\"rgb(#{$palette-red-300})\") !default;\r\n$brand-danger-active: unquote(\"rgb(#{$palette-red-700})\") !default;\r\n\r\n$brand-dark: $gray-darker;\r\n$brand-dark-hover: $gray-dark;\r\n$brand-dark-active: $gray-darkest;\r\n\r\n$brand-light : unquote(\"rgb(#{$color-dark-contrast})\") !default;\r\n$brand-light-hover: unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$brand-light-active: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n\r\n$brand-light-primary : unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n$brand-light-success: unquote(\"rgb(#{$palette-green-100})\") !default;\r\n$brand-light-info: unquote(\"rgb(#{$palette-cyan-100})\") !default;\r\n$brand-light-warning: unquote(\"rgb(#{$palette-orange-100})\") !default;\r\n$brand-light-news: unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n$brand-light-danger: unquote(\"rgb(#{$palette-red-100})\") !default;\r\n\r\n//不同背景下对应的文字颜色\r\n\r\n$color-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\r\n$color-success: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$color-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\r\n$color-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\r\n$color-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$color-light: $gray-darker !default;\r\n\r\n//redius\r\n\r\n$default-border-radius: $border-radius;\r\n\r\n// hover时的背景色,包括select、dropdown、table、datepicker、tree、menu等组件\r\n$hover-bg-color-base: unquote(\"rgb(#{$item-hover-bg-color-base})\") !default;\r\n// // selected背景色,包括:select、menu等\r\n$selected-bg-color-base: unquote(\"rgb(#{$item-selected-bg-color-base})\") !default;\r\n\r\n// UButton\r\n\r\n// Button 基础背景色.\r\n// 默认按钮()\r\n$button-default-color: unquote(\"rgb(#{$default-color})\");\r\n$button-default-color-IE8: unquote(\"rgb(#{$default-color})\");\r\n\r\n// 边框按钮(shape:'border')\r\n$button-border-bg-color: unquote(\"rgb(#{$color-dark-contrast})\");\r\n\r\n// Button 不同状态下的背景色 :hover、active、focus状态.\r\n$button-hover-color: unquote(\"rgb(#{$default-color-light})\");\r\n$button-active-color: unquote(\"rgb(#{$default-color-dark})\");\r\n$button-focus-color: unquote(\"rgb(#{$default-color-light})\");\r\n\r\n// Button 配置不同colors属性时的背景色.\r\n$button-primary-color: $brand-primary;\r\n$button-primary-active-color: $brand-primary-active;\r\n$button-primary-hover-color: $brand-primary-hover;\r\n$button-secondary-color: $brand-secondary;\r\n$button-secondary-active-color: $brand-secondary-active;\r\n$button-secondary-hover-color: $brand-secondary-hover;\r\n$button-success-color: $brand-success;\r\n$button-success-active-color: $brand-success-active;\r\n$button-success-hover-color: $brand-success-hover;\r\n$button-info-color: $brand-info;\r\n$button-info-active-color: $brand-info-active;\r\n$button-info-hover-color: $brand-info-hover;\r\n$button-warning-color: $brand-warning;\r\n$button-warning-active-color: $brand-warning-active;\r\n$button-warning-hover-color: $brand-warning-hover;\r\n$button-danger-color: $brand-danger;\r\n$button-danger-active-color: $brand-danger-active;\r\n$button-danger-hover-color: $brand-danger-hover;\r\n$button-dark-color: $brand-dark;\r\n$button-dark-active-color: $brand-dark-active;\r\n$button-dark-hover-color: $brand-dark-hover;\r\n$button-light-color: $brand-light;\r\n$button-light-active-color: $brand-light-active;\r\n$button-light-hover-color: $brand-light-hover;\r\n\r\n// Button 文字颜色.\r\n// 主按钮(colors:'primary')\r\n$button-primary-text-color: unquote(\"rgb(#{$text-color-base})\") !default;\r\n$button-text-color: $button-primary-text-color;\r\n// 次按钮(colors:'secondary')\r\n$button-second-text-color: unquote(\"rgb(#{$button-secondary-text-color})\") !default;\r\n// 默认按钮()\r\n$button-default-text-color: unquote(\"rgb(#{$palette-grey-900})\") !default;\r\n// 边框按钮(shape:'border')\r\n// $button-border-text-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n// Button 边框样式及颜色.\r\n$button-border-style: unquote(\"solid\") !default;\r\n$button-border-color: $border-color-base;\r\n$button-default-border-color: $button-default-color !default;\r\n\r\n// Button 不同状态下的边框颜色 :hover、active、focus状态.\r\n$button-hover-border-color: $brand-default-hover;\r\n$button-active-border-color: $brand-default-active;\r\n$button-focus-border-color: $brand-default-active;\r\n\r\n// FAB colors and sizes.\r\n$button-fab-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\r\n$button-fab-hover-color-alt: unquote(\"rgb(#{$color-accent-light})\") !default;\r\n$button-fab-active-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\r\n$button-fab-text-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n$button-fab-ripple-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n\r\n// Icon button colors and sizes.\r\n$button-icon-color: unquote(\"rgb(#{$palette-grey-700})\") !default;\r\n$button-icon-focus-color: $button-focus-color !default;\r\n\r\n// Button 最小宽度、高度、内边距、外边距、行高、边框粗细、圆角.\r\n$button-min-width: 72/10 * $unit !default;\r\n$button-height: 36/10 * $unit !default;\r\n$button-padding: 4/10* $unit 13/10 * $unit !default;\r\n$button-padding-IE8: 4px 13px !default;\r\n$button-top-padding: 1310 * $unit !default;\r\n$button-left-padding: 6/10* $unit !default;\r\n$button-line-height:1.57142857;\r\n$button-margin: 4/10 * $unit !default;\r\n$button-border-radius: 3/10 * $unit !default;\r\n$button-border-width: 1/10 * $unit !default;\r\n\r\n$button-fab-size: 38/10 * $unit !default;\r\n$button-fab-size-mini: 30/10 * $unit !default;\r\n$button-fab-font-size: 14/10 * $unit !default;\r\n\r\n$button-icon-size: 32/10 * $unit !default;\r\n$button-icon-size-mini: 13/10 * $unit !default;\r\n\r\n$button-raised-font-size: 14/10 * $unit !default;\r\n\r\n// Button 大按钮\r\n$button-padding-y-lg:8px;\r\n$button-padding-x-lg:15px;\r\n$font-size-lg:1.4 * $unit;\r\n\r\n\r\n// Button 特大型按钮\r\n$button-padding-y-xg:10.5px;\r\n$button-padding-x-xg:18px;\r\n$font-size-xg:1.6 * $unit;\r\n\r\n\r\n// Button 小型按钮\r\n$button-padding-y-sm:3px;\r\n$button-padding-x-sm:5px;\r\n$font-size-sm:1.2 * $unit;\r\n\r\n\r\n\r\n// UText\r\n\r\n\r\n$form-control-border-radius: $border-radius-base;\r\n$form-control-default-font-size: 14px;\r\n$form-control-lg-font-size: 14px;\r\n$form-control-sm-font-size: 12px;\r\n$form-control-default-height: 32px;\r\n$form-control-lg-height: 40px;\r\n$form-control-sm-height: 26px;\r\n$form-control-color: #424242;\r\n$form-control-bg-color: #fff;\r\n$form-control-border-color: $border-color-base;\r\n$form-control-disable-bg-color: #F7F9FB;\r\n$form-control-disable-color: $disabled-color-base;\r\n$form-control-disable-border-color: #DFE1E6;\r\n\r\n$input-text-background-color: transparent !default;\r\n$input-text-label-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\r\n$input-text-bottom-border-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\r\n$input-text-bottom-border-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\r\n$input-text-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$input-text-disabled-color: $input-text-bottom-border-color !default;\r\n$input-text-disabled-text-color: $input-text-label-color !default;\r\n$input-text-error-color: unquote(\"rgb(222, 50, 38)\") !default;\r\n$input-text-must-color:unquote(\"rgb(#{$palette-red-A700})\") !default;\r\n\r\n\r\n$input-text-font-size: 14px !default;\r\n$input-text-width: 100% !default;\r\n$input-text-padding: 4px !default;\r\n$input-text-vertical-spacing: 20px !default;\r\n\r\n$input-text-button-size: 32px !default;\r\n$input-text-floating-label-fontsize: 12px !default;\r\n$input-text-expandable-icon-top: 16px !default;\r\n$input-text-height:36px !default;\r\n$input-text-normal-width:360px !default;\r\n$input-text-short-width:180px !default;\r\n$input-text-normal-border-color:unquote(\"rgb(#{$palette-u-gray-400})\") !default;\r\n$input-text-color:unquote(\"rgb(#{$palette-u-gray-A200})\") !default;\r\n$input-text-focus-border-color:unquote(\"rgb(#{$palette-u-blue-400})\") !default;\r\n$input-lable-color:unquote(\"rgb(#{$palette-u-gray-900})\") !default;\r\n\r\n\r\n/* FormGroup */\r\n\r\n$error-input-border:$brand-danger;\r\n$warning-input-border:$brand-warning;\r\n$success-input-border:$brand-success;\r\n$success-addon-bg: $brand-light-success;\r\n$warning-addon-bg: $brand-light-warning;\r\n$error-addon-bg: $brand-light-danger;\r\n$form-group-margin-top: 15px;\r\n$form-group-margin-bottom: 15px;\r\n\r\n/* Navlayout */\r\n\r\n$layout-nav-color: unquote(\"rgb(#{$palette-grey-100})\") !default;\r\n\r\n// Drawer\r\n$layout-drawer-bg-color: unquote(\"rgb(#{$palette-grey-50})\") !default;\r\n$layout-drawer-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n$layout-text-color: unquote(\"rgb(#{$palette-grey-800})\") !default;\r\n$layout-drawer-navigation-color: #757575 !default;\r\n$layout-drawer-navigation-link-active-background: unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$layout-drawer-navigation-link-active-color: $layout-text-color !default;\r\n\r\n// Header\r\n$layout-header-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$layout-header-text-color: unquote(\"rgb(#{$color-primary-contrast})\") !default;\r\n$layout-header-nav-hover-color: unquote(\"rgba(#{$palette-grey-700}, 0.6)\") !default;\r\n$layout-header-tab-text-color: unquote(\"rgba(#{$color-primary-contrast}, 0.6)\") !default;\r\n\r\n// Tabs\r\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n$layout-nav-link-font-size: 13px !default;\r\n\r\n$layout-drawer-narrow: 240px !default;\r\n$layout-drawer-wide: 456px !default;\r\n$layout-drawer-width: $layout-drawer-narrow !default;\r\n\r\n$layout-header-icon-size: 32px !default;\r\n$layout-screen-size-threshold: 1024px !default;\r\n$layout-header-icon-margin: 24px !default;\r\n$layout-drawer-button-mobile-size: 44px !default;\r\n$layout-drawer-button-desktop-size: 34px !default;\r\n$layout-drawer-button-desktop-margin-top: 5px !default;\r\n$layout-drawer-button-mobile-margin-top: 10px !default;\r\n\r\n$layout-header-mobile-row-height: 56px !default;\r\n$layout-mobile-header-height: $layout-header-mobile-row-height;\r\n$layout-header-desktop-row-height: 44px !default;\r\n$layout-desktop-header-height: $layout-header-desktop-row-height;\r\n\r\n$layout-header-desktop-baseline: 80px !default;\r\n$layout-header-mobile-baseline: 72px !default;\r\n$layout-header-mobile-indent: 16px !default;\r\n$layout-header-desktop-indent: 40px !default;\r\n\r\n$layout-tab-font-size: 14px !default;\r\n$layout-tab-bar-height: 48px !default;\r\n$layout-tab-mobile-padding: 12px !default;\r\n$layout-tab-desktop-padding: 24px !default;\r\n$layout-tab-highlight-thickness: 2px !default;\r\n\r\n// gridlayout\r\n\r\n// Extra small screen / phone\r\n//$screen-xs: 480px;\r\n\r\n$screen-xs-min: 480px;\r\n// Deprecated `@screen-phone` as of v3.0.1\r\n//@screen-phone: @screen-xs-min;\r\n\r\n// Small screen / tablet\r\n// Deprecated `@screen-sm` as of v3.0.1\r\n//@screen-sm: 768px;\r\n$screen-sm-min: 768px;\r\n// Deprecated `@screen-tablet` as of v3.0.1\r\n//@screen-tablet: @screen-sm-min;\r\n\r\n// Medium screen / desktop\r\n// Deprecated `@screen-md` as of v3.0.1\r\n//@screen-md: 992px;\r\n$screen-md-min: 992px;\r\n// Deprecated `@screen-desktop` as of v3.0.1\r\n//@screen-desktop: @screen-md-min;\r\n\r\n// Large screen / wide desktop\r\n// Deprecated `@screen-lg` as of v3.0.1\r\n//@screen-lg: 1200px;\r\n$screen-lg-min: 1200px;\r\n// Deprecated `@screen-lg-desktop` as of v3.0.1\r\n//@screen-lg-desktop: @screen-lg-min;\r\n$screen-xs-max: ($screen-sm-min - 1 );\r\n\r\n$screen-sm-max: ($screen-sm-min - 1 );\r\n\r\n$screen-md-max: ($screen-lg-min - 1 );\r\n\r\n\r\n\r\n\r\n// Number of columns in the grid.\r\n$grid-columns: 12;\r\n// Padding between columns. Gets divided in half for the left and right.\r\n$grid-gutter-width: 30px;\r\n// Navbar collapse\r\n// Point at which the navbar becomes uncollapsed.\r\n$grid-float-breakpoint: 768px;\r\n// Point at which the navbar begins collapsing.\r\n$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);\r\n\r\n\r\n// Small screen / tablet\r\n$container-tablet: (720px + $grid-gutter-width);\r\n// For `@screen-sm-min` and up.\r\n$container-sm: $container-tablet;\r\n\r\n// Medium screen / desktop\r\n$container-desktop: (940px + $grid-gutter-width);\r\n// For `@screen-md-min` and up.\r\n$container-md: $container-desktop;\r\n\r\n// Large screen / wide desktop\r\n$container-large-desktop: (1140px + $grid-gutter-width);\r\n// For `@screen-lg-min` and up.\r\n$container-lg: $container-large-desktop;\r\n\r\n\r\n\r\n// menu\r\n\r\n$default-dropdown-bg-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$menu-expand-duration: 0.3s !default;\r\n$menu-fade-duration: 0.2s !default;\r\n\r\n// Default Item Colors\r\n$default-item-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$default-item-text-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\r\n$default-item-outline-color: unquote(\"rgb(#{$palette-u-blue-400})\") !default;\r\n$default-item-hover-bg-color: unquote(\"rgb(#{$palette-u-blue-100})\") !default;\r\n$default-item-focus-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\r\n$default-item-active-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\r\n$default-item-divider-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\r\n\r\n// Disabled Button Colors\r\n$disabled-item-text-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n\r\n// Tile\r\n$tile-width: 100%;\r\n\r\n$tile-default-border-color: #e9e9e9;\r\n$tile-default-hover-shadow-color: rgba(0, 0, 0, 0.2);\r\n\r\n$tile-primary-border-color: $button-primary-color;\r\n$tile-primary-hover-shadow-color: $button-primary-hover-color;\r\n\r\n$tile-danger-border-color: $button-danger-color;\r\n$tile-danger-hover-shadow-color: $button-danger-hover-color;\r\n\r\n$tile-warning-border-color: $button-warning-color;\r\n$tile-warning-hover-shadow-color: $button-warning-hover-color;\r\n\r\n$tile-success-border-color: $button-success-color;\r\n$tile-success-hover-shadow-color: $button-success-hover-color;\r\n\r\n$tile-info-border-color: $button-info-color;\r\n$tile-info-hover-shadow-color: $button-info-hover-color;\r\n\r\n// Alert\r\n$alert-news-bg: $brand-light-news;\r\n$alert-success-bg: $brand-light-success;\r\n$alert-info-bg: $brand-light-info;\r\n$alert-warning-bg: $brand-light-warning;\r\n$alert-danger-bg: $brand-light-danger;\r\n\r\n\r\n$alert-dark-news-bg: $brand-news;\r\n$alert-dark-success-bg: $brand-success;\r\n$alert-dark-info-bg: $brand-info;\r\n$alert-dark-warning-bg: $brand-warning;\r\n$alert-dark-danger-bg: $brand-danger;\r\n\r\n$alert-news-color: $color-news;\r\n$alert-success-color: $color-success;\r\n$alert-info-color: $color-info;\r\n$alert-warning-color: $color-warning;\r\n$alert-danger-color: $color-danger;\r\n\r\n$timeline-primary-color: $brand-primary;\r\n$timeline-news-color: $color-news;\r\n$timeline-success-color: $color-success;\r\n$timeline-info-color: $color-info;\r\n$timeline-warning-color: $color-warning;\r\n$timeline-danger-color: $color-danger;\r\n\r\n$alert-padding:10px;\r\n$alert-font-size:12px;\r\n$alert-border-radius: $border-radius;\r\n$alert-text-padding-left: 15px;\r\n$alert-text-padding-right: 15px;\r\n$alert-close-font-size: 21px;\r\n$alert-close-opacity: .2;\r\n$alert-close-font-weight: 700;\r\n\r\n//Checkbox\r\n\r\n$checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$checkbox-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-disabled-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-focus-color: unquote(\"rgba(#{$palette-u-blue-500}, 0.26)\") !default;\r\n$checkbox-image-path: $image_path;\r\n\r\n$checkbox-label-font-size: 13px !default;\r\n$checkbox-label-height: 24px !default;\r\n$checkbox-button-size: 16px !default;\r\n$checkbox-inner-margin: 2px !default;\r\n$checkbox-padding: 8px !default;\r\n$checkbox-top-offset:\r\n ($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;\r\n$checkbox-ripple-size: $checkbox-label-height * 1.5;\r\n\r\n$checkbox-primary-bg: $brand-primary;\r\n$checkbox-success-bg: $brand-success;\r\n$checkbox-info-bg: $brand-info;\r\n$checkbox-warning-bg: $brand-warning;\r\n$checkbox-danger-bg: $brand-danger;\r\n$checkbox-dark-bg: $brand-dark;\r\n\r\n$progress-primary-bg: $brand-primary;\r\n$progress-success-bg: $brand-success;\r\n$progress-info-bg: $brand-info;\r\n$progress-warning-bg: $brand-warning;\r\n$progress-danger-bg: $brand-danger;\r\n$progress-dark-bg: $brand-dark;\r\n\r\n$primary-color-opacity:unquote(\"rgba(#{$primary-color}, 0.7)\") !default;\r\n$color-success-opacity:unquote(\"rgba(#{$palette-green-500}, 0.7)\") !default;\r\n$color-info-opacity:unquote(\"rgba(#{$palette-cyan-500}, 0.7)\") !default;\r\n$color-warning-opacity:unquote(\"rgba(#{$palette-orange-500}, 0.7)\") !default;\r\n$color-danger-opacity:unquote(\"rgba(#{$palette-red-500}, 0.7)\") !default;\r\n$color-dark-opacity:unquote(\"rgba(#{$palette-grey-700}, 0.7)\") !default;\r\n\r\n\r\n$progress-sm-height: 10px;\r\n$progress-xs-height: 5px;\r\n$progress-xs-width: 170px;\r\n$progress-default-height: 20px;\r\n$progress-sm-lable-font-size: 10px;\r\n$progress-sm-lable-line-height: 10px;\r\n$progress-xs-lable-line-height: 8px;\r\n$progress-xs-lable-margin-left: 140px;\r\n$progress-xs-lable-font-size: 10px;\r\n$progress-xs-lable-color: #000;\r\n\r\n// Radio\r\n\r\n$radio-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$radio-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$radio-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$radio-disabled-color: $disabled-color-base !default;\r\n\r\n$radio-label-font-size: 13px !default;\r\n$radio-label-height: 32px !default;\r\n$radio-button-size: 16px !default;\r\n$radio-inner-margin: $radio-button-size / 4;\r\n$radio-padding: 8px !default;\r\n$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;\r\n$radio-ripple-size: 42px !default;\r\n\r\n$radio-primary-bg: $brand-primary;\r\n$radio-success-bg: $brand-success;\r\n$radio-info-bg: $brand-info;\r\n$radio-warning-bg: $brand-warning;\r\n$radio-danger-bg: $brand-danger;\r\n$radio-dark-bg: $brand-dark;\r\n\r\n$radio-disabled-bg: #f7f7f7;\r\n$radio-diabled-border-color: #d9d9d9;\r\n\r\n$radio-border-color: #d9d9d9;\r\n$radio-bg-color: #fff;\r\n$radio-color:#212121;\r\n\r\n$radio-checked-bg-color: #fff;\r\n$radio-checked-color: $brand-primary;\r\n$radio-checked-border-color: $radio-checked-color;\r\n\r\n$radio-icon-height: 18px;\r\n$radio-icon-width: 18px;\r\n$radio-icon-checked-height: 8px;\r\n$radio-icon-checked-width: 8px;\r\n\r\n$radio-button-lg-height:42px;\r\n$radio-button-lg-line-height:26px;\r\n\r\n$radio-button-sm-height:22px;\r\n$radio-button-sm-line-height:20px;\r\n\r\n$radio-button-height: 28px;\r\n$radio-button-line-height: 26px;\r\n\r\n\r\n\r\n\r\n\r\n//loading\r\n\r\n$loading-color-1: unquote(\"rgb(#{$palette-blue-400})\") !default;\r\n$loading-color-2: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$loading-color-3: unquote(\"rgb(#{$palette-yellow-600})\") !default;\r\n$loading-color-4: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n\r\n$loading-single-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n$loading-size: 28px !default;\r\n$loading-stroke-width: 3px !default;\r\n\r\n// Amount of circle the arc takes up.\r\n$loading-arc-size: 270deg !default;\r\n// Time it takes to expand and contract arc.\r\n$loading-arc-time: 1333ms !default;\r\n// How much the start location of the arc should rotate each time.\r\n$loading-arc-start-rot: 216deg !default;\r\n\r\n$loading-duration: 360 * $loading-arc-time / (\r\n strip-units($loading-arc-start-rot + (360deg - $loading-arc-size)));\r\n\r\n// datetimepicker\r\n$timepicker-border-gap-color:#ccc;\r\n$timepicker-font-size:14px;\r\n\r\n$date-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n// message\r\n$snackbar-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$snackbar-background-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$snackbar-color-cancel: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$snackbar-color-accept: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$snackbar-color-warning: unquote(\"rgb(#{$palette-lime-200})\") !default;\r\n\r\n// DATA TABLE\r\n\r\n$data-table-font-size: 13px !default;\r\n$data-table-header-font-size: 12px !default;\r\n$data-table-header-sort-icon-size: 16px !default;\r\n\r\n$data-table-header-color: rgba(#000, 0.54) !default;\r\n$data-table-header-sorted-color: rgba(#000, 0.87) !default;\r\n$data-table-divider-color: rgba(#000, 0.12) !default;\r\n$data-table-divider-color-IE8: rgb(0,0,0) !default;\r\n\r\n//$data-table-hover-color: #eeeeee !default;\r\n$data-table-hover-color: #E9F7FC !default;\r\n$data-table-selection-color: #C4EAF6 !default;\r\n\r\n$data-table-dividers: 1px solid $data-table-divider-color !default;\r\n$data-table-dividers-IE8: 1px solid $data-table-divider-color-IE8 !default;\r\n\r\n$data-table-row-height: 48px !default;\r\n$data-table-last-row-height: 56px !default;\r\n$data-table-header-height: 56px !default;\r\n\r\n$data-table-column-spacing: 36px !default;\r\n$data-table-column-padding: $data-table-column-spacing / 2;\r\n\r\n$data-table-card-header-height: 64px !default;\r\n$data-table-card-title-top: 20px !default;\r\n$data-table-card-padding: 24px !default;\r\n$data-table-button-padding-right: 16px !default;\r\n$data-table-cell-top: $data-table-card-padding / 2;\r\n\r\n// $line-height-computed: round(($font-size-small * $line-height-base));\r\n$line-height-computed: round((14px * $line-height-base));\r\n$table-bg: transparent;\r\n$table-cell-padding: 8px;\r\n$table-border-color: $border-color-base;\r\n$table-bg-hover: $bg-color-base;\r\n$table-bg-active: $table-bg-hover;\r\n$table-bg-accent: unquote(\"rgba(#{$palette-grey-200},.3)\") !default;\r\n\r\n\r\n\r\n\r\n// tooltip\r\n$tooltip-max-width: 200px;\r\n$tooltip-color: #fff;\r\n$tooltip-bg: #42526E;\r\n$tooltip-inverse-border-color: #d9d9d9;\r\n$tooltip-inverse-color: rgb(51,51,51);\r\n$tooltip-arrow-color: $tooltip-bg;\r\n$tooltip-opacity: 1;\r\n\r\n\r\n// 进度条\r\n$bar-height: 4px !default;\r\n$progress-main-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$progress-secondary-color: unquote(\"rgba(#{$color-primary-contrast}, 0.7)\") !default;\r\n$progress-fallback-buffer-color: unquote(\"rgba(#{$color-primary-contrast}, 0.9)\") !default;\r\n$progress-image-path: $image_path;\r\n$progress-buffer-bar-border:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n\r\n// Tabs\r\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n\r\n\r\n$tab-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$tab-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n$tab-active-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$tab-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n\r\n\r\n\r\n//CARD\r\n\r\n$card-width: 330px !default;\r\n$card-height: 200px !default;\r\n$card-font-size: 13px !default;\r\n$card-title-font-size: 24px !default;\r\n$card-subtitle-font-size: 10px !default;\r\n$card-horizontal-padding: 16px !default;\r\n$card-vertical-padding: 16px !default;\r\n\r\n$card-title-perspective-origin-x: 165px !default;\r\n$card-title-perspective-origin-y: 56px !default;\r\n\r\n$card-title-transform-origin-x: 165px !default;\r\n$card-title-transform-origin-y: 56px !default;\r\n\r\n$card-title-text-transform-origin-x: 149px !default;\r\n$card-title-text-transform-origin-y: 48px !default;\r\n\r\n$card-supporting-text-font-size: 1.4 * $unit !default;\r\n$card-supporting-text-line-height: 18px !default;\r\n\r\n$card-actions-font-size: 13px !default;\r\n\r\n$card-title-text-font-weight: 300 !default;\r\n$card-z-index: 1 !default;\r\n\r\n// Cover image\r\n$card-cover-image-height: 186px !default;\r\n$card-background-image-url: '' !default;\r\n\r\n\r\n\r\n$card-background-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$card-text-color: unquote(\"rgb(#{$color-black})\") !default;\r\n$card-image-placeholder-color: unquote(\"rgb(#{$color-accent})\") !default;\r\n$card-supporting-text-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n$card-border-color: rgba(0,0,0,0.1) !default;\r\n$card-subtitle-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n\r\n\r\n$input-border:unquote(\"rgb(#{$palette-u-gray-500})\");\r\n$input-border-focus:unquote(\"rgb(#{$primary-color})\");\r\n$input-border-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\r\n$input-bg-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\r\n$input-color:unquote(\"rgb(#{$palette-u-gray-A100})\");\r\n$form-input-height:36px;\r\n$form-input-height-sm:28px;\r\n$form-input-padding-left:12px;\r\n$form-label-color:unquote(\"rgb(#{$palette-u-gray-900})\");\r\n$form-control-feedback-color:unquote(\"rgb(#{$palette-u-gray-700})\");\r\n$form-validate-error-color:unquote(\"rgb(#{$palette-u-red-600})\");\r\n\r\n\r\n// BADGE\r\n$badge-font-size: 12px !default;\r\n$badge-color: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n$badge-color-inverse: unquote(\"rgb(#{$color-accent})\") !default;\r\n$badge-background: unquote(\"rgb(#{$color-accent})\") !default;\r\n$badge-background-inverse: unquote(\"rgba(#{$color-accent-contrast},0.2)\") !default;\r\n$badge-size : 22px !default;\r\n$badge-padding: 2px !default;\r\n$badge-overlap: 12px !default;\r\n\r\n$badge-primary-color:#FFFFFF;\r\n$badge-primary-bg:$brand-primary;\r\n\r\n$badge-success-color:#FFFFFF;\r\n$badge-success-bg: $brand-success;\r\n\r\n$badge-info-color:#FFFFFF;\r\n$badge-info-bg:$brand-info;\r\n\r\n$badge-warning-color:#FFFFFF;\r\n$badge-warning-bg:$brand-warning;\r\n\r\n$badge-danger-color:#FFFFFF;\r\n$badge-danger-bg:$brand-danger;\r\n\r\n$badge-dark-color:#FFFFFF;\r\n$badge-dark-bg:$brand-dark;\r\n\r\n$badge-font-size: 12px;\r\n$badge-font-dataicon-size: 10px;\r\n$badge-default-dataicon-fontcolor: #757575;\r\n$badge-default-dataicon-bgcolor: #fff;\r\n$badge-default-dataicon-bordercolor: $border-color-base;\r\n\r\n// labels\r\n$tag-padding: .25em .6em .25em;\r\n$tag-border-radius: 0.3em;\r\n$tag-bg: #eeeeee;\r\n$tag-round-border-radius: 1em;\r\n$tag-default-color: #757575;\r\n$tag-default-bg:#e0e0e0;\r\n$tag-lg-font-size: 16px;\r\n$tag-sm-font-size: 10px;\r\n$tag-sm-padding: .1em .5em .1em;\r\n$tag-default-hover-bg: $brand-default-hover;\r\n$tag-primary-hover-bg: $brand-primary-hover;\r\n$tag-success-hover-bg: $brand-success-hover;\r\n$tag-info-hover-bg: $brand-info-hover;\r\n$tag-warning-hover-bg: $brand-warning-hover;\r\n$tag-danger-hover-bg: $brand-danger-hover;\r\n$tag-dark-hover-bg: $brand-dark-hover;\r\n$tag-default-bg: $brand-default;\r\n$tag-primary-bg: $brand-primary;\r\n$tag-success-bg: $brand-success;\r\n$tag-info-bg: $brand-info;\r\n$tag-warning-bg: $brand-warning;\r\n$tag-danger-bg: $brand-danger;\r\n$tag-dark-bg: $brand-dark;\r\n$tag-default-hover-color:unquote(\"rgb(#{$palette-u-gray-500})\");\r\n\r\n\r\n// pagination\r\n$pagination-gap-hover-border:#7A869A;\r\n\r\n$pagination-link-padding: 7px 13px;\r\n$pagination-lg-font-size: 16px;\r\n$pagination-lg-padding-vertical: 9.5px;\r\n$pagination-lg-padding-horizontal: 15.5px;\r\n\r\n$pagination-small-font-size: 12px;\r\n$pagination-small-padding-vertical: 4px;\r\n$pagination-small-padding-horizontal: 9.5px;\r\n\r\n$pag-color: #666666;\r\n$pag-bg-color: #fff;\r\n$pag-border-color:#d7d7d7;\r\n$pag-hover-color: #666;\r\n$pag-hover-bg-color:$hover-bg-color-base;\r\n$pag-hover-border-color:#d7d7d7;\r\n$pag-active-color: #fff;\r\n$pag-active-bg-color:#7A869A;\r\n$pag-active-border-color:#7A869A;\r\n$pag-disabled-color: #777;\r\n$pag-disabled-bg-color:#fff;\r\n$pag-disabled-border-color:#ddd;\r\n\r\n$border-radius-base: $border-radius;\r\n$border-radius-large: 4px;\r\n$border-radius-small: 2px;\r\n\r\n$line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome\r\n$line-height-small: 1.5;\r\n// widget\r\n\r\n$widget-padding-left:30px;\r\n$widget-padding-top:10px;\r\n\r\n//tooltips\r\n\r\n$tooltip-default-bg: $brand-default;\r\n$tooltip-primary-bg: $brand-primary;\r\n$tooltip-success-bg: $brand-success;\r\n$tooltip-info-bg: $brand-info;\r\n$tooltip-warning-bg: $brand-warning;\r\n$tooltip-danger-bg: $brand-danger;\r\n$tooltip-dark-bg: $brand-dark;\r\n\r\n//menu Button\r\n\r\n$menu-default-bg: $brand-default;\r\n$menu-primary-bg: $brand-primary;\r\n$menu-success-bg: $brand-success;\r\n$menu-info-bg: $brand-info;\r\n$menu-warning-bg: $brand-warning;\r\n$menu-danger-bg: $brand-danger;\r\n$menu-dark-bg: $brand-dark;\r\n$menu-default-bg-hover: $brand-default-hover;\r\n$menu-primary-bg-hover: $brand-primary-hover;\r\n$menu-success-bg-hover: $brand-success-hover;\r\n$menu-info-bg-hover: $brand-info-hover;\r\n$menu-warning-bg-hover: $brand-warning-hover;\r\n$menu-danger-bg-hover: $brand-danger-hover;\r\n$menu-dark-bg-hover: $brand-dark-hover;\r\n\r\n\r\n// breadcrumbs\r\n\r\n$breadcrumb-padding-vertical: 8px;\r\n$breadcrumb-padding-horizontal: 10px;\r\n$breadcrumb-separator: \"/\\00a0\";\r\n$breadcrumb-bg: transparent;\r\n$breadcrumb-margin-bottom: 10px;\r\n\r\n$breadcrumb-color: $brand-primary;\r\n$breadcrumb-active-color: $text-color;\r\n\r\n$breadcrumb-icon-margin-right: 10px;\r\n$breadcrumb-arrow-separator: \"\\00bb\\00a0\";\r\n\r\n$breadcrumb-bg-color: #f5f5f5;\r\n$breadcrumb-active-color: #777;\r\n$breadcrumb-separate-color: #ccc;\r\n\r\n// list-group\r\n$list-group-media-heading-font-size : $font-size-small;//14px\r\n$list-group-link-disabled-color : $disabled-color-base;\r\n\r\n$list-group-link-disabled-bg : $gray-lightest;\r\n\r\n$list-group-active-color : $brand-primary;\r\n$list-group-link-active-color : unquote(\"rgb(#{$color-white})\") !default;\r\n$list-group-link-active-bg : $brand-primary;\r\n\r\n\r\n$list-group-item-icon-margin-right : 10px;\r\n\r\n$list-group-bg-inherit-item-border : rgba(0, 0, 0, 0.075);\r\n$list-group-bg-inherit-item-hover-bg : rgba(0, 0, 0, 0.075);\r\n\r\n\r\n$list-group-border-radius: $border-radius-base;\r\n\r\n\r\n\r\n$list-group-link-color: $text-color;\r\n$list-group-link-hover-color: $text-color;\r\n$list-group-link-heading-color: $title-color;\r\n\r\n$list-group-hover-bg: $bg-color-base;\r\n\r\n$list-group-disabled-bg: transparent;\r\n\r\n$list-group-disabled-color: $disabled-color-base;\r\n\r\n\r\n$list-group-disabled-text-color: $list-group-disabled-color;\r\n$list-group-active-bg: transparent;\r\n$list-group-active-border: $list-group-active-bg;\r\n// $list-group-active-text-color: lighten($list-group-active-color, 40%);\r\n$list-group-active-text-color: $list-group-active-color;\r\n\r\n$list-group-bg: #fff;\r\n$list-group-border: transparent;\r\n// $list-group-bordered-border : $border-color-base;\r\n// $list-group-bordered-active-color : $component-active-color;\r\n// $list-group-bordered-active-bg : $component-active-bg;\r\n// $list-group-bordered-active-border : $list-group-bordered-active-bg;\r\n\r\n// $list-group-gap-item-margin-bottom : 2px;\r\n\r\n//step\r\n$steps-margin-bottom: $line-height-computed;\r\n$step-padding-horizontal:20px;\r\n$step-padding-vertical: 12px;\r\n\r\n$step-vertical-padding-horizontal: 20px;\r\n$step-vertical-padding-vertical:18px;\r\n\r\n$step-color: $gray;\r\n$step-bg: $bg-color-base;\r\n$step-number-bg: $gray-lighter;\r\n$step-number-color: $inverse;\r\n\r\n$step-current-color: $inverse;\r\n$step-current-bg: $brand-primary;\r\n\r\n$step-done-color: $inverse;\r\n$step-done-bg:$brand-success;\r\n\r\n$step-error-color: $inverse;\r\n$step-error-bg: $brand-danger;\r\n\r\n$step-disabled-color:$gray-light;\r\n\r\n$step-font-size: inherit;\r\n$step-title-font-size: 20px;\r\n$step-icon-font-size:27px;\r\n$step-number-font-size:24px;\r\n$step-number-size: 40px;\r\n\r\n$step-lg-padding-horizontal:20px;\r\n$step-lg-padding-vertical:20px;\r\n$step-lg-font-size: 16px;\r\n$step-lg-title-font-size:22px;\r\n$step-lg-icon-font-size: 32px;\r\n$step-lg-number-font-size:28px;\r\n$step-lg-number-size:46px;\r\n\r\n$step-sm-font-size: 12px;\r\n$step-sm-title-font-size: 18px;\r\n$step-sm-icon-font-size: 24px;\r\n$step-sm-number-font-size: 24px;\r\n$step-sm-number-size: 30px;\r\n\r\n$step-xs-font-size: 10px;\r\n$step-xs-title-font-size: 16px;\r\n$step-xs-icon-font-size: 22px;\r\n$step-xs-number-font-size: 20px;\r\n$step-xs-number-size: 24px;\r\n\r\n// blog nav\r\n$blognav-active-color:unquote(\"rgb(#{$primary-color})\");\r\n// widget\r\n$widget-padding-left:30px;\r\n$widget-padding-top:10px;\r\n\r\n\r\n// couter 数据统计\r\n\r\n$counter-number-color: $gray-darkest;\r\n$counter-number-font-size: 20px;\r\n$counter-icon-font-size: $counter-number-font-size;\r\n\r\n$counter-lg-number-font-size: 40px;\r\n$counter-md-number-font-size: 30px;\r\n$counter-sm-number-font-size: 14px;\r\n\r\n$counter-lg-icon-font-size: $counter-lg-number-font-size;\r\n$counter-md-icon-font-size: $counter-md-number-font-size;\r\n$counter-sm-icon-font-size: $counter-sm-number-font-size;\r\n\r\n$counter-inverse-color: $inverse;\r\n\r\n\r\n// navbar\r\n\r\n\r\n$menu-active-color: #108ee9;\r\n$menu-border-active-color: #108ee9;\r\n$menu-selected-bg-color: #eaf8fe;\r\n$menu-group-titil-color: #999;\r\n$menu-group-title-padding-left: 32px;\r\n$menu-color: #666;\r\n$menu-border-color: #d9d9d9;\r\n\r\n$navbar-default-bg-color: #f8f8f8;\r\n$navbar-default-border-color: #e7e7e7;\r\n$navbar-default-color: #777;\r\n$navbar-default-hover-color: #333;\r\n$navbar-inverse-hover-color: #fff;\r\n$navbar-inverse-color: #9d9d9d;\r\n$navbar-inverse-bg-color: #222;\r\n$navbar-inverse-border-color: #080808;\r\n$navbar-border-radius: 4px;\r\n\r\n$navbar-side-container-border-color: #d9d9d9;\r\n$navbar-side-container-width: 242px;\r\n$navbar-side-container-border-shadow: #d9d9d9;\r\n\r\n// Basics of a navbar\r\n$navbar-height: 50px;\r\n$navbar-margin-bottom: $line-height-computed;\r\n$navbar-border-radius: $border-radius-base;\r\n$navbar-padding-horizontal: floor(($grid-gutter-width / 2));\r\n$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);\r\n$navbar-collapse-max-height: 340px;\r\n\r\n$navbar-avatar-margin-horizontal: (($navbar-height - 32px) / 2);\r\n\r\n$navbar-brand-padding-horizontal: 20px;\r\n$navbar-brand-logo-height: 32px;\r\n\r\n$navbar-default-color: $text-color;\r\n$navbar-default-bg: $inverse;\r\n$navbar-default-border: $border-color-base;\r\n\r\n// Navbar links\r\n$navbar-default-link-color: $text-color;\r\n$navbar-default-link-hover-color: $gray-darker;\r\n$navbar-default-link-hover-bg: rgba(238,238,238, 30%);\r\n$navbar-default-link-active-color: $navbar-default-link-hover-color;\r\n$navbar-default-link-active-bg: rgba(238,238,238, 60%);\r\n$navbar-default-link-disabled-color: $disabled-color-base;\r\n$navbar-default-link-disabled-bg: transparent;\r\n\r\n// Navbar brand label\r\n$navbar-default-brand-color: $title-color;\r\n$navbar-default-brand-hover-color: $navbar-default-brand-color;\r\n$navbar-default-brand-hover-bg: none;\r\n\r\n// Navbar toggle\r\n$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg;\r\n$navbar-default-toggle-icon-bar-bg: $navbar-default-color;\r\n$navbar-default-toggle-border-color: transparent;\r\n\r\n\r\n// Inverted navbar\r\n// Reset inverted navbar basics\r\n$navbar-inverse-bg: $brand-primary;\r\n$navbar-inverse-border: rgba(0, 0, 0, .1);\r\n\r\n// Inverted navbar links\r\n$navbar-inverse-link-color: $inverse;\r\n$navbar-inverse-link-hover-color: $inverse;\r\n$navbar-inverse-link-hover-bg: rgba(0, 0, 0, .1);\r\n$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;\r\n$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg;\r\n$navbar-inverse-link-disabled-color: $inverse;\r\n$navbar-inverse-link-disabled-bg: transparent;\r\n\r\n// Inverted navbar brand label\r\n$navbar-inverse-brand-color: $navbar-inverse-link-color;\r\n$navbar-inverse-brand-hover-color: $inverse;\r\n$navbar-inverse-brand-hover-bg: none;\r\n\r\n// Inverted navbar toggle\r\n$navbar-inverse-toggle-hover-bg: $navbar-inverse-link-hover-bg;\r\n$navbar-inverse-toggle-icon-bar-bg: $inverse;\r\n$navbar-inverse-toggle-border-color: transparent;\r\n\r\n//hamburger\r\n$hamburger-size: 17px;\r\n\r\n\r\n//panel\r\n$panel-header-padding : 10px 15px;\r\n$panel-footer-padding : 10px 15px;\r\n$panel-body-padding : 15px 15px;\r\n$panel-header-bg-color : #f5f5f5;\r\n$panel-footer-bg-color : #f5f5f5;\r\n$panel-bg-color : #fff;\r\n$panel-default-color : #757575;\r\n$panel-inner-border-color: #ddd;\r\n\r\n\r\n//modal\r\n$modal-header-padding : 15px;\r\n$modal-body-padding : 15px;\r\n$modal-footer-padding : 15px;\r\n$modal-content-bg-color: #fff;\r\n$modal-backdrop-bg: #000;\r\n$modal-backdrop-opacity: .6;\r\n$modal-header-border-color: transparent;\r\n$modal-footer-border-color: transparent;\r\n$modal-xlg: 976px;\r\n$modal-lg: 800px;\r\n$modal-sm: 400px;\r\n$modal-default: 600px;\r\n$modal-border-radius: $border-radius-base;\r\n\r\n//notification\r\n\r\n$zIndex-notification: $zIndex-notification;\r\n$notification-top: 30px;\r\n$notification-bottom: 30px;\r\n$notification-right: 30px;\r\n$notification-width: 300px;\r\n$notification-text-margin-right: 15px;\r\n$notice-padding: 15px;\r\n$notice-background: $gray-darkest;\r\n$notice-bottom: 15px;\r\n\r\n//message\r\n\r\n$message-font-size: 12px;\r\n\r\n$message-right: 30px;\r\n$message-width: 300px;\r\n$message-text-margin-right: 15px;\r\n$message-padding: 0;\r\n$message-content-padding: 15px;\r\n$message-background: $gray-darkest;\r\n\r\n//popconfirm\r\n\r\n$popconfirm-max-width: 300px;\r\n\r\n$popconfirm-dark-bg: $gray-darkest;\r\n$popconfirm-fallback-dark-border-color: $gray-darkest;\r\n$popconfirm-margin: 10px;\r\n$popconfirm-title-bg: #fff;\r\n$popconfirm-border-color:$border-color-base;\r\n$popconfirm-arrow-width: 10px;\r\n$popconfirm-arrow-color: $border-color-base;\r\n$popconfirm-arrow-outer-width: 0;\r\n$popconfirm-arrow-outer-color: $border-color-base;\r\n$popconfirm-border-right-color: $border-color-base;\r\n$popconfirm-fallback-border-color: #fff;\r\n\r\n//select\r\n\r\n$select-bg-color: #fff;\r\n$select-border-color: $border-color-base;\r\n$select-border-radius: $border-radius-base;\r\n$select-color: $font-color-base;\r\n$select-font-size: 12px;\r\n$select-dropdown-color: #666;\r\n$select-dropdown-bg-color: #fff;\r\n$select-dropdown-hover-bg: $hover-bg-color-base;\r\n$select-dropdown-selected-bg: $selected-bg-color-base;\r\n$select-dropdown-selected-color: rgb(134, 119, 119);\r\n$select-dropwdown-item-padding: 7px 16px;\r\n$select-disabled-color: $disabled-color-base;\r\n$select-disabled-bg: #f7f7f7;\r\n$select-disabled-border-color: #d9d9d9;\r\n//dropdown\r\n\r\n$dropdown-item-hover-bg-color: unquote(\"rgb(#{$palette-grey-100})\");\r\n$dropdown-item-divier-bg-color: $gray-lighter;\r\n$dropdown-border-color: $border-color-base;\r\n$dropdown-border-radius:3px;\r\n$dropdown-shadow: 0 1px 5px $dropdown-border-color;\r\n$dropdown-margin: 5px 0 0 0;\r\n$dropdown-menu-item-padding: 0px 16px 0 28px;\r\n$dropdown-menu-font-size: 12px;\r\n$dropdown-menu-item-height: 42px;\r\n$dropdown-menu-item-light-height: 42px;\r\n$dropdown-menu-title-font-size: 12px;\r\n$dropdown-menu-title-color: $disabled-color-base;\r\n$dropdown-menu-title-padding:8px 16px;\r\n$dropdown-menu-title-line-height: 1.5;\r\n\r\n//upload\r\n\r\n$upload-list-color: #108ee9;\r\n$upload-list-bg : #fff;\r\n$upload-list-hover-bg: #e7f4fd;\r\n$upload-list-error-color: #f50;\r\n$upload-thumbnail-height: 48px;\r\n$upload-thumbnail-width: 48px;\r\n$upload-thumbnail-img-height: 48px;\r\n$upload-thumbnail-img-width: 48px;\r\n\r\n//loading\r\n\r\n$loading-loadprimary: rgb(63, 81, 181);\r\n$loading-loadsuccess: #4caf50;\r\n$loading-loadwarn: rgb(255, 152, 0);\r\n$loading-lineanimating: (\r\n 1:line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 2:line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 3:line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 4:line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 5:line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08)\r\n);\r\n$loading-linebackcolor: (\r\n 1: #F44336,\r\n 2: #7ED321,\r\n 3: #0084FF,\r\n 4: #FF9800,\r\n 5: #D0021B\r\n);\r\n$loading-back-width: 120px;\r\n$loading-back-height:110px;\r\n$loading-desc-font-size: 16px;\r\n$loading-desc-color: #cecece;\r\n$loading-rotate-bor:#c2c3c5;\r\n\r\n//两种加载的尺寸 width height\r\n$loading-rotate-sm-size: 25px;\r\n$loading-rotate-size:40px;\r\n$loading-rotate-lg-size:60px;\r\n\r\n$loading-line-sm-width: 4px;\r\n$loading-line-sm-height:35px;\r\n$loading-line-width:6px;\r\n$loading-line-height:50px;\r\n$loading-line-lg-width:8px;\r\n$loading-line-lg-height:90px ;\r\n\r\n//居中位置top left\r\n$loading-center-top:50%;\r\n$loading-center-left:50%;\r\n\r\n$loading-rotate-center-sm: -15px ;\r\n$loading-rotate-center:-22px;\r\n$loading-rotate-center-lg:-35px ;\r\n\r\n$loading-line-center-sm-top: -22px;\r\n$loading-line-center-sm-left:-20px;\r\n$loading-line-center-top:-30px;\r\n$loading-line-center-left:-25px;\r\n$loading-line-center-lg-top:-50px;\r\n$loading-line-center-lg-left:-30px;\r\n\r\n\r\n//switch\r\n\r\n\r\n//color\r\n$switch-border-color: $gray-lighter;\r\n$switch-back-color: $gray-lighter;\r\n$switch-checked-borColor: $brand-primary;\r\n$switch-checked-backColor: $brand-primary;\r\n\r\n// border-radius of different state switch\r\n$switch-border-radius: 20px;\r\n$switch-border-radius-after: 18px;\r\n\r\n// width height line-height of the three switches\r\n$switch-width: (default:44px, small:32px, large:60px);\r\n$switch-height: (default:22px, small:16px, large:30px);\r\n$switch-lineHeight: (default:20px, small:12px, large:12px);\r\n\r\n// style of u-switch-inner\r\n$switch-inner-fontSize: (default:12px, small:10px, large:18px);\r\n$switch-inner-left: (default:22px, small:16px, large:30px);\r\n$switch-inner-largeTop: 8px;\r\n\r\n// style of u-switch:active:after\r\n$switch-active-width: (default:24px, small:16px, large:32px);\r\n\r\n// style of u-switch:after\r\n$switch-after-widthHeight: 18px;\r\n$switch-after-widthHeight-sm: 14px;\r\n$switch-after-widthHeight-lg: 26px;\r\n$switch-after-top: 1px;\r\n$switch-after-top-sm: 0;\r\n$switch-after-top-lg: 1px;\r\n$switch-after-left: 0;\r\n$switch-after-left-sm: 0;\r\n$switch-after-left-lg: 0;\r\n\r\n// style of u-switch.is-checked\r\n$switch-checked-innerLeft: (default:8px, small:4px, large:8px);\r\n$switch-checked-afterLeft: (default:24px, small:16px, large:32px);\r\n$switch-checked-activeLeft: (default:16px, small:10px, large:26px);\r\n\r\n$switch-primary-bg: $brand-primary;\r\n$switch-dark-bg: $brand-dark;\r\n$switch-success-bg: $brand-success;\r\n$switch-warning-bg: $brand-warning;\r\n$switch-danger-bg: $brand-danger;\r\n$switch-info-bg: $brand-info;\r\n\r\n//tabs\r\n\r\n$tabs-basic-back: #f5f5f5;\r\n$tabs-cls-color: #666;\r\n$tabs-cls-width: 900px;\r\n$tabs-simple-conHeight: 120px;\r\n$tabs-simple-conPad: 16px;\r\n$tabs-simple-conWidth: 100%;\r\n\r\n$tabs-fontSize: (simple:14px, fill:14px, turn:14px, slide:14px, fade:14px, fadeup:14px);\r\n$tabs-lineHeight: (simple:2.3, fill:2.3, turn:2.3, slide:2.3, fade:2.3, fadeup:2.3);\r\n$tabs-marginBottom: -1px;\r\n\r\n$tabs-simple-tab: (padding:0 16px, margin:5px 0 5px 5px, radius:0 0 0 0, back:#fff);\r\n$tabs-simple-tabBorder: 1px solid #fff;\r\n$tabs-simple-activeBorder: 1px solid $brand-primary;\r\n$tabs-simple-activeColor: #fff;\r\n$tabs-simple-activeBorBottom: 1px solid $brand-primary;\r\n$tabs-simple-activeTopRadius: 5px;\r\n$tabs-simple-fontWeight: bold;\r\n\r\n$tabs-fill-tab: (padding: 0 16px, color:#666, back:#fff, afterBack:#d2d8d6, activeBack:$brand-primary);\r\n$tabs-fill-tab-maright: 5px;\r\n$tabs-fill-after-top: 0;\r\n$tabs-fill-after-left: 0;\r\n$tabs-fill-after-width: 100%;\r\n$tabs-fill-after-height: 100%;\r\n$tabs-fill-fontWeight: bold;\r\n\r\n$tabs-turn-tab: (padding: 0 16px, color:#fff, back:#f5f5f5, afterBack:$brand-primary, activeBack:$brand-primary);\r\n$tabs-turn-after-top: 0;\r\n$tabs-turn-after-left: 0;\r\n$tabs-turn-after-width: 100%;\r\n$tabs-turn-after-height: 100%;\r\n$tabs-turn-beforeBot: 32px;\r\n$tabs-turn-beforeRight: 15px;\r\n$tabs-turn-fontWeight: bold;\r\n$tabs-moveleft-conHeight: 120px;\r\n$tabs-moveleft-conPad: 16px;\r\n\r\n$tabs-slide-tabs: (width:25%, padding: 0 16px, back:#f5f5f5);\r\n$tabs-slide-child-bottom: 0;\r\n$tabs-slide-child-left: 0;\r\n$tabs-slide-child-height: 4px;\r\n$tabs-slide-child-back: $brand-primary;\r\n$tabs-slide-fontWeight: bold;\r\n\r\n$tabs-fade-tab: (marLeft:5px, marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\r\n$tabs-fade-conPad: 16px;\r\n$tabs-fade-conBor: 5px;\r\n\r\n$tabs-fadeup-tab: (marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\r\n$tabs-fadeup-top: -5px;\r\n$tabs-fadeup-left: 0;\r\n$tabs-fadeup-width: 100%;\r\n$tabs-fadeup-height: 100%;\r\n$tabs-fadeup-color: #666;\r\n$tabs-fadeup-conHeight: 120px;\r\n$tabs-fadeup-conPad: 16px;\r\n\r\n\r\n//rate\r\n$rate-star-default-color:$gray-lightest;\r\n$rate-star-active-color:$brand-primary;\r\n$rate-star-marginRight:8px;\r\n//backtop\r\n$back-top-padding:5px;\r\n$backtop-background:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$backtop-color:unquote(\"rgb(#{$color-white})\") !default;\r\n$backtop-right:10px;\r\n$backtop-bottom:10px;\r\n$backtop-dom-right:40px;\r\n\r\n\r\n//dnd\r\n$dnd-list-background:unquote(\"rgb(#{$palette-grey-400})\")!default;\r\n$dnd-list-padding:8px;\r\n$dnd-list-dragging-background:unquote(\"rgb(#{$palette-light-blue-A200})\")!default;\r\n$dnd-item-color:unquote(\"rgb(#{$color-black})\")!default;\r\n$dnd-item-padding:16px;\r\n$dnd-item-margin:4px;\r\n$dnd-item-background:unquote(\"rgb(#{$palette-grey-500})\")!default;\r\n$dnd-item-dragging-background:unquote(\"rgb(#{$palette-blue-300})\")!default;\r\n\r\n// bee-tree\r\n$tree-checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$tree-node-bg-color: $hover-bg-color-base !default;\r\n\r\n// bee-table\r\n$table-head-background-color: unquote(\"rgb(#{$table-header-background-color})\") !default;\r\n$table-head-text-color: unquote(\"rgb(#{$table-header-text-color})\") !default;\r\n\r\n// bee-transfer\r\n$transfer-border-gap-color:#d9d9d9;\r\n\r\n// bee-transfer\r\n$cascader-border-gap-color:#ccc;","@import \"../node_modules/tinper-bee-core/scss/minxin-variables\";\n@import \"../node_modules/tinper-bee-core/scss/minxin-mixins\";\n// @import \"../node_modules/bee-loading/src/Loading\";\n\n$text-color: $font-color-base;\n$font-size-base: 12px;\n$line-height: 1.5;\n// 主题定制border:\n$table-border-color: unquote(\"rgb(#{$table-border-color-base})\");\n// $table-head-background-color: #f7f7f7;\n// $table-head-text-color: #666;\n$vertical-padding: 12px;\n$horizontal-padding: 8px;\n// $table-border-color: #e9e9e9;\n\n$table-hover-color: #E7F2FC;\n$table-move-in-color: $bg-color-base;\n$checkbox-height:16px;\n$table-th-bottom-border:#C1C7D0;\n\n$filter-form-control-height:28px;\n$table-head-font-weight: bold;\n.u-table {\n font-size: $font-size-base;\n color: $text-color;\n // transition: opacity 0.3s ease;\n position: relative;\n line-height: $line-height;\n overflow: hidden;\n &-body{\n // overflow: hidden!important;\n position: relative;\n }\n &-hiden-drag{\n position: relative;\n &-li{\n position: absolute;\n top: 0px;\n left: 0px;\n // height: 10px;//这个高度先注释掉了,加上后,在火狐浏览器上会站位置。滚动条拉到最右边有错行\n }\n }\n table {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n }\n\n th {\n // background: $table-head-background-color;\n font-weight: $table-head-font-weight;\n text-align: left;\n // transition: background 0.3s ease;\n &[colspan] {\n text-align: center;\n }\n ::last-child{\n overflow: hidden;\n }\n }\n\n td {\n border-bottom: 1px solid $table-border-color;\n a{\n color: #2196F3;\n &:hover{\n color: #1565c0;\n }\n &:active{\n color: #1565c0;\n }\n }\n }\n thead{\n tr:last-child{\n border-bottom: 1px solid $table-th-bottom-border;\n }\n \n }\n tr {\n // transition: all 0.3s ease;\n &:hover {\n // background: $hover-bg-color-base;\n td {\n .uf-eye{\n visibility: visible !important;\n }\n }\n }\n tr a{\n color: #2196F3;\n &:hover{\n color: #1565c0;\n }\n &:active{\n color: #1565c0;\n }\n }\n }\n tr.tr-row-hover {\n background: $hover-bg-color-base;\n }\n\n th,\n td {\n padding: $vertical-padding $horizontal-padding;\n word-break: break-all;\n }\n tr {\n \n &.filterable{\n th{\n padding-top: 5px !important;\n padding-bottom: 5px !important;\n .filterContext{\n height: 35px;\n }\n }\n }\n }\n &-row-hover {\n background:unquote(\"rgb(#{$table-row-hover-bg-color})\");\n }\n \n &-scroll {\n overflow: auto;\n }\n &-bordered {\n table {\n border: 1px solid $table-border-color;\n box-sizing: border-box;\n table-layout: fixed;\n // width:auto;\n }\n \n .u-table-header>table {\n border-bottom: 0;\n }\n .u-table-header~.u-table-body,.u-table-header~.u-table-body-outer{\n table{\n border-top: 0px ;\n }\n }\n\n th {\n border-bottom: 1px solid $table-border-color;\n box-sizing: border-box;\n }\n th,\n td {\n border-right: 1px solid $table-border-color;\n box-sizing: border-box;\n }\n }\n &-drag-border{\n tr {\n th.th-can-not-drag{ //拖拽tag影响了表格整体宽度\n overflow: hidden;\n }\n }\n }\n &-header {\n overflow: hidden;\n background: $table-head-background-color;\n color: $table-head-text-color;\n }\n\n &.fixed-height td {\n padding: 0px 8px;\n }\n\n &-fixed-header &-body {\n background: #fff;\n position: relative;\n }\n &-fixed-left &-body-inner {\n margin-right: -20px;\n padding-right: 20px;\n }\n\n &-fixed-header &-fixed-left &-body-inner {\n padding-right: 0px;\n }\n\n &-fixed-header &-body-inner {\n height: 100%;\n // overflow: scroll;\n }\n\n\n &-fixed-header &-scroll &-header {\n overflow-x: scroll;\n padding-bottom: 20px;\n margin-bottom: -20px;\n overflow-y: scroll;\n box-sizing: border-box;\n }\n\n &-title {\n padding: $vertical-padding $horizontal-padding;\n border-top: 1px solid $table-border-color;\n }\n\n &-content {\n position: relative;\n }\n\n &-footer {\n padding: $vertical-padding $horizontal-padding;\n border-bottom: 1px solid $table-border-color;\n .u-table-scroll{\n overflow-x: hidden;\n }\n }\n &-footer & {\n margin: (-$vertical-padding) (-$horizontal-padding);\n }\n\n &-placeholder {\n padding: $vertical-padding 8px;\n background: #fff;\n border-bottom: 1px solid $table-border-color;\n text-align: center;\n position: relative;\n }\n\n &-expand-icon-col {\n width: 10px;\n }\n &-row,\n &-expanded-row {\n .u-table{\n tr{\n background: #fff;\n }\n tr.u-table-row-hover{\n background:unquote(\"rgb(#{$table-row-hover-bg-color})\");\n }\n }\n &-expand-icon {\n cursor: pointer;\n display: inline-block;\n margin-right: 0px;\n width: 16px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n border: 1px solid $table-border-color;\n user-select: none;\n background: #fff;\n margin-right: 10px;\n }\n &-spaced {\n visibility: hidden;\n }\n &-spaced:after {\n content: \".\";\n }\n\n &-expanded:after {\n content: \"-\";\n }\n\n &-collapsed:after {\n content: \"+\";\n }\n }\n &-row{\n &.selected{\n background: #FFF7E7;\n }\n }\n tr.u-table-expanded-row {\n background: #f7f7f7;\n &:hover {\n background: #f7f7f7;\n }\n .u-table {\n // padding: 0 40px 0 20px;\n z-index: 1;\n }\n }\n &-column-hidden {\n display: none;\n }\n &-prev-columns-page,\n &-next-columns-page {\n cursor: pointer;\n color: #666;\n z-index: 1;\n &:hover {\n color: #2db7f5;\n }\n &-disabled {\n cursor: not-allowed;\n color: #999;\n &:hover {\n color: #999;\n }\n }\n }\n &-prev-columns-page {\n margin-right: 8px;\n &:before {\n content: \"<\";\n }\n }\n &-next-columns-page {\n float: right;\n &:before {\n content: \">\";\n }\n }\n\n &-fixed-left,\n &-fixed-right {\n position: absolute;\n top: 0;\n overflow: hidden;\n z-index: 1;\n table {\n width: auto;\n background: #fff;\n }\n }\n\n &-fixed-left {\n left: 0;\n box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);\n &-body-inner {\n margin-right: -20px;\n padding-right: 20px;\n }\n &-fixed-header & &-body-inner {\n padding-right: 0;\n }\n }\n\n &-fixed-right {\n right: 0;\n box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);\n\n // hide expand row content in right fixed Table\n // https://github.com/ant-design/ant-design/issues/1898\n &-expanded-row {\n color: transparent;\n pointer-events: none;\n }\n \n }\n \n &-scroll-position-left &-fixed-left {\n box-shadow: none;\n }\n\n &-scroll-position-right &-fixed-right {\n box-shadow: none;\n }\n\n &-thead{\n .filter-text,.filter-dropdown,.filter-date {\n font-weight: normal;\n }\n .filter-wrap{\n display: flex;\n justify-content: center;\n align-items: center;\n .filter-btns{\n min-width: 58px;\n }\n }\n th{\n background: $table-head-background-color;\n color: $table-head-text-color;\n background-clip:padding-box;\n //禁止选中文字\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none; \n /*\n Introduced in IE 10. \n */\n -ms-user-select: none;\n user-select: none;\n\n // overflow: hidden;\n // white-space: nowrap;\n // text-overflow: ellipsis;\n .bee-table-column-sorter {\n position: relative;\n margin-left: 4px;\n height: 1em;\n vertical-align: middle;\n text-align: center;\n display: inline-block;\n \n & > .bee-table-column-sorter-down,\n & > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {\n line-height: 6px;\n display: block;\n width: 34px;\n cursor: pointer;\n }\n \n }\n\n .bee-table-column-sorter-down.on .uf-triangle-down,\n .bee-table-column-sorter-down.on .uf-triangle-up,\n .bee-table-column-sorter-up.on .uf-triangle-down,\n .bee-table-column-sorter-up.on .uf-triangle-up {\n color: #108ee9;\n }\n .bee-table-column-sorter .uf-triangle-down,\n .bee-table-column-sorter .uf-triangle-up {\n -webkit-filter: none;\n filter: none;\n font-size: 12px;\n }\n .bee-table-column-sorter .uf-triangle-down,\n .bee-table-column-sorter .uf-triangle-up {\n display: inline-block;\n padding: 0;\n font-size: 12px;\n font-size: 8px\\9;\n -webkit-transform: scale(0.66666667) rotate(0deg);\n -ms-transform: scale(0.66666667) rotate(0deg);\n transform: scale(0.66666667) rotate(0deg);\n -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)\";\n zoom: 1;\n line-height: 4px;\n height: 4px;\n color: #999;\n // -webkit-transition: all 0.3s;\n // transition: all 0.3s;\n }\n &:hover{\n .bee-table-column-sorter {\n display: inline-block;\n }\n }\n }\n .th-drag{\n cursor: move;\n }\n .th-drag:hover{\n background: $hover-bg-color-base;\n }\n //为了区分是拖拽宽度还是交换列,先注释上面了\n // .th-drag:hover{\n // background:#ccc;\n // }\n .th-drag-hover{ \n background: #ccc;\n }\n &-th{\n position: relative;\n\n &-drag-gap{\n height: 100%;\n position: absolute;\n right: -10px;\n top: 0;\n // background:transparent;\n // width: 1px;\n // background:#ccc;\n width: 20px;\n \n box-sizing: border-box;\n z-index: 1;\n\n .online{\n height: 100%;\n width: 1px;\n background:transparent;//兼容火狐浏览器,如果table设置border,\n margin: 0 auto;\n }\n .online-hover{\n background:#000000;\n }\n \n }\n &-drag-gap:hover{\n cursor: col-resize;\n .online{\n background: #000000\n }\n }\n }\n &-th:last-child {\n &-drag-gap{\n border: none;\n }\n }\n }\n\n\n &-filter-column{\n \n &-pop-cont{\n margin: 0px;\n max-height: 300px;\n overflow-y: scroll;\n color:#212121;\n }\n &-clear-setting{ \n // border-bottom: 1px solid #ccc;\n cursor: pointer;\n margin-bottom: 4px;\n }\n &-cont{\n position: relative;\n }\n &-filter-icon{\n position: absolute;\n top: 8px;\n right: 18px;\n width: 22px;\n height: 25px;\n line-height: 25px;\n z-index: 2;\n background: $table-head-background-color;\n text-align: center;\n cursor: pointer;\n i.uf{\n padding: 0px;\n }\n }\n &-pop-cont-item{\n margin-top: 8px;\n // line-height: 30px;\n cursor: pointer;\n .u-checkbox {\n margin: 0px;\n\n }\n }\n &-pop-cont-item>span{\n margin-left: -3px;\n max-width: 132px;\n width: auto !important;\n min-width: 56px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n vertical-align: middle;\n }\n &-pop .u-modal-dialog{\n border: 1px solid #ccc;\n background: #fff;\n }\n }\n //拖拽宽度代码\n &-row-fixed-columns-in-body{\n // visibility: hidden;\n display:none;\n pointer-events: none;\n }\n //固定列含有checkbox 样式复写\n .u-checkbox {\n height: $checkbox-height;\n line-height: $checkbox-height;\n margin:0px;\n }\n}\n.u-table:focus{\n outline: none;\n // border-color: #9ecaed;\n // box-shadow: 0 0 10px #9ecaed;\n box-shadow: 0 0 0;\n}\n\n .u-table-bordered {\n .u-table-drag-gap{\n background:#e9e9e9;\n }\n }\n.u-table.bordered {\n table {\n border-collapse: collapse;\n }\n th,\n td {\n border: 1px solid $table-border-color;\n }\n}\n\n.move-enter,\n.move-appear {\n opacity: 0;\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-duration: 2.5s;\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n\n.move-leave {\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-duration: 0.5s;\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n\n.move-enter.move-enter-active,\n.move-appear.move-enter-active {\n animation-name: moveLeftIn;\n animation-play-state: running;\n}\n\n.move-leave.move-leave-active {\n animation-name: moveRightOut;\n animation-play-state: running;\n}\n\n@keyframes moveLeftIn {\n 0% {\n transform-origin: 0 0;\n transform: translateX(30px);\n opacity: 0;\n background: $table-move-in-color;\n }\n 20% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1;\n }\n 80% {\n background: $table-move-in-color;\n }\n 100% {\n background: transparent;\n opacity: 1;\n }\n}\n\n@keyframes moveRightOut {\n 0% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform-origin: 0 0;\n transform: translateX(-30px);\n opacity: 0;\n }\n}\n\n.formItem-style {\n height: unset;\n min-height: unset;\n padding: 0;\n}\n.errMessage-style {\n display: none;\n border: none;\n /* margin-top: 5px; */\n /* margin-bottom: 5px; */\n background: transparent;\n color: #f22c1d;\n /* padding-left: 12px; */\n /* padding-right: 12px; */\n margin: 0;\n position: absolute;\n padding: 0;\n top: 3px;\n right: 0;\n}\n\n.editable-cell {\n position: relative;\n}\n\n.editable-cell-input-wrapper,\n.editable-cell-text-wrapper {\n padding-right: 24px;\n}\n.editable-cell-input-wrapper {\n .u-form-item.formItem-style .u-label{\n display: none;\n }\n .u-input-group .u-form-control{\n height: 26px;\n font-size: 12px;\n }\n}\n\n.editable-cell-text-wrapper {\n padding: 5px 24px 5px 5px;\n height: 30px;\n}\n\n.editable-cell-icon,\n.editable-cell-icon-check {\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n cursor: pointer;\n}\n\n.editable-cell-icon {\n line-height: 28px;\n display: none;\n}\n\n.editable-cell-icon-check {\n line-height: 28px;\n}\n\n.editable-cell:hover .editable-cell-icon {\n display: inline-block;\n}\n\n.editable-cell-icon:hover,\n.editable-cell-icon-check:hover {\n color: #2db7f5;\n}\n\n.editable-add-btn {\n margin-bottom: 8px;\n}\n\n.search-component {\n margin-bottom: 20px;\n .empty-search {\n position: absolute;\n right: 45px;\n z-index: 20;\n top: 5px;\n color: #524e4e;\n cursor: pointer;\n }\n &.u-input-group.simple {\n float: right;\n }\n &.u-input-group.simple .u-form-control {\n width: 251px;\n background: #f5f5f5;\n border-color: #f5f5f5;\n border-radius: 20px;\n }\n &.u-input-group.simple .u-input-group-btn {\n top: 3px;\n right: 20px;\n position: absolute;\n }\n}\n\n\n.col-resize-container {\n height: 0px;\n position: relative;\n\n & + .table-col-resizer:first-of-type {\n table-layout: fixed;\n }\n\n .active-drag .icon{\n visibility: visible;\n }\n\n .last-handle {\n display: none;\n }\n\n .drag-handle {\n margin-left: -5px;\n position: absolute;\n z-index: 5;\n width: 10px;\n cursor: col-resize;\n\n .icon {\n color: #40b0dc;\n top: -1px;\n position: absolute;\n visibility: hidden;\n\n &:first-child {\n left: -2px\n }\n &:last-child {\n left: 6px\n }\n }\n\n &:hover{\n .icon{\n visibility: visible;\n }\n .col-resizer {\n border: 1px solid;\n }\n }\n\n &.disabled-drag {\n cursor: default;\n display: none;\n }\n\n .col-resizer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0px;\n left: 3px;\n }\n }\n}\n\n.u-filter-dropdown-menu-wrap {\n z-index: 1800;\n .u-dropdown-menu {\n li.u-dropdown-menu-item {\n line-height: $filter-form-control-height;\n height: $filter-form-control-height;\n padding: 0px 16px 0 16px;\n cursor: pointer;\n }\n }\n}\n.filter-wrap {\n .u-form-control{\n height: $filter-form-control-height;\n }\n .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {\n height: $filter-form-control-height;\n }\n}\n.u-row-hover{\n position: absolute;\n right: 24px;\n display: none;\n align-items: center;\n justify-content: center;\n background: transparent;\n}\n\n.u-row-hover2{\n position: absolute;\n left: 100;\n}\n\n// 滚动条样式复写\n::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n::-webkit-scrollbar-button {\n display: none;\n}\n::-webkit-scrollbar-thumb {\n background: #d5d5d5 !important;\n border-radius: 5px;\n}\n::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #d5d5d5;\n position: absolute;\n}\n\n::-webkit-scrollbar-track {\n display: none;\n}\n\n::-webkit-scrollbar-track-piece {\n display: none;\n}","// @import \"../node_modules/tinper-bee-core/scss/index.scss\";\n// @import \"../node_modules/bee-panel/src/Panel.scss\";\n// @import \"../node_modules/bee-layout/src/Layout.scss\";\n// @import \"../node_modules/bee-button/src/Button.scss\";\n// @import \"../node_modules/bee-transition/src/Transition.scss\";\n// @import \"../node_modules/bee-popconfirm/src/Popconfirm.scss\";\n// @import \"../node_modules/bee-form-control/src/FormControl.scss\";\n// @import \"../node_modules/bee-pagination/src/Pagination.scss\";\n// @import \"../node_modules/bee-checkbox/src/Checkbox.scss\";\n// @import \"../node_modules/bee-select/src/Select.scss\";\n// @import \"../node_modules/bee-form/src/Form.scss\";\n// @import \"../node_modules/bee-popover/src/Popover.scss\";\n// @import \"../node_modules/bee-tooltip/src/Tooltip.scss\";\n// @import \"../node_modules/bee-message/build/Message.css\";\n// @import \"../node_modules/bee-dropdown/build/Dropdown.css\";\n// @import \"../node_modules/bee-input-number/build/InputNumber.css\";\n// @import \"../node_modules/bee-modal/build/Modal.css\";\n@import \"../src/Table.scss\";\n\n\n//引入日期控件样式文件\n// @import \"../node_modules/bee-datepicker/src/datepicker.scss\";\n\n.selected{\n background: #FFF7E7;\n}\n\n.demo25{\n height: 100%;\n\n .u-table-filter-column-filter-icon{\n right: 15px;\n }\n\n}\n",".demo02 {\n .u-table-placeholder i{\n font-size: 60px;\n }\n}",".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}",".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}",".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}","th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["../node_modules/tinper-bee-core/scss/minxin-variables.scss","../src/Table.scss","TableDemo.scss","demolist/Demo02.scss","demolist/Demo04.scss","demolist/Demo161.scss","demolist/Demo32.scss","demolist/Demo53.scss"],"names":[],"mappings":"AAsXA,eAAe;AAWf,iBAAiB;AC1WjB;EACE,gBAnBmB;EAoBnB,eDkBuB;EChBvB,mBAAkB;EAClB,kBAtBgB;EAuBhB,iBAAgB,EA0iBjB;EAziBC;IAEE,mBAAkB,EACnB;EACD;IACE,mBAAkB,EAOnB;IANC;MACE,mBAAkB;MAClB,SAAQ;MACR,UAAS,EAEV;EAlBL;IAqBI,YAAW;IACX,0BAAyB;IACzB,iBAAgB,EACjB;EAxBH;IA4BI,kBA9ByB;IA+BzB,iBAAgB,EAQjB;IArCH;MAgCM,mBAAkB,EACnB;IAjCL;MAmCM,iBAAgB,EACjB;EApCL;IAwCI,4CAvD4D,EAiE7D;IAlDH;MA0CM,eAAc,EAOf;MAjDL;QA4CQ,eAAc,EACf;MA7CP;QA+CQ,eAAc,EACf;EAhDP;IAqDM,iCA1DyB,EA2D1B;EAtDL;IA+DU,+BAA8B,EAC/B;EAhET;IAoEM,eAAc,EAOf;IA3EL;MAsEQ,eAAc,EACf;IAvEP;MAyEQ,eAAc,EACf;EA1EP;IA8EI,+BD+G8D,EC9G/D;EA/EH;;IAmFI,mBA9FqB;IA+FrB,sBAAqB,EACtB;EArFH;IA0FQ,4BAA2B;IAC3B,+BAA8B,EAO/B;IAlGP;MA6FU,aAAY,EACb;IA9FT;MAgGU,aAAY,EACb;EAIP;IACE,+BAAuD,EACxD;EAED;IACE,eAAc,EACf;EACA;IAEG,qCA7H0D;IA8H1D,uBAAsB;IACtB,oBAAmB,EAEpB;EANF;IASK,iBAAgB,EACnB;EAVF;IAaK,gBAAgB,EACjB;EAdJ;IAkBG,4CA7I0D;IA8I1D,uBAAsB,EACvB;EApBF;;IAuBG,2CAlJ0D;IAmJ1D,uBAAsB,EACvB;EAEF;IAGK,iBAAgB,EACjB;EAGL;IACE,iBAAgB;IAChB,+BDgzC2E;IC/yC3E,uBDgzC+D,EC/yChE;EAlJH;IAqJI,kBAhKqB,EAiKtB;EAED;IACE,iBAAgB;IAChB,mBAAkB,EACnB;EACD;IACE,oBAAmB;IACnB,oBAAmB,EACpB;EAEA;IACC,mBAAkB,EACnB;EAED;IACE,aAAY,EAEb;EAGD;IACE,mBAAkB;IAClB,qBAAoB;IACpB,qBAAoB;IACpB,mBAAkB;IAClB,uBAAsB,EACvB;EAED;IACE,mBA/LqB;IAgMrB,yCApM4D,EAqM7D;EAED;IACE,mBAAkB,EACnB;EAED;IACE,mBAxMqB;IAyMrB,4CA7M4D,EAiN7D;IANA;MAIG,mBAAkB,EACnB;EAEH;IACE,oBA/MqB,EAgNtB;EAED;IACE,kBAA8B;IAC9B,iBAAgB;IAChB,4CAzN4D;IA0N5D,mBAAkB;IAClB,mBAAkB,EACnB;EAED;IACE,YAAW,EACZ;EACA;IAIK,iBAAgB,EACjB;EALJ;IAOK,+BAAuD,EACxD;EAEH;IACE,gBAAe;IACf,sBAAqB;IACrB,kBAAiB;IACjB,YAAW;IACX,aAAY;IACZ,mBAAkB;IAClB,kBAAiB;IACjB,qCAnP0D;IAoP1D,0BAAiB;IAAjB,uBAAiB;IAAjB,sBAAiB;IAAjB,kBAAiB;IACjB,iBAAgB;IAChB,mBAAkB,EACnB;EACD;IACE,mBAAkB,EACnB;EACD;IACE,aAAY,EACb;EAED;IACE,aAAY,EACb;EAED;IACE,aAAY,EACb;EAEF;IAEG,oBAAmB,EACpB;EA3PL;IA8PI,oBAAmB,EAQpB;IAtQH;MAgQM,oBAAmB,EACpB;IAjQL;MAoQM,WAAU,EACX;EAEH;IACE,cAAa,EACd;EACD;IAEE,gBAAe;IACf,YAAW;IACX,WAAU,EAWX;IAfA;MAMG,eAAc,EACf;IACD;MACE,oBAAmB;MACnB,YAAW,EAIZ;MANA;QAIG,YAAW,EACZ;EAGL;IACE,kBAAiB,EAIlB;IALA;MAGG,aAAY,EACb;EAEH;IACE,aAAY,EAIb;IALA;MAGG,aAAY,EACb;EAGH;IAEE,mBAAkB;IAClB,OAAM;IACN,iBAAgB;IAChB,WAAU,EAKX;IAVA;MAOG,YAAW;MACX,iBAAgB,EACjB;EAGH;IACE,QAAO;IACP,+CAA8C,EAQ/C;IAPC;MACE,oBAAmB;MACnB,oBAAmB,EACpB;IACD;MACE,iBAAgB,EACjB;EAGH;IACE,SAAQ;IACR,gDAA+C,EAShD;IALC;MACE,mBAAkB;MAClB,qBAAoB,EACrB;EAIH;IACE,iBAAgB,EACjB;EAED;IACE,iBAAgB,EACjB;EAEA;IAEG,oBAAmB,EACpB;EAHF;IAKG,qBAAa;IAAb,cAAa;IACb,sBAAuB;IAAvB,wBAAuB;IACvB,uBAAmB;IAAnB,oBAAmB,EAIpB;IAXF;MASK,gBAAe,EAChB;EAVJ;IAaG,+BD+lCyE;IC9lCzE,uBD+lC6D;IC9lC7D,6BAA2B;IAE3B,4BAA2B;IAE3B,0BAAyB;IACzB;;QAEE;IACA,sBAAqB;IACrB,kBAAiB,EA+DpB;IAvFF;MA8BK,mBAAkB;MAClB,iBAAgB;MAChB,aAAY;MACZ,uBAAsB;MACtB,mBAAkB;MAClB,sBAAqB;MACrB,iBAAgB,EAejB;MAnDJ;QAsCO,aAAY;QACZ,iBAAgB;QAChB,eA7XS,EA8XV;MAzCN;;QA6CO,kBAAiB;QACjB,eAAc;QACd,YAAW;QACX,gBAAe,EAChB;IAjDN;;;;MAyDK,eAAc,EACf;IA1DJ;;MA8DK,aAAY;MACZ,gBAAe,EAChB;IAhEJ;;MAmEK,sBAAqB;MACrB,WAAU;MACV,gBAAe;MACf,iBAAgB;MAGhB,uCAAyC;MACzC,+GAA8G;MAC9G,QAAO;MACP,iBAAgB;MAChB,YAAW;MACX,YAAW,EAGZ;IAjFJ;MAoFS,sBAAqB,EACxB;EArFN;IAyFG,aAAY,EACb;EA1FF;IA4FG,+BDnP4D,ECqP7D;EA9FF;IAoGG,iBAAgB,EACjB;EACD;IACE,mBAAkB,EAgCnB;IA9BC;MACE,aAAY;MACZ,mBAAkB;MAClB,aAAY;MACZ,OAAM;MAIN,YAAW;MAEX,uBAAsB;MACtB,WAAU,EAYX;MAvBA;QAcG,aAAY;QACZ,WAAU;QACV,wBAAsB;QACtB,eAAc,EACf;MAlBF;QAoBG,oBAAkB,EACnB;IAGH;MACE,mBAAkB,EAInB;MALA;QAGG,oBACF,EAAC;EAGJ;IAEG,aAAY,EACb;EAOH;IACE,YAAW;IACX,kBAAiB;IACjB,mBAAkB;IAClB,eAAa,EACd;EACD;IAEE,gBAAe;IACf,mBAAkB,EACnB;EACD;IACE,mBAAkB,EACnB;EACD;IACE,mBAAkB;IAClB,YAAW;IACX,aAAa;IACb,kBAAiB;IACjB,YAAY;IACZ,SAAQ;IACR,WAAU;IACV,+BDo8ByE;ICn8BzE,mBAAkB;IAClB,gBAAe,EAKhB;IAfA;MAYG,aAAY;MACZ,eAlgBW,EAmgBZ;EAEH;IACE,gBAAe;IAEf,gBAAe,EAKhB;IARA;MAKG,YAAW,EAEZ;EAEH;IACE,kBAAiB;IACjB,iBAAgB;IAChB,uBAAsB;IACtB,gBAAe;IACf,iBAAgB;IAChB,wBAAuB;IACvB,oBAAmB;IACnB,sBAAqB;IACrB,uBAAsB,EACvB;EACD;IACE,uBAAsB;IACtB,iBAAgB,EACjB;EAGH;IAEE,cAAY;IACZ,qBAAoB,EACrB;EAliBH;IAqiBI,aA3iBiB;IA4iBjB,kBA5iBiB;IA6iBjB,YAAU,EAQX;IA/iBH;MAyiBM,kBA/iBe,EAojBhB;MA9iBL;QA2iBQ,YAjjBa;QAkjBb,aAljBa,EAmjBd;;AAIP;EACE,cAAa;EAGb,kBAAiB,EAClB;;AAEC;EAEI,oBAAkB,EACnB;;AAEL;EAEI,0BAAyB,EAC1B;;AAHH;;EAMI,qCAllB4D,EAmlB7D;;AAGH;;EAEE,WAAU;EACV,+DAA8D;EAC9D,yBAAwB;EACxB,0BAAyB;EACzB,6BAA4B,EAC7B;;AAED;EACE,kEAAiE;EACjE,yBAAwB;EACxB,0BAAyB;EACzB,6BAA4B,EAC7B;;AAED;;EAEE,2BAA0B;EAC1B,8BAA6B,EAC9B;;AAED;EACE,6BAA4B;EAC5B,8BAA6B,EAC9B;;AAED;EACE;IACE,sBAAqB;IACrB,4BAA2B;IAC3B,WAAU;IACV,6BDhkB+C,EAAA;ECkkBjD;IACE,sBAAqB;IACrB,yBAAwB;IACxB,WAAU,EAAA;EAEZ;IACE,6BDxkB+C,EAAA;EC0kBjD;IACE,wBAAuB;IACvB,WAAU,EAAA,EAAA;;AAId;EACE;IACE,sBAAqB;IACrB,yBAAwB;IACxB,WAAU,EAAA;EAEZ;IACE,sBAAqB;IACrB,6BAA4B;IAC5B,WAAU,EAAA,EAAA;;AAId;EACE,cAAa;EACb,kBAAiB;EACjB,WAAU,EACX;;AACD;EACE,cAAa;EACb,aAAY;EACZ,sBAAsB;EACtB,yBAAyB;EACzB,wBAAuB;EACvB,eAAc;EACd,yBAAyB;EACzB,0BAA0B;EAC1B,UAAS;EACT,mBAAkB;EAClB,WAAU;EACV,SAAQ;EACR,SAAQ,EACT;;AAED;EACE,mBAAkB,EACnB;;AAED;;EAEE,oBAAmB,EACpB;;AACD;EAEI,cAAa,EACd;;AAHH;EAKI,aAAY;EACZ,gBAAe,EAChB;;AAGH;EACE,0BAAyB;EACzB,aAAY,EACb;;AAED;;EAEE,mBAAkB;EAClB,OAAM;EACN,SAAQ;EACR,YAAW;EACX,gBAAe,EAChB;;AAED;EACE,kBAAiB;EACjB,cAAa,EACd;;AAED;EACE,kBAAiB,EAClB;;AAED;EACE,sBAAqB,EACtB;;AAED;;EAEE,eAAc,EACf;;AAED;EACE,mBAAkB,EACnB;;AAED;EACE,oBAAmB,EAuBpB;EAxBD;IAGI,mBAAkB;IAClB,YAAW;IACX,YAAW;IACX,SAAQ;IACR,eAAc;IACd,gBAAe,EAChB;EATH;IAWI,aAAY,EACb;EAZH;IAcI,aAAY;IACZ,oBAAmB;IACnB,sBAAqB;IACrB,oBAAmB,EACpB;EAlBH;IAoBI,SAAQ;IACR,YAAW;IACX,mBAAkB,EACnB;;AAIH;EACE,YAAW;EACX,mBAAkB,EAyDnB;EA3DD;IAKI,oBAAmB,EACpB;EANH;IASI,oBAAmB,EACpB;EAVH;IAaI,cAAa,EACd;EAdH;IAiBI,kBAAiB;IACjB,mBAAkB;IAClB,WAAU;IACV,YAAW;IACX,mBAAkB,EAqCnB;IA1DH;MAwBM,eAAc;MACd,UAAS;MACT,mBAAkB;MAClB,mBAAkB,EAQnB;MAnCL;QA8BQ,WACF,EAAC;MA/BP;QAiCQ,UACF,EAAC;IAlCP;MAuCQ,oBAAmB,EACpB;IAxCP;MA0CQ,kBAAiB,EAClB;IA3CP;MA+CM,gBAAe;MACf,cAAa,EACd;IAjDL;MAoDM,mBAAkB;MAClB,WAAU;MACV,aAAY;MACZ,SAAQ;MACR,UAAS,EACV;;AAIL;EACI,cAAa,EAShB;EAVD;IAIY,kBA9yBoB;IA+yBpB,aA/yBoB;IAgzBpB,yBAAwB;IACxB,gBAAe,EAClB;;AAGT;EAEI,aAvzB4B,EAwzB7B;;AAHH;EAKI,aA1zB4B,EA2zB7B;;AAEH;EACE,mBAAkB;EAClB,YAAW;EACX,cAAa;EACb,uBAAmB;EAAnB,oBAAmB;EACnB,sBAAuB;EAAvB,wBAAuB;EACvB,wBAAuB,EACxB;;AAED;EACE,mBAAkB;EAClB,UAAS,EACV;;AAGD;EACE,WAAU;EACV,YAAW,EACZ;;AACD;EACE,cAAa,EACd;;AACD;EACE,+BAA8B;EAC9B,mBAAkB,EACnB;;AACD;EACE,mBAAkB;EAClB,0BAAyB;EACzB,mBAAkB,EACnB;;AAED;EACE,cAAa,EACd;;AAED;EACE,cAAa,EACd;;ACh2BD;EACE,oBAAmB,EACpB;;AAED;EACE,aAAY,EAMb;EAPD;IAII,YAAW,EACZ;;AChCH;EAEQ,gBAAe,EAClB;;ACHL;EAEQ,oBAAmB,EACtB;;AAHL;EAKQ,oBAAmB,EACtB;;;ACNL;EAEQ,oBAAmB,EACtB;;AAHL;EAKQ,qBAAa;EAAb,cAAa;EACb,uBAAmB;EAAnB,oBAAmB;EACnB,sBAAuB;EAAvB,wBAAuB,EAC1B;;ACRL;EAEQ,iBAAgB;EAChB,oBAAmB,EACtB;;ACJL;EAGY,gBAAe;EACf,mBAAkB;EAClB,kBAAiB,EACpB;;AANT;EAYgB,oBAAmB,EAC1B","file":"demo.css","sourcesContent":["\r\n\r\n// $performance_font: 'Helvetica', 'Arial', sans-serif !default;\r\n\r\n@import \"minxin-colors\";\r\n\r\n\r\n\r\n@function strip-units($number) {\r\n @return $number / ($number * 0 + 1);\r\n}\r\n$unit: 10px !default;\r\n// IMAGES\r\n$image_path: '/images' !default;\r\n\r\n\r\n\r\n//默认颜色\r\n$trim-color-classes: false !default;\r\n\r\n@import \"minxin-themeColors\";\r\n\r\n//对比色\r\n$color-primary-contrast: $color-dark-contrast !default;\r\n$color-accent-contrast: $color-dark-contrast !default;\r\n//字体颜色\r\n$color-text: $palette-grey-900 !default;\r\n\r\n//不明所以 $primary-color: unquote(\"rgba(#{$palette-grey-500}, 0.20)\") !default;\r\n\r\n// -- Fonts 字体大小权重预定义\r\n$preferred-font: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei',sans-serif !default;\r\n$font-size: 1.6 * $unit !default;\r\n$font-size-tiny: 1.2 * $unit !default;\r\n$font-size-small: 1.4 * $unit !default;\r\n$font-size-normal: $font-size !default;\r\n$font-size-big: 1.8 * $unit !default;\r\n$font-weight-thin: 300 !default;\r\n$font-weight-normal: 400 !default;\r\n$font-weight-semi-bold: 500 !default;\r\n$font-weight-bold: 700 !default;\r\n$font-color:unquote(\"rgb(#{$palette-u-gray-800})\") !default;\r\n// 白色背景下的文字颜色\r\n$font-color-base: #212121 !default;\r\n\r\n$font-weight-override: false;\r\n$font-weight-light: 300;\r\n$font-weight-normal: 400;\r\n$font-weight-medium: 500;\r\n$font-weight-bold: 700;\r\n$font-weight-base: $font-weight-normal;\r\n\r\n\r\n\r\n\r\n$gray-base: unquote(\"rgb(#{$palette-grey-900})\") !default;\r\n$gray-darkest: unquote(\"rgb(#{$palette-grey-800})\") !default;\r\n$gray-darker: unquote(\"rgb(#{$palette-grey-700})\") !default;\r\n$gray-dark: unquote(\"rgb(#{$palette-grey-600})\") !default;\r\n$gray: unquote(\"rgb(#{$palette-grey-500})\") !default;\r\n$gray-light: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n$gray-lighter: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n$gray-lightest:unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$inverse: unquote(\"rgb(#{$color-white})\") !default;\r\n// $border-color-base: $gray-lighter;\r\n$border-color-base: unquote(\"rgb(#{$border-color})\") !default;\r\n$line-height-base: 1.57142857;\r\n\r\n// 边框圆角\r\n$border-radius-base: $border-radius;\r\n\r\n// 阴影\r\n\r\n$shadow-key-umbra-opacity: 0.2 !default;\r\n$shadow-key-penumbra-opacity: 0.14 !default;\r\n$shadow-ambient-shadow-opacity: 0.12 !default;\r\n\r\n$shadow-base: 0 1px 5px $gray-lighter;\r\n\r\n\r\n\r\n//-- Indexes\r\n$z-index-highest: 300;\r\n$z-index-higher: 200;\r\n$z-index-high: 100;\r\n$z-index-normal: 1;\r\n$z-index-low: -100;\r\n$z-index-lower: -200;\r\n\r\n$zindex-modal: 1700;\r\n$zindex-modal-background: 1600;\r\n$zIndex-notification: 1560;\r\n$zIndex-message: 1550;\r\n$zIndex-popconfirm: 1540;\r\n$zIndex-popover: 1540;\r\n$zIndex-tooltip: 1530;\r\n$zIndex-alert: 1510;\r\n$zindex-navbar-fixed: 1500;\r\n$zindex-menubar: 1400;\r\n$zindex-overlay: 1300;\r\n$zindex-dropdown: 1200;\r\n$zindex-navbar: 1200;\r\n$zindex-header: 1100;\r\n$zindex-footer: 1000;\r\n$zindex-backtop:2000;\r\n\r\n// 文本字体\r\n\r\n//todo\r\n$text-color-primary: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$text-link-color: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n$target-elements-directly: true !default;\r\n\r\n\r\n$global-selected-color: unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n\r\n\r\n// 控件\r\n$cursor-disabled: not-allowed;\r\n\r\n\r\n$title-color: $gray-darkest;\r\n//todo\r\n$subtitle-color: $gray-darker;\r\n$text-color: $gray-dark;\r\n\r\n$prompt-color: $gray;\r\n//全局不同状态颜色\r\n//todo\r\n$active-color-base: unquote(\"rgb(#{$palette-blue-800})\") !default;\r\n$normal-color-base: unquote(\"rgb(#{$palette-blue-600})\") !default;\r\n$hover-color-base: unquote(\"rgb(#{$palette-blue-400})\") !default;\r\n\r\n$bg-color-base: $gray-lightest;\r\n\r\n//disable颜色\r\n$disabled-color-base: #909090;\r\n$disabled-border-color: $gray-lighter;\r\n$disabled-bg-color: $gray-lightest;\r\n\r\n// 全局链接颜色\r\n$link-color: $normal-color-base;\r\n$link-hover-color: $hover-color-base;\r\n$link-active-color: $active-color-base;\r\n\r\n// 品牌色\r\n$brand-default: $gray-lighter;\r\n$brand-default-hover: $gray-lightest;\r\n$brand-default-active: $gray-light;\r\n// $brand-default: unquote(\"rgb(#{$color-primary})\");\r\n// $brand-default-hover: unquote(\"rgb(#{$color-primary-light})\");\r\n// $brand-default-active: unquote(\"rgb(#{$color-primary-dark})\");\r\n\r\n$brand-primary : unquote(\"rgb(#{$primary-color})\") !default;\r\n$brand-primary-hover: unquote(\"rgb(#{$primary-color-light})\") !default;\r\n$brand-primary-active: unquote(\"rgb(#{$primary-color-dark})\") !default;\r\n\r\n$brand-secondary : unquote(\"rgb(#{$secondary-color})\") !default;\r\n$brand-secondary-hover: unquote(\"rgb(#{$secondary-color-light})\") !default;\r\n$brand-secondary-active: unquote(\"rgb(#{$secondary-color-dark})\") !default;\r\n\r\n$brand-success: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$brand-success-hover: unquote(\"rgb(#{$palette-green-300})\") !default;\r\n$brand-success-active: unquote(\"rgb(#{$palette-green-700})\") !default;\r\n\r\n$brand-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\r\n$brand-info-hover: unquote(\"rgb(#{$palette-cyan-300})\") !default;\r\n$brand-info-active: unquote(\"rgb(#{$palette-cyan-700})\") !default;\r\n\r\n$brand-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\r\n$brand-warning-hover: unquote(\"rgb(#{$palette-orange-300})\") !default;\r\n$brand-warning-active: unquote(\"rgb(#{$palette-orange-700})\") !default;\r\n\r\n\r\n$brand-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\r\n$brand-news-hover: unquote(\"rgb(#{$palette-blue-300})\") !default;\r\n$brand-news-active: unquote(\"rgb(#{$palette-blue-700})\") !default;\r\n\r\n$brand-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$brand-danger-hover: unquote(\"rgb(#{$palette-red-300})\") !default;\r\n$brand-danger-active: unquote(\"rgb(#{$palette-red-700})\") !default;\r\n\r\n$brand-dark: $gray-darker;\r\n$brand-dark-hover: $gray-dark;\r\n$brand-dark-active: $gray-darkest;\r\n\r\n$brand-light : unquote(\"rgb(#{$color-dark-contrast})\") !default;\r\n$brand-light-hover: unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$brand-light-active: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n\r\n$brand-light-primary : unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n$brand-light-success: unquote(\"rgb(#{$palette-green-100})\") !default;\r\n$brand-light-info: unquote(\"rgb(#{$palette-cyan-100})\") !default;\r\n$brand-light-warning: unquote(\"rgb(#{$palette-orange-100})\") !default;\r\n$brand-light-news: unquote(\"rgb(#{$palette-blue-100})\") !default;\r\n$brand-light-danger: unquote(\"rgb(#{$palette-red-100})\") !default;\r\n\r\n//不同背景下对应的文字颜色\r\n\r\n$color-news: unquote(\"rgb(#{$palette-blue-500})\") !default;\r\n$color-success: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$color-info: unquote(\"rgb(#{$palette-cyan-500})\") !default;\r\n$color-warning: unquote(\"rgb(#{$palette-orange-500})\") !default;\r\n$color-danger: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$color-light: $gray-darker !default;\r\n\r\n//redius\r\n\r\n$default-border-radius: $border-radius;\r\n\r\n// hover时的背景色,包括select、dropdown、table、datepicker、tree、menu等组件\r\n$hover-bg-color-base: unquote(\"rgb(#{$item-hover-bg-color-base})\") !default;\r\n// // selected背景色,包括:select、menu等\r\n$selected-bg-color-base: unquote(\"rgb(#{$item-selected-bg-color-base})\") !default;\r\n\r\n// UButton\r\n\r\n// Button 基础背景色.\r\n// 默认按钮()\r\n$button-default-color: unquote(\"rgb(#{$default-color})\");\r\n$button-default-color-IE8: unquote(\"rgb(#{$default-color})\");\r\n\r\n// 边框按钮(shape:'border')\r\n$button-border-bg-color: unquote(\"rgb(#{$color-dark-contrast})\");\r\n\r\n// Button 不同状态下的背景色 :hover、active、focus状态.\r\n$button-hover-color: unquote(\"rgb(#{$default-color-light})\");\r\n$button-active-color: unquote(\"rgb(#{$default-color-dark})\");\r\n$button-focus-color: unquote(\"rgb(#{$default-color-light})\");\r\n\r\n// Button 配置不同colors属性时的背景色.\r\n$button-primary-color: $brand-primary;\r\n$button-primary-active-color: $brand-primary-active;\r\n$button-primary-hover-color: $brand-primary-hover;\r\n$button-secondary-color: $brand-secondary;\r\n$button-secondary-active-color: $brand-secondary-active;\r\n$button-secondary-hover-color: $brand-secondary-hover;\r\n$button-success-color: $brand-success;\r\n$button-success-active-color: $brand-success-active;\r\n$button-success-hover-color: $brand-success-hover;\r\n$button-info-color: $brand-info;\r\n$button-info-active-color: $brand-info-active;\r\n$button-info-hover-color: $brand-info-hover;\r\n$button-warning-color: $brand-warning;\r\n$button-warning-active-color: $brand-warning-active;\r\n$button-warning-hover-color: $brand-warning-hover;\r\n$button-danger-color: $brand-danger;\r\n$button-danger-active-color: $brand-danger-active;\r\n$button-danger-hover-color: $brand-danger-hover;\r\n$button-dark-color: $brand-dark;\r\n$button-dark-active-color: $brand-dark-active;\r\n$button-dark-hover-color: $brand-dark-hover;\r\n$button-light-color: $brand-light;\r\n$button-light-active-color: $brand-light-active;\r\n$button-light-hover-color: $brand-light-hover;\r\n\r\n// Button 文字颜色.\r\n// 主按钮(colors:'primary')\r\n$button-primary-text-color: unquote(\"rgb(#{$text-color-base})\") !default;\r\n$button-text-color: $button-primary-text-color;\r\n// 次按钮(colors:'secondary')\r\n$button-second-text-color: unquote(\"rgb(#{$button-secondary-text-color})\") !default;\r\n// 默认按钮()\r\n$button-default-text-color: unquote(\"rgb(#{$palette-grey-900})\") !default;\r\n// 边框按钮(shape:'border')\r\n// $button-border-text-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n// Button 边框样式及颜色.\r\n$button-border-style: unquote(\"solid\") !default;\r\n$button-border-color: $border-color-base;\r\n$button-default-border-color: $button-default-color !default;\r\n\r\n// Button 不同状态下的边框颜色 :hover、active、focus状态.\r\n$button-hover-border-color: $brand-default-hover;\r\n$button-active-border-color: $brand-default-active;\r\n$button-focus-border-color: $brand-default-active;\r\n\r\n// FAB colors and sizes.\r\n$button-fab-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\r\n$button-fab-hover-color-alt: unquote(\"rgb(#{$color-accent-light})\") !default;\r\n$button-fab-active-color-alt: unquote(\"rgb(#{$color-accent})\") !default;\r\n$button-fab-text-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n$button-fab-ripple-color-alt: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n\r\n// Icon button colors and sizes.\r\n$button-icon-color: unquote(\"rgb(#{$palette-grey-700})\") !default;\r\n$button-icon-focus-color: $button-focus-color !default;\r\n\r\n// Button 最小宽度、高度、内边距、外边距、行高、边框粗细、圆角.\r\n$button-min-width: 72/10 * $unit !default;\r\n$button-height: 36/10 * $unit !default;\r\n$button-padding: 4/10* $unit 13/10 * $unit !default;\r\n$button-padding-IE8: 4px 13px !default;\r\n$button-top-padding: 1310 * $unit !default;\r\n$button-left-padding: 6/10* $unit !default;\r\n$button-line-height:1.57142857;\r\n$button-margin: 4/10 * $unit !default;\r\n$button-border-radius: 3/10 * $unit !default;\r\n$button-border-width: 1/10 * $unit !default;\r\n\r\n$button-fab-size: 38/10 * $unit !default;\r\n$button-fab-size-mini: 30/10 * $unit !default;\r\n$button-fab-font-size: 14/10 * $unit !default;\r\n\r\n$button-icon-size: 32/10 * $unit !default;\r\n$button-icon-size-mini: 13/10 * $unit !default;\r\n\r\n$button-raised-font-size: 14/10 * $unit !default;\r\n\r\n// Button 大按钮\r\n$button-padding-y-lg:8px;\r\n$button-padding-x-lg:15px;\r\n$font-size-lg:1.4 * $unit;\r\n\r\n\r\n// Button 特大型按钮\r\n$button-padding-y-xg:10.5px;\r\n$button-padding-x-xg:18px;\r\n$font-size-xg:1.6 * $unit;\r\n\r\n\r\n// Button 小型按钮\r\n$button-padding-y-sm:3px;\r\n$button-padding-x-sm:5px;\r\n$font-size-sm:1.2 * $unit;\r\n\r\n\r\n\r\n// UText\r\n\r\n\r\n$form-control-border-radius: $border-radius-base;\r\n$form-control-default-font-size: 14px;\r\n$form-control-lg-font-size: 14px;\r\n$form-control-sm-font-size: 12px;\r\n$form-control-default-height: 32px;\r\n$form-control-lg-height: 40px;\r\n$form-control-sm-height: 26px;\r\n$form-control-color: #424242;\r\n$form-control-bg-color: #fff;\r\n$form-control-border-color: $border-color-base;\r\n$form-control-disable-bg-color: #F7F9FB;\r\n$form-control-disable-color: $disabled-color-base;\r\n$form-control-disable-border-color: #DFE1E6;\r\n\r\n$input-text-background-color: transparent !default;\r\n$input-text-label-color: unquote(\"rgba(#{$color-black}, 0.26)\") !default;\r\n$input-text-bottom-border-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\r\n$input-text-bottom-border-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\r\n$input-text-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$input-text-disabled-color: $input-text-bottom-border-color !default;\r\n$input-text-disabled-text-color: $input-text-label-color !default;\r\n$input-text-error-color: unquote(\"rgb(222, 50, 38)\") !default;\r\n$input-text-must-color:unquote(\"rgb(#{$palette-red-A700})\") !default;\r\n\r\n\r\n$input-text-font-size: 14px !default;\r\n$input-text-width: 100% !default;\r\n$input-text-padding: 4px !default;\r\n$input-text-vertical-spacing: 20px !default;\r\n\r\n$input-text-button-size: 32px !default;\r\n$input-text-floating-label-fontsize: 12px !default;\r\n$input-text-expandable-icon-top: 16px !default;\r\n$input-text-height:36px !default;\r\n$input-text-normal-width:360px !default;\r\n$input-text-short-width:180px !default;\r\n$input-text-normal-border-color:unquote(\"rgb(#{$palette-u-gray-400})\") !default;\r\n$input-text-color:unquote(\"rgb(#{$palette-u-gray-A200})\") !default;\r\n$input-text-focus-border-color:unquote(\"rgb(#{$palette-u-blue-400})\") !default;\r\n$input-lable-color:unquote(\"rgb(#{$palette-u-gray-900})\") !default;\r\n\r\n\r\n/* FormGroup */\r\n\r\n$error-input-border:$brand-danger;\r\n$warning-input-border:$brand-warning;\r\n$success-input-border:$brand-success;\r\n$success-addon-bg: $brand-light-success;\r\n$warning-addon-bg: $brand-light-warning;\r\n$error-addon-bg: $brand-light-danger;\r\n$form-group-margin-top: 15px;\r\n$form-group-margin-bottom: 15px;\r\n\r\n/* Navlayout */\r\n\r\n$layout-nav-color: unquote(\"rgb(#{$palette-grey-100})\") !default;\r\n\r\n// Drawer\r\n$layout-drawer-bg-color: unquote(\"rgb(#{$palette-grey-50})\") !default;\r\n$layout-drawer-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n$layout-text-color: unquote(\"rgb(#{$palette-grey-800})\") !default;\r\n$layout-drawer-navigation-color: #757575 !default;\r\n$layout-drawer-navigation-link-active-background: unquote(\"rgb(#{$palette-grey-200})\") !default;\r\n$layout-drawer-navigation-link-active-color: $layout-text-color !default;\r\n\r\n// Header\r\n$layout-header-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$layout-header-text-color: unquote(\"rgb(#{$color-primary-contrast})\") !default;\r\n$layout-header-nav-hover-color: unquote(\"rgba(#{$palette-grey-700}, 0.6)\") !default;\r\n$layout-header-tab-text-color: unquote(\"rgba(#{$color-primary-contrast}, 0.6)\") !default;\r\n\r\n// Tabs\r\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n$layout-nav-link-font-size: 13px !default;\r\n\r\n$layout-drawer-narrow: 240px !default;\r\n$layout-drawer-wide: 456px !default;\r\n$layout-drawer-width: $layout-drawer-narrow !default;\r\n\r\n$layout-header-icon-size: 32px !default;\r\n$layout-screen-size-threshold: 1024px !default;\r\n$layout-header-icon-margin: 24px !default;\r\n$layout-drawer-button-mobile-size: 44px !default;\r\n$layout-drawer-button-desktop-size: 34px !default;\r\n$layout-drawer-button-desktop-margin-top: 5px !default;\r\n$layout-drawer-button-mobile-margin-top: 10px !default;\r\n\r\n$layout-header-mobile-row-height: 56px !default;\r\n$layout-mobile-header-height: $layout-header-mobile-row-height;\r\n$layout-header-desktop-row-height: 44px !default;\r\n$layout-desktop-header-height: $layout-header-desktop-row-height;\r\n\r\n$layout-header-desktop-baseline: 80px !default;\r\n$layout-header-mobile-baseline: 72px !default;\r\n$layout-header-mobile-indent: 16px !default;\r\n$layout-header-desktop-indent: 40px !default;\r\n\r\n$layout-tab-font-size: 14px !default;\r\n$layout-tab-bar-height: 48px !default;\r\n$layout-tab-mobile-padding: 12px !default;\r\n$layout-tab-desktop-padding: 24px !default;\r\n$layout-tab-highlight-thickness: 2px !default;\r\n\r\n// gridlayout\r\n\r\n// Extra small screen / phone\r\n//$screen-xs: 480px;\r\n\r\n$screen-xs-min: 480px;\r\n// Deprecated `@screen-phone` as of v3.0.1\r\n//@screen-phone: @screen-xs-min;\r\n\r\n// Small screen / tablet\r\n// Deprecated `@screen-sm` as of v3.0.1\r\n//@screen-sm: 768px;\r\n$screen-sm-min: 768px;\r\n// Deprecated `@screen-tablet` as of v3.0.1\r\n//@screen-tablet: @screen-sm-min;\r\n\r\n// Medium screen / desktop\r\n// Deprecated `@screen-md` as of v3.0.1\r\n//@screen-md: 992px;\r\n$screen-md-min: 992px;\r\n// Deprecated `@screen-desktop` as of v3.0.1\r\n//@screen-desktop: @screen-md-min;\r\n\r\n// Large screen / wide desktop\r\n// Deprecated `@screen-lg` as of v3.0.1\r\n//@screen-lg: 1200px;\r\n$screen-lg-min: 1200px;\r\n// Deprecated `@screen-lg-desktop` as of v3.0.1\r\n//@screen-lg-desktop: @screen-lg-min;\r\n$screen-xs-max: ($screen-sm-min - 1 );\r\n\r\n$screen-sm-max: ($screen-sm-min - 1 );\r\n\r\n$screen-md-max: ($screen-lg-min - 1 );\r\n\r\n\r\n\r\n\r\n// Number of columns in the grid.\r\n$grid-columns: 12;\r\n// Padding between columns. Gets divided in half for the left and right.\r\n$grid-gutter-width: 30px;\r\n// Navbar collapse\r\n// Point at which the navbar becomes uncollapsed.\r\n$grid-float-breakpoint: 768px;\r\n// Point at which the navbar begins collapsing.\r\n$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);\r\n\r\n\r\n// Small screen / tablet\r\n$container-tablet: (720px + $grid-gutter-width);\r\n// For `@screen-sm-min` and up.\r\n$container-sm: $container-tablet;\r\n\r\n// Medium screen / desktop\r\n$container-desktop: (940px + $grid-gutter-width);\r\n// For `@screen-md-min` and up.\r\n$container-md: $container-desktop;\r\n\r\n// Large screen / wide desktop\r\n$container-large-desktop: (1140px + $grid-gutter-width);\r\n// For `@screen-lg-min` and up.\r\n$container-lg: $container-large-desktop;\r\n\r\n\r\n\r\n// menu\r\n\r\n$default-dropdown-bg-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$menu-expand-duration: 0.3s !default;\r\n$menu-fade-duration: 0.2s !default;\r\n\r\n// Default Item Colors\r\n$default-item-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$default-item-text-color-IE8: unquote(\"rgb(#{$color-black})\") !default;\r\n$default-item-outline-color: unquote(\"rgb(#{$palette-u-blue-400})\") !default;\r\n$default-item-hover-bg-color: unquote(\"rgb(#{$palette-u-blue-100})\") !default;\r\n$default-item-focus-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\r\n$default-item-active-bg-color: unquote(\"rgb(#{$palette-u-blue-200})\") !default;\r\n$default-item-divider-color: unquote(\"rgba(#{$color-black}, 0.12)\") !default;\r\n\r\n// Disabled Button Colors\r\n$disabled-item-text-color: unquote(\"rgb(#{$palette-grey-400})\") !default;\r\n\r\n// Tile\r\n$tile-width: 100%;\r\n\r\n$tile-default-border-color: #e9e9e9;\r\n$tile-default-hover-shadow-color: rgba(0, 0, 0, 0.2);\r\n\r\n$tile-primary-border-color: $button-primary-color;\r\n$tile-primary-hover-shadow-color: $button-primary-hover-color;\r\n\r\n$tile-danger-border-color: $button-danger-color;\r\n$tile-danger-hover-shadow-color: $button-danger-hover-color;\r\n\r\n$tile-warning-border-color: $button-warning-color;\r\n$tile-warning-hover-shadow-color: $button-warning-hover-color;\r\n\r\n$tile-success-border-color: $button-success-color;\r\n$tile-success-hover-shadow-color: $button-success-hover-color;\r\n\r\n$tile-info-border-color: $button-info-color;\r\n$tile-info-hover-shadow-color: $button-info-hover-color;\r\n\r\n// Alert\r\n$alert-news-bg: $brand-light-news;\r\n$alert-success-bg: $brand-light-success;\r\n$alert-info-bg: $brand-light-info;\r\n$alert-warning-bg: $brand-light-warning;\r\n$alert-danger-bg: $brand-light-danger;\r\n\r\n\r\n$alert-dark-news-bg: $brand-news;\r\n$alert-dark-success-bg: $brand-success;\r\n$alert-dark-info-bg: $brand-info;\r\n$alert-dark-warning-bg: $brand-warning;\r\n$alert-dark-danger-bg: $brand-danger;\r\n\r\n$alert-news-color: $color-news;\r\n$alert-success-color: $color-success;\r\n$alert-info-color: $color-info;\r\n$alert-warning-color: $color-warning;\r\n$alert-danger-color: $color-danger;\r\n\r\n$timeline-primary-color: $brand-primary;\r\n$timeline-news-color: $color-news;\r\n$timeline-success-color: $color-success;\r\n$timeline-info-color: $color-info;\r\n$timeline-warning-color: $color-warning;\r\n$timeline-danger-color: $color-danger;\r\n\r\n$alert-padding:10px;\r\n$alert-font-size:12px;\r\n$alert-border-radius: $border-radius;\r\n$alert-text-padding-left: 15px;\r\n$alert-text-padding-right: 15px;\r\n$alert-close-font-size: 21px;\r\n$alert-close-opacity: .2;\r\n$alert-close-font-weight: 700;\r\n\r\n//Checkbox\r\n\r\n$checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$checkbox-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-disabled-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$checkbox-focus-color: unquote(\"rgba(#{$palette-u-blue-500}, 0.26)\") !default;\r\n$checkbox-image-path: $image_path;\r\n\r\n$checkbox-label-font-size: 13px !default;\r\n$checkbox-label-height: 24px !default;\r\n$checkbox-button-size: 16px !default;\r\n$checkbox-inner-margin: 2px !default;\r\n$checkbox-padding: 8px !default;\r\n$checkbox-top-offset:\r\n ($checkbox-label-height - $checkbox-button-size - $checkbox-inner-margin) / 2;\r\n$checkbox-ripple-size: $checkbox-label-height * 1.5;\r\n\r\n$checkbox-primary-bg: $brand-primary;\r\n$checkbox-success-bg: $brand-success;\r\n$checkbox-info-bg: $brand-info;\r\n$checkbox-warning-bg: $brand-warning;\r\n$checkbox-danger-bg: $brand-danger;\r\n$checkbox-dark-bg: $brand-dark;\r\n\r\n$progress-primary-bg: $brand-primary;\r\n$progress-success-bg: $brand-success;\r\n$progress-info-bg: $brand-info;\r\n$progress-warning-bg: $brand-warning;\r\n$progress-danger-bg: $brand-danger;\r\n$progress-dark-bg: $brand-dark;\r\n\r\n$primary-color-opacity:unquote(\"rgba(#{$primary-color}, 0.7)\") !default;\r\n$color-success-opacity:unquote(\"rgba(#{$palette-green-500}, 0.7)\") !default;\r\n$color-info-opacity:unquote(\"rgba(#{$palette-cyan-500}, 0.7)\") !default;\r\n$color-warning-opacity:unquote(\"rgba(#{$palette-orange-500}, 0.7)\") !default;\r\n$color-danger-opacity:unquote(\"rgba(#{$palette-red-500}, 0.7)\") !default;\r\n$color-dark-opacity:unquote(\"rgba(#{$palette-grey-700}, 0.7)\") !default;\r\n\r\n\r\n$progress-sm-height: 10px;\r\n$progress-xs-height: 5px;\r\n$progress-xs-width: 170px;\r\n$progress-default-height: 20px;\r\n$progress-sm-lable-font-size: 10px;\r\n$progress-sm-lable-line-height: 10px;\r\n$progress-xs-lable-line-height: 8px;\r\n$progress-xs-lable-margin-left: 140px;\r\n$progress-xs-lable-font-size: 10px;\r\n$progress-xs-lable-color: #000;\r\n\r\n// Radio\r\n\r\n$radio-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$radio-off-color: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$radio-off-color-IE8: unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$radio-disabled-color: $disabled-color-base !default;\r\n\r\n$radio-label-font-size: 13px !default;\r\n$radio-label-height: 32px !default;\r\n$radio-button-size: 16px !default;\r\n$radio-inner-margin: $radio-button-size / 4;\r\n$radio-padding: 8px !default;\r\n$radio-top-offset: ($radio-label-height - $radio-button-size) / 2;\r\n$radio-ripple-size: 42px !default;\r\n\r\n$radio-primary-bg: $brand-primary;\r\n$radio-success-bg: $brand-success;\r\n$radio-info-bg: $brand-info;\r\n$radio-warning-bg: $brand-warning;\r\n$radio-danger-bg: $brand-danger;\r\n$radio-dark-bg: $brand-dark;\r\n\r\n$radio-disabled-bg: #f7f7f7;\r\n$radio-diabled-border-color: #d9d9d9;\r\n\r\n$radio-border-color: #d9d9d9;\r\n$radio-bg-color: #fff;\r\n$radio-color:#212121;\r\n\r\n$radio-checked-bg-color: #fff;\r\n$radio-checked-color: $brand-primary;\r\n$radio-checked-border-color: $radio-checked-color;\r\n\r\n$radio-icon-height: 18px;\r\n$radio-icon-width: 18px;\r\n$radio-icon-checked-height: 8px;\r\n$radio-icon-checked-width: 8px;\r\n\r\n$radio-button-lg-height:42px;\r\n$radio-button-lg-line-height:26px;\r\n\r\n$radio-button-sm-height:22px;\r\n$radio-button-sm-line-height:20px;\r\n\r\n$radio-button-height: 28px;\r\n$radio-button-line-height: 26px;\r\n\r\n\r\n\r\n\r\n\r\n//loading\r\n\r\n$loading-color-1: unquote(\"rgb(#{$palette-blue-400})\") !default;\r\n$loading-color-2: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$loading-color-3: unquote(\"rgb(#{$palette-yellow-600})\") !default;\r\n$loading-color-4: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n\r\n$loading-single-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n$loading-size: 28px !default;\r\n$loading-stroke-width: 3px !default;\r\n\r\n// Amount of circle the arc takes up.\r\n$loading-arc-size: 270deg !default;\r\n// Time it takes to expand and contract arc.\r\n$loading-arc-time: 1333ms !default;\r\n// How much the start location of the arc should rotate each time.\r\n$loading-arc-start-rot: 216deg !default;\r\n\r\n$loading-duration: 360 * $loading-arc-time / (\r\n strip-units($loading-arc-start-rot + (360deg - $loading-arc-size)));\r\n\r\n// datetimepicker\r\n$timepicker-border-gap-color:#ccc;\r\n$timepicker-font-size:14px;\r\n\r\n$date-bg-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n\r\n// message\r\n$snackbar-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$snackbar-background-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$snackbar-color-cancel: unquote(\"rgb(#{$palette-red-500})\") !default;\r\n$snackbar-color-accept: unquote(\"rgb(#{$palette-green-500})\") !default;\r\n$snackbar-color-warning: unquote(\"rgb(#{$palette-lime-200})\") !default;\r\n\r\n// DATA TABLE\r\n\r\n$data-table-font-size: 13px !default;\r\n$data-table-header-font-size: 12px !default;\r\n$data-table-header-sort-icon-size: 16px !default;\r\n\r\n$data-table-header-color: rgba(#000, 0.54) !default;\r\n$data-table-header-sorted-color: rgba(#000, 0.87) !default;\r\n$data-table-divider-color: rgba(#000, 0.12) !default;\r\n$data-table-divider-color-IE8: rgb(0,0,0) !default;\r\n\r\n//$data-table-hover-color: #eeeeee !default;\r\n$data-table-hover-color: #E9F7FC !default;\r\n$data-table-selection-color: #C4EAF6 !default;\r\n\r\n$data-table-dividers: 1px solid $data-table-divider-color !default;\r\n$data-table-dividers-IE8: 1px solid $data-table-divider-color-IE8 !default;\r\n\r\n$data-table-row-height: 48px !default;\r\n$data-table-last-row-height: 56px !default;\r\n$data-table-header-height: 56px !default;\r\n\r\n$data-table-column-spacing: 36px !default;\r\n$data-table-column-padding: $data-table-column-spacing / 2;\r\n\r\n$data-table-card-header-height: 64px !default;\r\n$data-table-card-title-top: 20px !default;\r\n$data-table-card-padding: 24px !default;\r\n$data-table-button-padding-right: 16px !default;\r\n$data-table-cell-top: $data-table-card-padding / 2;\r\n\r\n// $line-height-computed: round(($font-size-small * $line-height-base));\r\n$line-height-computed: round((14px * $line-height-base));\r\n$table-bg: transparent;\r\n$table-cell-padding: 8px;\r\n$table-border-color: $border-color-base;\r\n$table-bg-hover: $bg-color-base;\r\n$table-bg-active: $table-bg-hover;\r\n$table-bg-accent: unquote(\"rgba(#{$palette-grey-200},.3)\") !default;\r\n\r\n\r\n\r\n\r\n// tooltip\r\n$tooltip-max-width: 200px;\r\n$tooltip-color: #fff;\r\n$tooltip-bg: #42526E;\r\n$tooltip-inverse-border-color: #d9d9d9;\r\n$tooltip-inverse-color: rgb(51,51,51);\r\n$tooltip-arrow-color: $tooltip-bg;\r\n$tooltip-opacity: 1;\r\n\r\n\r\n// 进度条\r\n$bar-height: 4px !default;\r\n$progress-main-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$progress-secondary-color: unquote(\"rgba(#{$color-primary-contrast}, 0.7)\") !default;\r\n$progress-fallback-buffer-color: unquote(\"rgba(#{$color-primary-contrast}, 0.9)\") !default;\r\n$progress-image-path: $image_path;\r\n$progress-buffer-bar-border:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n\r\n// Tabs\r\n$layout-header-tab-highlight: unquote(\"rgb(#{$color-accent})\") !default;\r\n\r\n\r\n\r\n$tab-highlight-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$tab-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n$tab-active-text-color: unquote(\"rgba(#{$color-black}, 0.87)\") !default;\r\n$tab-border-color: unquote(\"rgb(#{$palette-grey-300})\") !default;\r\n\r\n\r\n\r\n//CARD\r\n\r\n$card-width: 330px !default;\r\n$card-height: 200px !default;\r\n$card-font-size: 13px !default;\r\n$card-title-font-size: 24px !default;\r\n$card-subtitle-font-size: 10px !default;\r\n$card-horizontal-padding: 16px !default;\r\n$card-vertical-padding: 16px !default;\r\n\r\n$card-title-perspective-origin-x: 165px !default;\r\n$card-title-perspective-origin-y: 56px !default;\r\n\r\n$card-title-transform-origin-x: 165px !default;\r\n$card-title-transform-origin-y: 56px !default;\r\n\r\n$card-title-text-transform-origin-x: 149px !default;\r\n$card-title-text-transform-origin-y: 48px !default;\r\n\r\n$card-supporting-text-font-size: 1.4 * $unit !default;\r\n$card-supporting-text-line-height: 18px !default;\r\n\r\n$card-actions-font-size: 13px !default;\r\n\r\n$card-title-text-font-weight: 300 !default;\r\n$card-z-index: 1 !default;\r\n\r\n// Cover image\r\n$card-cover-image-height: 186px !default;\r\n$card-background-image-url: '' !default;\r\n\r\n\r\n\r\n$card-background-color: unquote(\"rgb(#{$color-white})\") !default;\r\n$card-text-color: unquote(\"rgb(#{$color-black})\") !default;\r\n$card-image-placeholder-color: unquote(\"rgb(#{$color-accent})\") !default;\r\n$card-supporting-text-text-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n$card-border-color: rgba(0,0,0,0.1) !default;\r\n$card-subtitle-color: unquote(\"rgba(#{$color-black}, 0.54)\") !default;\r\n\r\n\r\n$input-border:unquote(\"rgb(#{$palette-u-gray-500})\");\r\n$input-border-focus:unquote(\"rgb(#{$primary-color})\");\r\n$input-border-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\r\n$input-bg-disabled:unquote(\"rgb(#{$palette-u-gray-100})\");\r\n$input-color:unquote(\"rgb(#{$palette-u-gray-A100})\");\r\n$form-input-height:36px;\r\n$form-input-height-sm:28px;\r\n$form-input-padding-left:12px;\r\n$form-label-color:unquote(\"rgb(#{$palette-u-gray-900})\");\r\n$form-control-feedback-color:unquote(\"rgb(#{$palette-u-gray-700})\");\r\n$form-validate-error-color:unquote(\"rgb(#{$palette-u-red-600})\");\r\n\r\n\r\n// BADGE\r\n$badge-font-size: 12px !default;\r\n$badge-color: unquote(\"rgb(#{$color-accent-contrast})\") !default;\r\n$badge-color-inverse: unquote(\"rgb(#{$color-accent})\") !default;\r\n$badge-background: unquote(\"rgb(#{$color-accent})\") !default;\r\n$badge-background-inverse: unquote(\"rgba(#{$color-accent-contrast},0.2)\") !default;\r\n$badge-size : 22px !default;\r\n$badge-padding: 2px !default;\r\n$badge-overlap: 12px !default;\r\n\r\n$badge-primary-color:#FFFFFF;\r\n$badge-primary-bg:$brand-primary;\r\n\r\n$badge-success-color:#FFFFFF;\r\n$badge-success-bg: $brand-success;\r\n\r\n$badge-info-color:#FFFFFF;\r\n$badge-info-bg:$brand-info;\r\n\r\n$badge-warning-color:#FFFFFF;\r\n$badge-warning-bg:$brand-warning;\r\n\r\n$badge-danger-color:#FFFFFF;\r\n$badge-danger-bg:$brand-danger;\r\n\r\n$badge-dark-color:#FFFFFF;\r\n$badge-dark-bg:$brand-dark;\r\n\r\n$badge-font-size: 12px;\r\n$badge-font-dataicon-size: 10px;\r\n$badge-default-dataicon-fontcolor: #757575;\r\n$badge-default-dataicon-bgcolor: #fff;\r\n$badge-default-dataicon-bordercolor: $border-color-base;\r\n\r\n// labels\r\n$tag-padding: .25em .6em .25em;\r\n$tag-border-radius: 0.3em;\r\n$tag-bg: #eeeeee;\r\n$tag-round-border-radius: 1em;\r\n$tag-default-color: #757575;\r\n$tag-default-bg:#e0e0e0;\r\n$tag-lg-font-size: 16px;\r\n$tag-sm-font-size: 10px;\r\n$tag-sm-padding: .1em .5em .1em;\r\n$tag-default-hover-bg: $brand-default-hover;\r\n$tag-primary-hover-bg: $brand-primary-hover;\r\n$tag-success-hover-bg: $brand-success-hover;\r\n$tag-info-hover-bg: $brand-info-hover;\r\n$tag-warning-hover-bg: $brand-warning-hover;\r\n$tag-danger-hover-bg: $brand-danger-hover;\r\n$tag-dark-hover-bg: $brand-dark-hover;\r\n$tag-default-bg: $brand-default;\r\n$tag-primary-bg: $brand-primary;\r\n$tag-success-bg: $brand-success;\r\n$tag-info-bg: $brand-info;\r\n$tag-warning-bg: $brand-warning;\r\n$tag-danger-bg: $brand-danger;\r\n$tag-dark-bg: $brand-dark;\r\n$tag-default-hover-color:unquote(\"rgb(#{$palette-u-gray-500})\");\r\n\r\n\r\n// pagination\r\n$pagination-gap-hover-border:#7A869A;\r\n\r\n$pagination-link-padding: 7px 13px;\r\n$pagination-lg-font-size: 16px;\r\n$pagination-lg-padding-vertical: 9.5px;\r\n$pagination-lg-padding-horizontal: 15.5px;\r\n\r\n$pagination-small-font-size: 12px;\r\n$pagination-small-padding-vertical: 4px;\r\n$pagination-small-padding-horizontal: 9.5px;\r\n\r\n$pag-color: #666666;\r\n$pag-bg-color: #fff;\r\n$pag-border-color:#d7d7d7;\r\n$pag-hover-color: #666;\r\n$pag-hover-bg-color:$hover-bg-color-base;\r\n$pag-hover-border-color:#d7d7d7;\r\n$pag-active-color: #fff;\r\n$pag-active-bg-color:#7A869A;\r\n$pag-active-border-color:#7A869A;\r\n$pag-disabled-color: #777;\r\n$pag-disabled-bg-color:#fff;\r\n$pag-disabled-border-color:#ddd;\r\n\r\n$border-radius-base: $border-radius;\r\n$border-radius-large: 4px;\r\n$border-radius-small: 2px;\r\n\r\n$line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome\r\n$line-height-small: 1.5;\r\n// widget\r\n\r\n$widget-padding-left:30px;\r\n$widget-padding-top:10px;\r\n\r\n//tooltips\r\n\r\n$tooltip-default-bg: $brand-default;\r\n$tooltip-primary-bg: $brand-primary;\r\n$tooltip-success-bg: $brand-success;\r\n$tooltip-info-bg: $brand-info;\r\n$tooltip-warning-bg: $brand-warning;\r\n$tooltip-danger-bg: $brand-danger;\r\n$tooltip-dark-bg: $brand-dark;\r\n\r\n//menu Button\r\n\r\n$menu-default-bg: $brand-default;\r\n$menu-primary-bg: $brand-primary;\r\n$menu-success-bg: $brand-success;\r\n$menu-info-bg: $brand-info;\r\n$menu-warning-bg: $brand-warning;\r\n$menu-danger-bg: $brand-danger;\r\n$menu-dark-bg: $brand-dark;\r\n$menu-default-bg-hover: $brand-default-hover;\r\n$menu-primary-bg-hover: $brand-primary-hover;\r\n$menu-success-bg-hover: $brand-success-hover;\r\n$menu-info-bg-hover: $brand-info-hover;\r\n$menu-warning-bg-hover: $brand-warning-hover;\r\n$menu-danger-bg-hover: $brand-danger-hover;\r\n$menu-dark-bg-hover: $brand-dark-hover;\r\n\r\n\r\n// breadcrumbs\r\n\r\n$breadcrumb-padding-vertical: 8px;\r\n$breadcrumb-padding-horizontal: 10px;\r\n$breadcrumb-separator: \"/\\00a0\";\r\n$breadcrumb-bg: transparent;\r\n$breadcrumb-margin-bottom: 10px;\r\n\r\n$breadcrumb-color: $brand-primary;\r\n$breadcrumb-active-color: $text-color;\r\n\r\n$breadcrumb-icon-margin-right: 10px;\r\n$breadcrumb-arrow-separator: \"\\00bb\\00a0\";\r\n\r\n$breadcrumb-bg-color: #f5f5f5;\r\n$breadcrumb-active-color: #777;\r\n$breadcrumb-separate-color: #ccc;\r\n\r\n// list-group\r\n$list-group-media-heading-font-size : $font-size-small;//14px\r\n$list-group-link-disabled-color : $disabled-color-base;\r\n\r\n$list-group-link-disabled-bg : $gray-lightest;\r\n\r\n$list-group-active-color : $brand-primary;\r\n$list-group-link-active-color : unquote(\"rgb(#{$color-white})\") !default;\r\n$list-group-link-active-bg : $brand-primary;\r\n\r\n\r\n$list-group-item-icon-margin-right : 10px;\r\n\r\n$list-group-bg-inherit-item-border : rgba(0, 0, 0, 0.075);\r\n$list-group-bg-inherit-item-hover-bg : rgba(0, 0, 0, 0.075);\r\n\r\n\r\n$list-group-border-radius: $border-radius-base;\r\n\r\n\r\n\r\n$list-group-link-color: $text-color;\r\n$list-group-link-hover-color: $text-color;\r\n$list-group-link-heading-color: $title-color;\r\n\r\n$list-group-hover-bg: $bg-color-base;\r\n\r\n$list-group-disabled-bg: transparent;\r\n\r\n$list-group-disabled-color: $disabled-color-base;\r\n\r\n\r\n$list-group-disabled-text-color: $list-group-disabled-color;\r\n$list-group-active-bg: transparent;\r\n$list-group-active-border: $list-group-active-bg;\r\n// $list-group-active-text-color: lighten($list-group-active-color, 40%);\r\n$list-group-active-text-color: $list-group-active-color;\r\n\r\n$list-group-bg: #fff;\r\n$list-group-border: transparent;\r\n// $list-group-bordered-border : $border-color-base;\r\n// $list-group-bordered-active-color : $component-active-color;\r\n// $list-group-bordered-active-bg : $component-active-bg;\r\n// $list-group-bordered-active-border : $list-group-bordered-active-bg;\r\n\r\n// $list-group-gap-item-margin-bottom : 2px;\r\n\r\n//step\r\n$steps-margin-bottom: $line-height-computed;\r\n$step-padding-horizontal:20px;\r\n$step-padding-vertical: 12px;\r\n\r\n$step-vertical-padding-horizontal: 20px;\r\n$step-vertical-padding-vertical:18px;\r\n\r\n$step-color: $gray;\r\n$step-bg: $bg-color-base;\r\n$step-number-bg: $gray-lighter;\r\n$step-number-color: $inverse;\r\n\r\n$step-current-color: $inverse;\r\n$step-current-bg: $brand-primary;\r\n\r\n$step-done-color: $inverse;\r\n$step-done-bg:$brand-success;\r\n\r\n$step-error-color: $inverse;\r\n$step-error-bg: $brand-danger;\r\n\r\n$step-disabled-color:$gray-light;\r\n\r\n$step-font-size: inherit;\r\n$step-title-font-size: 20px;\r\n$step-icon-font-size:27px;\r\n$step-number-font-size:24px;\r\n$step-number-size: 40px;\r\n\r\n$step-lg-padding-horizontal:20px;\r\n$step-lg-padding-vertical:20px;\r\n$step-lg-font-size: 16px;\r\n$step-lg-title-font-size:22px;\r\n$step-lg-icon-font-size: 32px;\r\n$step-lg-number-font-size:28px;\r\n$step-lg-number-size:46px;\r\n\r\n$step-sm-font-size: 12px;\r\n$step-sm-title-font-size: 18px;\r\n$step-sm-icon-font-size: 24px;\r\n$step-sm-number-font-size: 24px;\r\n$step-sm-number-size: 30px;\r\n\r\n$step-xs-font-size: 10px;\r\n$step-xs-title-font-size: 16px;\r\n$step-xs-icon-font-size: 22px;\r\n$step-xs-number-font-size: 20px;\r\n$step-xs-number-size: 24px;\r\n\r\n// blog nav\r\n$blognav-active-color:unquote(\"rgb(#{$primary-color})\");\r\n// widget\r\n$widget-padding-left:30px;\r\n$widget-padding-top:10px;\r\n\r\n\r\n// couter 数据统计\r\n\r\n$counter-number-color: $gray-darkest;\r\n$counter-number-font-size: 20px;\r\n$counter-icon-font-size: $counter-number-font-size;\r\n\r\n$counter-lg-number-font-size: 40px;\r\n$counter-md-number-font-size: 30px;\r\n$counter-sm-number-font-size: 14px;\r\n\r\n$counter-lg-icon-font-size: $counter-lg-number-font-size;\r\n$counter-md-icon-font-size: $counter-md-number-font-size;\r\n$counter-sm-icon-font-size: $counter-sm-number-font-size;\r\n\r\n$counter-inverse-color: $inverse;\r\n\r\n\r\n// navbar\r\n\r\n\r\n$menu-active-color: #108ee9;\r\n$menu-border-active-color: #108ee9;\r\n$menu-selected-bg-color: #eaf8fe;\r\n$menu-group-titil-color: #999;\r\n$menu-group-title-padding-left: 32px;\r\n$menu-color: #666;\r\n$menu-border-color: #d9d9d9;\r\n\r\n$navbar-default-bg-color: #f8f8f8;\r\n$navbar-default-border-color: #e7e7e7;\r\n$navbar-default-color: #777;\r\n$navbar-default-hover-color: #333;\r\n$navbar-inverse-hover-color: #fff;\r\n$navbar-inverse-color: #9d9d9d;\r\n$navbar-inverse-bg-color: #222;\r\n$navbar-inverse-border-color: #080808;\r\n$navbar-border-radius: 4px;\r\n\r\n$navbar-side-container-border-color: #d9d9d9;\r\n$navbar-side-container-width: 242px;\r\n$navbar-side-container-border-shadow: #d9d9d9;\r\n\r\n// Basics of a navbar\r\n$navbar-height: 50px;\r\n$navbar-margin-bottom: $line-height-computed;\r\n$navbar-border-radius: $border-radius-base;\r\n$navbar-padding-horizontal: floor(($grid-gutter-width / 2));\r\n$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);\r\n$navbar-collapse-max-height: 340px;\r\n\r\n$navbar-avatar-margin-horizontal: (($navbar-height - 32px) / 2);\r\n\r\n$navbar-brand-padding-horizontal: 20px;\r\n$navbar-brand-logo-height: 32px;\r\n\r\n$navbar-default-color: $text-color;\r\n$navbar-default-bg: $inverse;\r\n$navbar-default-border: $border-color-base;\r\n\r\n// Navbar links\r\n$navbar-default-link-color: $text-color;\r\n$navbar-default-link-hover-color: $gray-darker;\r\n$navbar-default-link-hover-bg: rgba(238,238,238, 30%);\r\n$navbar-default-link-active-color: $navbar-default-link-hover-color;\r\n$navbar-default-link-active-bg: rgba(238,238,238, 60%);\r\n$navbar-default-link-disabled-color: $disabled-color-base;\r\n$navbar-default-link-disabled-bg: transparent;\r\n\r\n// Navbar brand label\r\n$navbar-default-brand-color: $title-color;\r\n$navbar-default-brand-hover-color: $navbar-default-brand-color;\r\n$navbar-default-brand-hover-bg: none;\r\n\r\n// Navbar toggle\r\n$navbar-default-toggle-hover-bg: $navbar-default-link-hover-bg;\r\n$navbar-default-toggle-icon-bar-bg: $navbar-default-color;\r\n$navbar-default-toggle-border-color: transparent;\r\n\r\n\r\n// Inverted navbar\r\n// Reset inverted navbar basics\r\n$navbar-inverse-bg: $brand-primary;\r\n$navbar-inverse-border: rgba(0, 0, 0, .1);\r\n\r\n// Inverted navbar links\r\n$navbar-inverse-link-color: $inverse;\r\n$navbar-inverse-link-hover-color: $inverse;\r\n$navbar-inverse-link-hover-bg: rgba(0, 0, 0, .1);\r\n$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;\r\n$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg;\r\n$navbar-inverse-link-disabled-color: $inverse;\r\n$navbar-inverse-link-disabled-bg: transparent;\r\n\r\n// Inverted navbar brand label\r\n$navbar-inverse-brand-color: $navbar-inverse-link-color;\r\n$navbar-inverse-brand-hover-color: $inverse;\r\n$navbar-inverse-brand-hover-bg: none;\r\n\r\n// Inverted navbar toggle\r\n$navbar-inverse-toggle-hover-bg: $navbar-inverse-link-hover-bg;\r\n$navbar-inverse-toggle-icon-bar-bg: $inverse;\r\n$navbar-inverse-toggle-border-color: transparent;\r\n\r\n//hamburger\r\n$hamburger-size: 17px;\r\n\r\n\r\n//panel\r\n$panel-header-padding : 10px 15px;\r\n$panel-footer-padding : 10px 15px;\r\n$panel-body-padding : 15px 15px;\r\n$panel-header-bg-color : #f5f5f5;\r\n$panel-footer-bg-color : #f5f5f5;\r\n$panel-bg-color : #fff;\r\n$panel-default-color : #757575;\r\n$panel-inner-border-color: #ddd;\r\n\r\n\r\n//modal\r\n$modal-header-padding : 15px;\r\n$modal-body-padding : 15px;\r\n$modal-footer-padding : 15px;\r\n$modal-content-bg-color: #fff;\r\n$modal-backdrop-bg: #000;\r\n$modal-backdrop-opacity: .6;\r\n$modal-header-border-color: transparent;\r\n$modal-footer-border-color: transparent;\r\n$modal-xlg: 976px;\r\n$modal-lg: 800px;\r\n$modal-sm: 400px;\r\n$modal-default: 600px;\r\n$modal-border-radius: $border-radius-base;\r\n\r\n//notification\r\n\r\n$zIndex-notification: $zIndex-notification;\r\n$notification-top: 30px;\r\n$notification-bottom: 30px;\r\n$notification-right: 30px;\r\n$notification-width: 300px;\r\n$notification-text-margin-right: 15px;\r\n$notice-padding: 15px;\r\n$notice-background: $gray-darkest;\r\n$notice-bottom: 15px;\r\n\r\n//message\r\n\r\n$message-font-size: 12px;\r\n\r\n$message-right: 30px;\r\n$message-width: 300px;\r\n$message-text-margin-right: 15px;\r\n$message-padding: 0;\r\n$message-content-padding: 15px;\r\n$message-background: $gray-darkest;\r\n\r\n//popconfirm\r\n\r\n$popconfirm-max-width: 300px;\r\n\r\n$popconfirm-dark-bg: $gray-darkest;\r\n$popconfirm-fallback-dark-border-color: $gray-darkest;\r\n$popconfirm-margin: 10px;\r\n$popconfirm-title-bg: #fff;\r\n$popconfirm-border-color:$border-color-base;\r\n$popconfirm-arrow-width: 10px;\r\n$popconfirm-arrow-color: $border-color-base;\r\n$popconfirm-arrow-outer-width: 0;\r\n$popconfirm-arrow-outer-color: $border-color-base;\r\n$popconfirm-border-right-color: $border-color-base;\r\n$popconfirm-fallback-border-color: #fff;\r\n\r\n//select\r\n\r\n$select-bg-color: #fff;\r\n$select-border-color: $border-color-base;\r\n$select-border-radius: $border-radius-base;\r\n$select-color: $font-color-base;\r\n$select-font-size: 12px;\r\n$select-dropdown-color: #666;\r\n$select-dropdown-bg-color: #fff;\r\n$select-dropdown-hover-bg: $hover-bg-color-base;\r\n$select-dropdown-selected-bg: $selected-bg-color-base;\r\n$select-dropdown-selected-color: rgb(134, 119, 119);\r\n$select-dropwdown-item-padding: 7px 16px;\r\n$select-disabled-color: $disabled-color-base;\r\n$select-disabled-bg: #f7f7f7;\r\n$select-disabled-border-color: #d9d9d9;\r\n//dropdown\r\n\r\n$dropdown-item-hover-bg-color: unquote(\"rgb(#{$palette-grey-100})\");\r\n$dropdown-item-divier-bg-color: $gray-lighter;\r\n$dropdown-border-color: $border-color-base;\r\n$dropdown-border-radius:3px;\r\n$dropdown-shadow: 0 1px 5px $dropdown-border-color;\r\n$dropdown-margin: 5px 0 0 0;\r\n$dropdown-menu-item-padding: 0px 16px 0 28px;\r\n$dropdown-menu-font-size: 12px;\r\n$dropdown-menu-item-height: 42px;\r\n$dropdown-menu-item-light-height: 42px;\r\n$dropdown-menu-title-font-size: 12px;\r\n$dropdown-menu-title-color: $disabled-color-base;\r\n$dropdown-menu-title-padding:8px 16px;\r\n$dropdown-menu-title-line-height: 1.5;\r\n\r\n//upload\r\n\r\n$upload-list-color: #108ee9;\r\n$upload-list-bg : #fff;\r\n$upload-list-hover-bg: #e7f4fd;\r\n$upload-list-error-color: #f50;\r\n$upload-thumbnail-height: 48px;\r\n$upload-thumbnail-width: 48px;\r\n$upload-thumbnail-img-height: 48px;\r\n$upload-thumbnail-img-width: 48px;\r\n\r\n//loading\r\n\r\n$loading-loadprimary: rgb(63, 81, 181);\r\n$loading-loadsuccess: #4caf50;\r\n$loading-loadwarn: rgb(255, 152, 0);\r\n$loading-lineanimating: (\r\n 1:line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 2:line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 3:line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 4:line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08),\r\n 5:line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08)\r\n);\r\n$loading-linebackcolor: (\r\n 1: #F44336,\r\n 2: #7ED321,\r\n 3: #0084FF,\r\n 4: #FF9800,\r\n 5: #D0021B\r\n);\r\n$loading-back-width: 120px;\r\n$loading-back-height:110px;\r\n$loading-desc-font-size: 16px;\r\n$loading-desc-color: #cecece;\r\n$loading-rotate-bor:#c2c3c5;\r\n\r\n//两种加载的尺寸 width height\r\n$loading-rotate-sm-size: 25px;\r\n$loading-rotate-size:40px;\r\n$loading-rotate-lg-size:60px;\r\n\r\n$loading-line-sm-width: 4px;\r\n$loading-line-sm-height:35px;\r\n$loading-line-width:6px;\r\n$loading-line-height:50px;\r\n$loading-line-lg-width:8px;\r\n$loading-line-lg-height:90px ;\r\n\r\n//居中位置top left\r\n$loading-center-top:50%;\r\n$loading-center-left:50%;\r\n\r\n$loading-rotate-center-sm: -15px ;\r\n$loading-rotate-center:-22px;\r\n$loading-rotate-center-lg:-35px ;\r\n\r\n$loading-line-center-sm-top: -22px;\r\n$loading-line-center-sm-left:-20px;\r\n$loading-line-center-top:-30px;\r\n$loading-line-center-left:-25px;\r\n$loading-line-center-lg-top:-50px;\r\n$loading-line-center-lg-left:-30px;\r\n\r\n\r\n//switch\r\n\r\n\r\n//color\r\n$switch-border-color: $gray-lighter;\r\n$switch-back-color: $gray-lighter;\r\n$switch-checked-borColor: $brand-primary;\r\n$switch-checked-backColor: $brand-primary;\r\n\r\n// border-radius of different state switch\r\n$switch-border-radius: 20px;\r\n$switch-border-radius-after: 18px;\r\n\r\n// width height line-height of the three switches\r\n$switch-width: (default:44px, small:32px, large:60px);\r\n$switch-height: (default:22px, small:16px, large:30px);\r\n$switch-lineHeight: (default:20px, small:12px, large:12px);\r\n\r\n// style of u-switch-inner\r\n$switch-inner-fontSize: (default:12px, small:10px, large:18px);\r\n$switch-inner-left: (default:22px, small:16px, large:30px);\r\n$switch-inner-largeTop: 8px;\r\n\r\n// style of u-switch:active:after\r\n$switch-active-width: (default:24px, small:16px, large:32px);\r\n\r\n// style of u-switch:after\r\n$switch-after-widthHeight: 18px;\r\n$switch-after-widthHeight-sm: 14px;\r\n$switch-after-widthHeight-lg: 26px;\r\n$switch-after-top: 1px;\r\n$switch-after-top-sm: 0;\r\n$switch-after-top-lg: 1px;\r\n$switch-after-left: 0;\r\n$switch-after-left-sm: 0;\r\n$switch-after-left-lg: 0;\r\n\r\n// style of u-switch.is-checked\r\n$switch-checked-innerLeft: (default:8px, small:4px, large:8px);\r\n$switch-checked-afterLeft: (default:24px, small:16px, large:32px);\r\n$switch-checked-activeLeft: (default:16px, small:10px, large:26px);\r\n\r\n$switch-primary-bg: $brand-primary;\r\n$switch-dark-bg: $brand-dark;\r\n$switch-success-bg: $brand-success;\r\n$switch-warning-bg: $brand-warning;\r\n$switch-danger-bg: $brand-danger;\r\n$switch-info-bg: $brand-info;\r\n\r\n//tabs\r\n\r\n$tabs-basic-back: #f5f5f5;\r\n$tabs-cls-color: #666;\r\n$tabs-cls-width: 900px;\r\n$tabs-simple-conHeight: 120px;\r\n$tabs-simple-conPad: 16px;\r\n$tabs-simple-conWidth: 100%;\r\n\r\n$tabs-fontSize: (simple:14px, fill:14px, turn:14px, slide:14px, fade:14px, fadeup:14px);\r\n$tabs-lineHeight: (simple:2.3, fill:2.3, turn:2.3, slide:2.3, fade:2.3, fadeup:2.3);\r\n$tabs-marginBottom: -1px;\r\n\r\n$tabs-simple-tab: (padding:0 16px, margin:5px 0 5px 5px, radius:0 0 0 0, back:#fff);\r\n$tabs-simple-tabBorder: 1px solid #fff;\r\n$tabs-simple-activeBorder: 1px solid $brand-primary;\r\n$tabs-simple-activeColor: #fff;\r\n$tabs-simple-activeBorBottom: 1px solid $brand-primary;\r\n$tabs-simple-activeTopRadius: 5px;\r\n$tabs-simple-fontWeight: bold;\r\n\r\n$tabs-fill-tab: (padding: 0 16px, color:#666, back:#fff, afterBack:#d2d8d6, activeBack:$brand-primary);\r\n$tabs-fill-tab-maright: 5px;\r\n$tabs-fill-after-top: 0;\r\n$tabs-fill-after-left: 0;\r\n$tabs-fill-after-width: 100%;\r\n$tabs-fill-after-height: 100%;\r\n$tabs-fill-fontWeight: bold;\r\n\r\n$tabs-turn-tab: (padding: 0 16px, color:#fff, back:#f5f5f5, afterBack:$brand-primary, activeBack:$brand-primary);\r\n$tabs-turn-after-top: 0;\r\n$tabs-turn-after-left: 0;\r\n$tabs-turn-after-width: 100%;\r\n$tabs-turn-after-height: 100%;\r\n$tabs-turn-beforeBot: 32px;\r\n$tabs-turn-beforeRight: 15px;\r\n$tabs-turn-fontWeight: bold;\r\n$tabs-moveleft-conHeight: 120px;\r\n$tabs-moveleft-conPad: 16px;\r\n\r\n$tabs-slide-tabs: (width:25%, padding: 0 16px, back:#f5f5f5);\r\n$tabs-slide-child-bottom: 0;\r\n$tabs-slide-child-left: 0;\r\n$tabs-slide-child-height: 4px;\r\n$tabs-slide-child-back: $brand-primary;\r\n$tabs-slide-fontWeight: bold;\r\n\r\n$tabs-fade-tab: (marLeft:5px, marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\r\n$tabs-fade-conPad: 16px;\r\n$tabs-fade-conBor: 5px;\r\n\r\n$tabs-fadeup-tab: (marTop:5px, color:#666, padding:0 16px, radius:0 0 0 0);\r\n$tabs-fadeup-top: -5px;\r\n$tabs-fadeup-left: 0;\r\n$tabs-fadeup-width: 100%;\r\n$tabs-fadeup-height: 100%;\r\n$tabs-fadeup-color: #666;\r\n$tabs-fadeup-conHeight: 120px;\r\n$tabs-fadeup-conPad: 16px;\r\n\r\n\r\n//rate\r\n$rate-star-default-color:$gray-lightest;\r\n$rate-star-active-color:$brand-primary;\r\n$rate-star-marginRight:8px;\r\n//backtop\r\n$back-top-padding:5px;\r\n$backtop-background:unquote(\"rgb(#{$palette-u-gray-600})\") !default;\r\n$backtop-color:unquote(\"rgb(#{$color-white})\") !default;\r\n$backtop-right:10px;\r\n$backtop-bottom:10px;\r\n$backtop-dom-right:40px;\r\n\r\n\r\n//dnd\r\n$dnd-list-background:unquote(\"rgb(#{$palette-grey-400})\")!default;\r\n$dnd-list-padding:8px;\r\n$dnd-list-dragging-background:unquote(\"rgb(#{$palette-light-blue-A200})\")!default;\r\n$dnd-item-color:unquote(\"rgb(#{$color-black})\")!default;\r\n$dnd-item-padding:16px;\r\n$dnd-item-margin:4px;\r\n$dnd-item-background:unquote(\"rgb(#{$palette-grey-500})\")!default;\r\n$dnd-item-dragging-background:unquote(\"rgb(#{$palette-blue-300})\")!default;\r\n\r\n// bee-tree\r\n$tree-checkbox-color: unquote(\"rgb(#{$primary-color})\") !default;\r\n$tree-node-bg-color: $hover-bg-color-base !default;\r\n\r\n// bee-table\r\n$table-head-background-color: unquote(\"rgb(#{$table-header-background-color})\") !default;\r\n$table-head-text-color: unquote(\"rgb(#{$table-header-text-color})\") !default;\r\n\r\n// bee-transfer\r\n$transfer-border-gap-color:#d9d9d9;\r\n\r\n// bee-transfer\r\n$cascader-border-gap-color:#ccc;","@import \"../node_modules/tinper-bee-core/scss/minxin-variables\";\n@import \"../node_modules/tinper-bee-core/scss/minxin-mixins\";\n// @import \"../node_modules/bee-loading/src/Loading\";\n\n$text-color: $font-color-base;\n$font-size-base: 12px;\n$line-height: 1.33;\n// 主题定制border:\n$table-border-color: unquote(\"rgb(#{$table-border-color-base})\");\n// $table-head-background-color: #f7f7f7;\n// $table-head-text-color: #666;\n$vertical-padding: 12px;\n$horizontal-padding: 16px;\n// $table-border-color: #e9e9e9;\n\n$table-hover-color: #E7F2FC;\n$table-move-in-color: $bg-color-base;\n$checkbox-height:14px;\n$table-th-bottom-border:#C1C7D0;\n\n$filter-form-control-height:26px;\n$table-head-font-weight: bold;\n$icon-color:#505F79;\n.u-table {\n font-size: $font-size-base;\n color: $text-color;\n // transition: opacity 0.3s ease;\n position: relative;\n line-height: $line-height;\n overflow: hidden;\n &-body{\n // overflow: hidden!important;\n position: relative;\n }\n &-hiden-drag{\n position: relative;\n &-li{\n position: absolute;\n top: 0px;\n left: 0px;\n // height: 10px;//这个高度先注释掉了,加上后,在火狐浏览器上会站位置。滚动条拉到最右边有错行\n }\n }\n table {\n width: 100%;\n border-collapse: collapse;\n text-align: left;\n }\n\n th {\n // background: $table-head-background-color;\n font-weight: $table-head-font-weight;\n text-align: left;\n // transition: background 0.3s ease;\n &[colspan] {\n text-align: center;\n }\n ::last-child{\n overflow: hidden;\n }\n }\n\n td {\n border-bottom: 1px solid $table-border-color;\n a{\n color: #2196F3;\n &:hover{\n color: #1565c0;\n }\n &:active{\n color: #1565c0;\n }\n }\n }\n thead{\n tr:last-child{\n border-bottom: 1px solid $table-th-bottom-border;\n }\n \n }\n tr {\n // transition: all 0.3s ease;\n &:hover {\n // background: $hover-bg-color-base;\n td {\n .uf-eye{\n visibility: visible !important;\n }\n }\n }\n tr a{\n color: #2196F3;\n &:hover{\n color: #1565c0;\n }\n &:active{\n color: #1565c0;\n }\n }\n }\n tr.tr-row-hover {\n background: $hover-bg-color-base;\n }\n\n th,\n td {\n padding: $vertical-padding $horizontal-padding;\n word-break: break-all;\n }\n tr {\n \n &.filterable{\n th{\n padding-top: 5px !important;\n padding-bottom: 5px !important;\n .filterContext{\n height: 35px;\n }\n .u-select-selection--single{\n height: 26px;\n }\n }\n }\n }\n &-row-hover {\n background:unquote(\"rgb(#{$table-row-hover-bg-color})\");\n }\n \n &-scroll {\n overflow: auto;\n }\n &-bordered {\n table {\n border: 1px solid $table-border-color;\n box-sizing: border-box;\n table-layout: fixed;\n // width:auto;\n }\n \n .u-table-header>table {\n border-bottom: 0;\n }\n .u-table-header~.u-table-body,.u-table-header~.u-table-body-outer{\n table{\n border-top: 0px ;\n }\n }\n\n th {\n border-bottom: 1px solid $table-border-color;\n box-sizing: border-box;\n }\n th,\n td {\n border-right: 1px solid $table-border-color;\n box-sizing: border-box;\n }\n }\n &-drag-border{\n tr {\n th.th-can-not-drag{ //拖拽tag影响了表格整体宽度\n overflow: hidden;\n }\n }\n }\n &-header {\n overflow: hidden;\n background: $table-head-background-color;\n color: $table-head-text-color;\n }\n\n &.fixed-height td {\n padding: 0px $horizontal-padding;\n }\n\n &-fixed-header &-body {\n background: #fff;\n position: relative;\n }\n &-fixed-left &-body-inner {\n margin-right: -20px;\n padding-right: 20px;\n }\n\n &-fixed-header &-fixed-left &-body-inner {\n padding-right: 0px;\n }\n\n &-fixed-header &-body-inner {\n height: 100%;\n // overflow: scroll;\n }\n\n\n &-fixed-header &-scroll &-header {\n overflow-x: scroll;\n padding-bottom: 20px;\n margin-bottom: -20px;\n overflow-y: scroll;\n box-sizing: border-box;\n }\n\n &-title {\n padding: $vertical-padding $horizontal-padding;\n border-top: 1px solid $table-border-color;\n }\n\n &-content {\n position: relative;\n }\n\n &-footer {\n padding: $vertical-padding $horizontal-padding;\n border-bottom: 1px solid $table-border-color;\n .u-table-scroll{\n overflow-x: hidden;\n }\n }\n &-footer & {\n margin: (-$vertical-padding) (-$horizontal-padding);\n }\n\n &-placeholder {\n padding: $vertical-padding 8px;\n background: #fff;\n border-bottom: 1px solid $table-border-color;\n text-align: center;\n position: relative;\n }\n\n &-expand-icon-col {\n width: 10px;\n }\n &-row,\n &-expanded-row {\n .u-table{\n tr{\n background: #fff;\n }\n tr.u-table-row-hover{\n background:unquote(\"rgb(#{$table-row-hover-bg-color})\");\n }\n }\n &-expand-icon {\n cursor: pointer;\n display: inline-block;\n margin-right: 0px;\n width: 16px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n border: 1px solid $table-border-color;\n user-select: none;\n background: #fff;\n margin-right: 10px;\n }\n &-spaced {\n visibility: hidden;\n }\n &-spaced:after {\n content: \".\";\n }\n\n &-expanded:after {\n content: \"-\";\n }\n\n &-collapsed:after {\n content: \"+\";\n }\n }\n &-row{\n &.selected{\n background: #FFF7E7;\n }\n }\n tr.u-table-expanded-row {\n background: #f7f7f7;\n &:hover {\n background: #f7f7f7;\n }\n .u-table {\n // padding: 0 40px 0 20px;\n z-index: 1;\n }\n }\n &-column-hidden {\n display: none;\n }\n &-prev-columns-page,\n &-next-columns-page {\n cursor: pointer;\n color: #666;\n z-index: 1;\n &:hover {\n color: #2db7f5;\n }\n &-disabled {\n cursor: not-allowed;\n color: #999;\n &:hover {\n color: #999;\n }\n }\n }\n &-prev-columns-page {\n margin-right: 8px;\n &:before {\n content: \"<\";\n }\n }\n &-next-columns-page {\n float: right;\n &:before {\n content: \">\";\n }\n }\n\n &-fixed-left,\n &-fixed-right {\n position: absolute;\n top: 0;\n overflow: hidden;\n z-index: 1;\n table {\n width: auto;\n background: #fff;\n }\n }\n\n &-fixed-left {\n left: 0;\n box-shadow: 4px 0 4px rgba(100, 100, 100, 0.1);\n &-body-inner {\n margin-right: -20px;\n padding-right: 20px;\n }\n &-fixed-header & &-body-inner {\n padding-right: 0;\n }\n }\n\n &-fixed-right {\n right: 0;\n box-shadow: -4px 0 4px rgba(100, 100, 100, 0.1);\n\n // hide expand row content in right fixed Table\n // https://github.com/ant-design/ant-design/issues/1898\n &-expanded-row {\n color: transparent;\n pointer-events: none;\n }\n \n }\n \n &-scroll-position-left &-fixed-left {\n box-shadow: none;\n }\n\n &-scroll-position-right &-fixed-right {\n box-shadow: none;\n }\n\n &-thead{\n .filter-text,.filter-dropdown,.filter-date {\n font-weight: normal;\n }\n .filter-wrap{\n display: flex;\n justify-content: center;\n align-items: center;\n .filter-btns{\n min-width: 58px;\n }\n }\n th{\n background: $table-head-background-color;\n color: $table-head-text-color;\n background-clip:padding-box;\n //禁止选中文字\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none; \n /*\n Introduced in IE 10. \n */\n -ms-user-select: none;\n user-select: none;\n\n // overflow: hidden;\n // white-space: nowrap;\n // text-overflow: ellipsis;\n .bee-table-column-sorter {\n position: relative;\n margin-left: 4px;\n height: 16px;\n vertical-align: middle;\n text-align: center;\n display: inline-block;\n margin-top: -3px;\n i{\n padding: 0px;\n font-weight: 600;\n color: $icon-color;\n }\n \n & > .bee-table-column-sorter-down,\n & > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {\n line-height: 16px;\n display: block;\n width: 34px;\n cursor: pointer;\n }\n \n }\n\n .bee-table-column-sorter-down.on .uf-triangle-down,\n .bee-table-column-sorter-down.on .uf-triangle-up,\n .bee-table-column-sorter-up.on .uf-triangle-down,\n .bee-table-column-sorter-up.on .uf-triangle-up {\n color: #108ee9;\n }\n .bee-table-column-sorter .uf-triangle-down,\n .bee-table-column-sorter .uf-triangle-up {\n -webkit-filter: none;\n filter: none;\n font-size: 12px;\n }\n .bee-table-column-sorter .uf-triangle-down,\n .bee-table-column-sorter .uf-triangle-up {\n display: inline-block;\n padding: 0;\n font-size: 12px;\n font-size: 8px\\9;\n -webkit-transform: scale(0.66666667) rotate(0deg);\n -ms-transform: scale(0.66666667) rotate(0deg);\n transform: scale(0.66666667) rotate(0deg);\n -ms-filter: \"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)\";\n zoom: 1;\n line-height: 4px;\n height: 4px;\n color: #999;\n // -webkit-transition: all 0.3s;\n // transition: all 0.3s;\n }\n &:hover{\n .bee-table-column-sorter {\n display: inline-block;\n }\n }\n }\n .th-drag{\n cursor: move;\n }\n .th-drag:hover{\n background: $hover-bg-color-base;\n\n }\n //为了区分是拖拽宽度还是交换列,先注释上面了\n // .th-drag:hover{\n // background:#ccc;\n // }\n .th-drag-hover{ \n background: #ccc;\n }\n &-th{\n position: relative;\n\n &-drag-gap{\n height: 100%;\n position: absolute;\n right: -10px;\n top: 0;\n // background:transparent;\n // width: 1px;\n // background:#ccc;\n width: 20px;\n \n box-sizing: border-box;\n z-index: 1;\n\n .online{\n height: 100%;\n width: 1px;\n background:transparent;//兼容火狐浏览器,如果table设置border,\n margin: 0 auto;\n }\n .online-hover{\n background:#000000;\n }\n \n }\n &-drag-gap:hover{\n cursor: col-resize;\n .online{\n background: #000000\n }\n }\n }\n &-th:last-child {\n &-drag-gap{\n border: none;\n }\n }\n }\n\n\n &-filter-column{\n \n &-pop-cont{\n margin: 0px;\n max-height: 300px;\n overflow-y: scroll;\n color:#212121;\n }\n &-clear-setting{ \n // border-bottom: 1px solid #ccc;\n cursor: pointer;\n margin-bottom: 4px;\n }\n &-cont{\n position: relative;\n }\n &-filter-icon{\n position: absolute;\n width: 30px;\n height: 38px ;\n line-height: 38px;\n right: 12px ;\n top:1px ;\n z-index: 2;\n background: $table-head-background-color;\n text-align: center;\n cursor: pointer;\n i.uf{\n padding: 0px;\n color: $icon-color;\n }\n }\n &-pop-cont-item{\n margin-top: 8px;\n // line-height: 30px;\n cursor: pointer;\n .u-checkbox {\n margin: 0px;\n\n }\n }\n &-pop-cont-item>span{\n margin-left: -3px;\n max-width: 132px;\n width: auto !important;\n min-width: 56px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline-block;\n vertical-align: middle;\n }\n &-pop .u-modal-dialog{\n border: 1px solid #ccc;\n background: #fff;\n }\n }\n //拖拽宽度代码\n &-row-fixed-columns-in-body{\n // visibility: hidden;\n display:none;\n pointer-events: none;\n }\n //固定列含有checkbox 样式复写\n .u-checkbox {\n height: $checkbox-height;\n line-height: $checkbox-height;\n margin:0px;\n .u-checkbox-label{\n line-height: $checkbox-height;\n &:before,&:after {\n width: $checkbox-height;\n height: $checkbox-height;\n }\n }\n }\n}\n.u-table:focus{\n outline: none;\n // border-color: #9ecaed;\n // box-shadow: 0 0 10px #9ecaed;\n box-shadow: 0 0 0;\n}\n\n .u-table-bordered {\n .u-table-drag-gap{\n background:#e9e9e9;\n }\n }\n.u-table.bordered {\n table {\n border-collapse: collapse;\n }\n th,\n td {\n border: 1px solid $table-border-color;\n }\n}\n\n.move-enter,\n.move-appear {\n opacity: 0;\n animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n animation-duration: 2.5s;\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n\n.move-leave {\n animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n animation-duration: 0.5s;\n animation-fill-mode: both;\n animation-play-state: paused;\n}\n\n.move-enter.move-enter-active,\n.move-appear.move-enter-active {\n animation-name: moveLeftIn;\n animation-play-state: running;\n}\n\n.move-leave.move-leave-active {\n animation-name: moveRightOut;\n animation-play-state: running;\n}\n\n@keyframes moveLeftIn {\n 0% {\n transform-origin: 0 0;\n transform: translateX(30px);\n opacity: 0;\n background: $table-move-in-color;\n }\n 20% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1;\n }\n 80% {\n background: $table-move-in-color;\n }\n 100% {\n background: transparent;\n opacity: 1;\n }\n}\n\n@keyframes moveRightOut {\n 0% {\n transform-origin: 0 0;\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform-origin: 0 0;\n transform: translateX(-30px);\n opacity: 0;\n }\n}\n\n.formItem-style {\n height: unset;\n min-height: unset;\n padding: 0;\n}\n.errMessage-style {\n display: none;\n border: none;\n /* margin-top: 5px; */\n /* margin-bottom: 5px; */\n background: transparent;\n color: #f22c1d;\n /* padding-left: 12px; */\n /* padding-right: 12px; */\n margin: 0;\n position: absolute;\n padding: 0;\n top: 3px;\n right: 0;\n}\n\n.editable-cell {\n position: relative;\n}\n\n.editable-cell-input-wrapper,\n.editable-cell-text-wrapper {\n padding-right: 24px;\n}\n.editable-cell-input-wrapper {\n .u-form-item.formItem-style .u-label{\n display: none;\n }\n .u-input-group .u-form-control{\n height: 26px;\n font-size: 12px;\n }\n}\n\n.editable-cell-text-wrapper {\n padding: 5px 24px 5px 5px;\n height: 30px;\n}\n\n.editable-cell-icon,\n.editable-cell-icon-check {\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n cursor: pointer;\n}\n\n.editable-cell-icon {\n line-height: 28px;\n display: none;\n}\n\n.editable-cell-icon-check {\n line-height: 28px;\n}\n\n.editable-cell:hover .editable-cell-icon {\n display: inline-block;\n}\n\n.editable-cell-icon:hover,\n.editable-cell-icon-check:hover {\n color: #2db7f5;\n}\n\n.editable-add-btn {\n margin-bottom: 8px;\n}\n\n.search-component {\n margin-bottom: 20px;\n .empty-search {\n position: absolute;\n right: 45px;\n z-index: 20;\n top: 5px;\n color: #524e4e;\n cursor: pointer;\n }\n &.u-input-group.simple {\n float: right;\n }\n &.u-input-group.simple .u-form-control {\n width: 251px;\n background: #f5f5f5;\n border-color: #f5f5f5;\n border-radius: 20px;\n }\n &.u-input-group.simple .u-input-group-btn {\n top: 3px;\n right: 20px;\n position: absolute;\n }\n}\n\n\n.col-resize-container {\n height: 0px;\n position: relative;\n\n & + .table-col-resizer:first-of-type {\n table-layout: fixed;\n }\n\n .active-drag .icon{\n visibility: visible;\n }\n\n .last-handle {\n display: none;\n }\n\n .drag-handle {\n margin-left: -5px;\n position: absolute;\n z-index: 5;\n width: 10px;\n cursor: col-resize;\n\n .icon {\n color: #40b0dc;\n top: -1px;\n position: absolute;\n visibility: hidden;\n\n &:first-child {\n left: -2px\n }\n &:last-child {\n left: 6px\n }\n }\n\n &:hover{\n .icon{\n visibility: visible;\n }\n .col-resizer {\n border: 1px solid;\n }\n }\n\n &.disabled-drag {\n cursor: default;\n display: none;\n }\n\n .col-resizer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0px;\n left: 3px;\n }\n }\n}\n\n.u-filter-dropdown-menu-wrap {\n z-index: 1800;\n .u-dropdown-menu {\n li.u-dropdown-menu-item {\n line-height: $filter-form-control-height;\n height: $filter-form-control-height;\n padding: 0px 16px 0 16px;\n cursor: pointer;\n }\n }\n}\n.filter-wrap {\n .u-form-control{\n height: $filter-form-control-height;\n }\n .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {\n height: $filter-form-control-height;\n }\n}\n.u-row-hover{\n position: absolute;\n right: 24px;\n display: none;\n align-items: center;\n justify-content: center;\n background: transparent;\n}\n\n.u-row-hover2{\n position: absolute;\n left: 100;\n}\n\n// 滚动条样式复写\n::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n::-webkit-scrollbar-button {\n display: none;\n}\n::-webkit-scrollbar-thumb {\n background: #d5d5d5 !important;\n border-radius: 5px;\n}\n::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: #d5d5d5;\n position: absolute;\n}\n\n::-webkit-scrollbar-track {\n display: none;\n}\n\n::-webkit-scrollbar-track-piece {\n display: none;\n}","// @import \"../node_modules/tinper-bee-core/scss/index.scss\";\n// @import \"../node_modules/bee-panel/src/Panel.scss\";\n// @import \"../node_modules/bee-layout/src/Layout.scss\";\n// @import \"../node_modules/bee-button/src/Button.scss\";\n// @import \"../node_modules/bee-transition/src/Transition.scss\";\n// @import \"../node_modules/bee-popconfirm/src/Popconfirm.scss\";\n// @import \"../node_modules/bee-form-control/src/FormControl.scss\";\n// @import \"../node_modules/bee-pagination/src/Pagination.scss\";\n// @import \"../node_modules/bee-checkbox/src/Checkbox.scss\";\n// @import \"../node_modules/bee-select/src/Select.scss\";\n// @import \"../node_modules/bee-form/src/Form.scss\";\n// @import \"../node_modules/bee-popover/src/Popover.scss\";\n// @import \"../node_modules/bee-tooltip/src/Tooltip.scss\";\n// @import \"../node_modules/bee-message/build/Message.css\";\n// @import \"../node_modules/bee-dropdown/build/Dropdown.css\";\n// @import \"../node_modules/bee-input-number/build/InputNumber.css\";\n// @import \"../node_modules/bee-modal/build/Modal.css\";\n@import \"../src/Table.scss\";\n\n\n//引入日期控件样式文件\n// @import \"../node_modules/bee-datepicker/src/datepicker.scss\";\n\n.selected{\n background: #FFF7E7;\n}\n\n.demo25{\n height: 100%;\n\n .u-table-filter-column-filter-icon{\n right: 15px;\n }\n\n}\n",".demo02 {\n .u-table-placeholder i{\n font-size: 60px;\n }\n}",".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}",".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}",".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}","th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/dist/demo.js b/dist/demo.js
index 055a588..b6242d0 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -80,7 +80,7 @@
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); }
- var Demo01 = __webpack_require__(533);var Demo02 = __webpack_require__(535);var Demo03 = __webpack_require__(536);var Demo04 = __webpack_require__(537);var Demo05 = __webpack_require__(538);var Demo11 = __webpack_require__(539);var Demo12 = __webpack_require__(540);var Demo21 = __webpack_require__(541);var Demo22 = __webpack_require__(542);var Demo32 = __webpack_require__(545);var Demo35 = __webpack_require__(546);var Demo41 = __webpack_require__(548);var Demo51 = __webpack_require__(552);var Demo52 = __webpack_require__(553);var Demo53 = __webpack_require__(554);var Demo62 = __webpack_require__(555);var Demo63 = __webpack_require__(556);var Demo71 = __webpack_require__(560);var Demo81 = __webpack_require__(566);var Demo82 = __webpack_require__(567);var Demo83 = __webpack_require__(568);var Demo91 = __webpack_require__(569);var Demo92 = __webpack_require__(572);var Demo101 = __webpack_require__(573);var Demo102 = __webpack_require__(574);var Demo103 = __webpack_require__(575);var Demo104 = __webpack_require__(576);var Demo105 = __webpack_require__(577);var Demo121 = __webpack_require__(578);var Demo131 = __webpack_require__(579);var Demo132 = __webpack_require__(581);var Demo133 = __webpack_require__(582);var Demo134 = __webpack_require__(583);var Demo161 = __webpack_require__(584);var Demo162 = __webpack_require__(585);var Demo181 = __webpack_require__(586);var DemoArray = [{ "example": _react2['default'].createElement(Demo01, null), "title": " 基本表格", "code": "/**\n*\n* @title 基本表格\n* 【Tooltip】\n* @description 鼠标hover行时呼出操作按钮\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500, \"textAlign\":\"center\"},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200, \"textAlign\":\"center\"}\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo01 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 鼠标hover行时呼出操作按钮" }, { "example": _react2['default'].createElement(Demo02, null), "title": " 默认无数据展示", "code": "/**\r\n*\r\n* @title 默认无数据展示\r\n* @description 无数据时显示效果展示(可自定义)\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table, Icon } from 'tinper-bee';\r\n\n\r\n\r\nconst columns02 = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"Address\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n }\r\n ];\r\n \r\n const data02 = [];\r\n\r\n const emptyFunc = () => \r\n \r\nclass Demo02 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n", "desc": " 无数据时显示效果展示(可自定义)", "scss_code": ".demo02 {\n .u-table-placeholder i{\n font-size: 60px;\n }\n}" }, { "example": _react2['default'].createElement(Demo03, null), "title": " 固定表头", "code": "/**\r\n*\r\n* @title 固定表头\r\n* @description 设置`scroll.y`指定滚动区域的高度,添加纵向滚动条,达到固定表头效果\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns03 = [\r\n {\r\n title: \"Full Name\",\r\n width: 100,\r\n dataIndex: \"name\",\r\n key: \"name\"\r\n },\r\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\r\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\r\n];\r\n\r\nconst data03 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },{\r\n key: \"11\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"12\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"13\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"14\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n }\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n", "desc": " 设置`scroll.y`指定滚动区域的高度,添加纵向滚动条,达到固定表头效果" }, { "example": _react2['default'].createElement(Demo04, null), "title": " 隔行换色", "code": "/**\n*\n* @title 隔行换色\n* @description 可自定义斑马线颜色\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns04 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data04 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo04 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 可自定义斑马线颜色", "scss_code": ".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}" }, { "example": _react2['default'].createElement(Demo05, null), "title": " 表格 Loading 加载", "code": "/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @description loading可以传boolean或者object对象,object为bee-loading组件的参数类型\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button,Popconfirm} from \"tinper-bee\";\r\n\r\nconst columns05 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n render(text, record, index) {\r\n return (\r\n \r\n \r\n 一些操作\r\n \r\n \r\n );\r\n }\r\n }\r\n];\r\n\r\nconst data05 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n
标题: 这是一个标题
}\r\n footer={currentData => 表尾: 我是小尾巴
}\r\n // loading={this.state.loading}或者是boolean\r\n loading={{show:this.state.loading}}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " loading可以传boolean或者object对象,object为bee-loading组件的参数类型" }, { "example": _react2['default'].createElement(Demo11, null), "title": " 横向滚动条", "code": "/**\n*\n* @title 横向滚动条\n* @description 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns11 = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 200, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 200, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 200\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 200\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 200\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 200\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 200\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 200\n }\n];\n\nconst data11 = [\n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"4\"\n },\n];\n\nclass Demo11 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值" }, { "example": _react2['default'].createElement(Demo12, null), "title": " 纵向滚动条", "code": "/**\n*\n* @title 纵向滚动条\n* @description 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns12 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data12 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\nclass Demo12 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值" }, { "example": _react2['default'].createElement(Demo21, null), "title": " 渲染本地数据", "code": "/**\n*\n* @title 渲染本地数据\n* @description \n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo21 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " " }, { "example": _react2['default'].createElement(Demo22, null), "title": " 渲染远程数据", "code": "/**\n*\n* @title 渲染远程数据\n* @description \n*/\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\nimport reqwest from 'reqwest';\nimport { Table } from 'tinper-bee';\n\nconst columns = [{\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n render: name => `${name.first} ${name.last}`,\n width: '20%',\n}, {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n}, {\n title: 'Email',\n dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [],\n loading: false,\n }\n }\n\n componentDidMount() {\n this.fetch();\n }\n\n handleTableChange = (pagination, filters, sorter) => {\n const pager = { ...this.state.pagination };\n pager.current = pagination.current;\n this.setState({\n pagination: pager,\n });\n this.fetch({\n results: pagination.pageSize,\n page: pagination.current,\n sortField: sorter.field,\n sortOrder: sorter.order,\n ...filters,\n });\n }\n\n fetch = (params = {}) => {\n console.log('params:', params);\n this.setState({ loading: true });\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then((data) => {\n const pagination = { ...this.state.pagination };\n // Read total count from server\n // pagination.total = data.totalCount;\n pagination.total = 200;\n this.setState({\n loading: false,\n data: data.results,\n pagination,\n });\n });\n }\n \n onPageIndexSelect = pageIndex => {\n let { pageSize, nodeId } = this.state\n\n dataMaintainStore.getTableRequest( nodeId, pageIndex, pageSize)\n this.setState({\n pageIndex: pageIndex\n })\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " " }, { "example": _react2['default'].createElement(Demo32, null), "title": " 多列表头", "code": "/**\r\n *\r\n * @title 多列表头\r\n * @description columns[n] 可以内嵌 children,以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight,注:修改th的padding top和bottom置为0,否则会有影响\r\n *\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " columns[n] 可以内嵌 children,以渲染分组表头。", "scss_code": ".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}" }, { "example": _react2['default'].createElement(Demo35, null), "title": " 合并列后合计", "code": "/**\n *\n * @title 合并列后合计\n * @description 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\n \nlet ComplexTable = sum(Table);\n\nconst columns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: 100,\n fixed: \"left\"\n },\n {\n title: \"Other\",\n children: [\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: 200,\n sumCol: true,\n },\n {\n title: \"Address\",\n children: [\n {\n title: \"Street\",\n dataIndex: \"street\",\n key: \"street\",\n width: 200\n },\n {\n title: \"Block\",\n children: [\n {\n title: \"Building\",\n dataIndex: \"building\",\n key: \"building\",\n width: 100\n },\n {\n title: \"Door No.\",\n dataIndex: \"number\",\n key: \"number\",\n // width: 100,\n sumCol: true,\n }\n ]\n }\n ]\n }\n ]\n },\n // {\n // title: \"Company\",\n // children: [\n // {\n // title: \"Company Address\",\n // dataIndex: \"companyAddress\",\n // key: \"companyAddress\",\n // width: 100,\n // },\n // {\n // title: \"Company Name\",\n // dataIndex: \"companyName\",\n // key: \"companyName\",\n // width: 100,\n // }\n // ]\n // },\n {\n title: \"Gender\",\n dataIndex: \"gender\",\n key: \"gender\",\n width: 80,\n fixed: \"right\"\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n name: \"John Brown\"+i,\n age: i + Math.floor(Math.random()*10),\n street: \"Lake Park\",\n building: \"C\",\n number: 20 * Math.floor(Math.random()*10),\n companyAddress: \"Lake Street 42\",\n companyName: \"SoftLake Co\",\n gender: \"M\"\n });\n }\n return data;\n}\n\nclass Demo35 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData()\n };\n }\n\n changeData = ()=>{\n this.setState({\n data: getData()\n });\n }\n\n render() {\n const {data} = this.state;\n return (\n \n \n\n \n
\n );\n }\n}\n\n", "desc": " 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)" }, { "example": _react2['default'].createElement(Demo41, null), "title": " 编辑态表格", "code": "/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)\n*\n*/\n\nimport React from \"react\";\nimport {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from \"tinper-bee\";\nimport { Table, Datepicker } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderDate from \"tinper-bee/lib/DateRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, FormControl, Icon);\nconst DateRender = renderDate(Datepicker, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\nconst dataSource = [\n {\n key: \"boyuzhou\",\n value: \"jack\"\n },\n {\n key: \"renhualiu\",\n value: \"lucy\"\n },\n {\n key: \"yuzhao\",\n value: \"yiminghe\"\n }\n];\nclass Demo41 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n />\n )\n },\n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n reg={/^[0-9]+$/}\n />\n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n check = (flag, obj) => {\n console.log(flag);\n console.log(obj);\n };\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = (index, key) => {\n return value => {\n console.log(`selected ${value}`);\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n getData = () => {\n console.log(this.state.dataSource);\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n
\n
\n
\n );\n }\n}\n\n\n", "desc": " 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)" }, { "example": _react2['default'].createElement(Demo51, null), "title": " 左侧固定列", "code": "/**\n*\n* @title 左侧固定列\n* @description 固定列到表格的左侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"address\", dataIndex: \"address\", key: \"address\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo51 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的左侧" }, { "example": _react2['default'].createElement(Demo52, null), "title": " 右侧固定列", "code": "/**\n*\n* @title 右侧固定列\n* @description 固定列到表格的右侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\n\nconst columns5 = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 100\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 100,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 100\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 100\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:100,\n fixed: \"right\",\n render(text, record, index) {\n return (\n \n )\n }\n }\n];\n\nconst data5 = [\n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n d:\"操作\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"2操作\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"3操作\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"4操作\",\n key: \"4\"\n },\n];\n\nclass Demo52 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的右侧" }, { "example": _react2['default'].createElement(Demo53, null), "title": " 动态设置列锁定、解除锁定", "code": "/**\n*\n* @title 动态设置列锁定、解除锁定\n* @description 动态设置固、取消固定列\n* @description 动态固定列设置 一个table动态设置一个方向【fixed: \"left\",fixed: \"right\"】。\n*\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\n// const columns24 = [\n// {\n// title: \"Full Name\",\n// width: 100,\n// dataIndex: \"name\",\n// key: \"name\",\n// fixed: \"left\",\n// },\n// { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n// { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n// { title: \"Column 2\", dataIndex: \"address2\", key: \"2\" },\n// { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n// { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n// { title: \"Column 24\", dataIndex: \"address\", key: \"24\" },\n// { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n// { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n// { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n// ];\n\n\nconst columns24 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100, \n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 150 \n },\n {\n title: \"对手\",\n dataIndex: \"e\",\n key: \"e\",\n width: 100 \n },\n {\n title: \"帮派\",\n dataIndex: \"f\",\n key: \"f\",\n width: 100 \n },\n {\n title: \"武功类型\",\n dataIndex: \"g\",\n key: \"g\",\n width: 100 \n },\n {\n title: \"师傅\",\n dataIndex: \"k\",\n key: \"k\",\n // width: 100 \n },\n {\n title: \"攻击系数\",\n dataIndex: \"h\",\n key: \"h\",\n width: 100 \n }\n];\n\n\nconst data24 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: \"1\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: \"3\" }\n]; \n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns24\n }\n }\n\n \n onSelect = ({key,item})=>{ \n console.log(`${key} selected`); //获取key\n let currentObject = item.props.data; //获取选中对象的数据\n let {columns} = this.state;\n let fixedCols = [];\n let nonColums = [];\n columns.find(da=>{\n if(da.key == key){\n da.fixed?delete da.fixed:da.fixed = 'left';\n }\n da.fixed?fixedCols.push(da):nonColums.push(da);\n });\n \n columns = [...fixedCols,...nonColums]\n\n this.setState({\n columns\n });\n }\n //表头增加下拉菜单\n renderColumnsDropdown(columns) {\n const icon ='uf-arrow-down';\n \n return columns.map((originColumn,index) => {\n let column = Object.assign({}, originColumn);\n let menuInfo = [], title='锁定';\n if(originColumn.fixed){\n title = '解锁'\n }\n menuInfo.push({\n info:title,\n key:originColumn.key,\n index:index\n });\n const menu = (\n )\n column.title = (\n \n {column.title}\n \n \n \n \n \n );\n return column;\n });\n \n }\n\n render() {\n let {columns} = this.state;\n columns = this.renderColumnsDropdown(columns);\n return ;\n }\n}\n\n", "desc": " 动态设置固、取消固定列", "scss_code": "th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n" }, { "example": _react2['default'].createElement(Demo62, null), "title": " 按条件、值过滤", "code": "/**\n*\n* @title 按条件、值过滤\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns26 = [\n { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\n { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\n { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\n];\n\nconst data26 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo26 extends Component {\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n render() {\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns26}\n data={data26} />;\n }\n}\n\n", "desc": " 可以根据输入项目以及判断条件对表格内的数据进行过滤" }, { "example": _react2['default'].createElement(Demo63, null), "title": " 复杂表格中行过滤", "code": "/**\n*\n* @title 复杂表格中行过滤\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n*\n*/\n\n/**\n * @description \n */\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\nconst data27 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\nclass Demo27 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n dropdownvalue: []\n }\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onClick = (item) => {\n console.log(item);\n }\n\n render() {\n const menu1 = (\n )\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\n {\n title: \"\", width: 40, dataIndex: \"key\", key: \"key\", render: (text, record, index) => {\n return \n \n \n }\n },\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"年龄\",\n width: 180,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"日期\",\n width: 190,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"时间范围\",\n width: 290,\n dataIndex: \"mark\",\n key: \"mark\",\n filterType: \"daterange\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"地址\",\n width: 100,\n dataIndex: \"address\",\n key: \"address\",\n filterType: \"dropdown\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n }\n ];\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认500ms\n filterable={true}//是否开启过滤数据功能\n getSelectedDataFunc={this.getSelectedDataFunc}\n bordered\n multiSelect={multiObj}\n columns={columns27}\n data={data27} />;\n }\n}\n\n", "desc": " 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等" }, { "example": _react2['default'].createElement(Demo71, null), "title": " 列过滤面板", "code": "/**\n*\n* @title 列过滤面板\n* @description 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Popover,Popconfirm} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data21 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e: \"操作\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠',e: \"操作\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e: \"操作\", key: \"3\" }\n];\n\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\n\nconst defaultProps21 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo21 extends Component {\n constructor(props) {\n super(props);\n this.state ={\n columns21: [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\"\n // width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n // width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n ifshow:false,\n // width: 200,\n // sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"操作\",\n dataIndex: \"e\",\n key: \"e\",\n render(text, record, index){\n return (\n \n );\n }\n }\n ]};\n }\n afterFilter = (optData,columns)=>{\n if(optData.key == 'b'){\n if(optData.ifshow){\n columns[2].ifshow = false;\n }else{\n columns[2].ifshow = true;\n }\n this.setState({\n columns21 :columns,\n showFilterPopover:true\n });\n }\n \n }\n \n render() {\n \n return ;\n }\n}\nDemo21.defaultProps = defaultProps21;\n\n\n", "desc": " 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数" }, { "example": _react2['default'].createElement(Demo81, null), "title": " 列排序", "code": "/**\n* @title 列排序\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\n\nlet ComplexTable = sort(Table, Icon);\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n render() {\n\n return ;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n", "desc": " column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称" }, { "example": _react2['default'].createElement(Demo82, null), "title": " 后端列排序", "code": "/**\n* @title 后端列排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\nlet ComplexTable = sort(Table, Icon);\n\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"分数\",\n dataIndex: \"e\",\n key: \"e\",\n sorter: (a, b) => a.c - b.c\n },\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\n];\n\nconst defaultProps = {\n prefixCls: \"bee-table\"\n};\nclass Demo28 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n /**\n * 后端获取数据\n */\n sortFun = (sortParam)=>{\n console.info(sortParam);\n //将参数传递给后端排序\n }\n render() {\n let sortObj = {\n mode:'multiple',\n backSource:true,\n sortFun:this.sortFun\n }\n return ;\n }\n}\nDemo28.defaultProps = defaultProps;\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo83, null), "title": " 多列排序", "code": "/**\n *\n * @title 多列排序\n * @description 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox,Button,Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\nimport sort from \"tinper-bee/lib/sort.js\";;\nimport sum from \"tinper-bee/lib/sum.js\";;\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n className:'dfasd',\n width: 200\n },\n {\n title: \"功力指数\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"成绩\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: 675, c: 30, d: \"内行\",e:100, key: \"2\" },\n { a: \"令狐冲\", b: 43, c: 41, d: \"大侠\",e:90, key: \"1\" },\n { a: \"令狐冲1\", b: 43, c: 81, d: \"大侠\", e:120,key: \"4\" },\n { a: \"令狐冲2\", b: 43, c: 81, d: \"大侠\", e:130,key: \"5\" },\n { a: \"郭靖\", b: 153, c: 25, d: \"大侠\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);\n\nclass Demo13 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data13: data13,\n selectedRow: this.selectedRow,\n selectDisabled: this.selectDisabled\n };\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n selectDisabled = (record, index) => {\n // console.log(record);\n if (index === 1) {\n return true;\n }\n return false;\n };\n selectedRow = (record, index) => {\n // console.log(record);\n if (index === 0) {\n return true;\n }\n return false;\n };\n onClick = () => {\n this.setState({\n selectedRow: function() {}\n });\n };\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let sortObj = {\n mode:'multiple'\n }\n \n return (\n \n \n \n
\n );\n }\n}\n", "desc": " 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)" }, { "example": _react2['default'].createElement(Demo91, null), "title": " 拖拽改变列顺序", "code": "/**\n*\n* @title 拖拽改变列顺序\n* @description 点击列的表头,进行左右拖拽,注意:固定列不可以交换\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns22 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200,\n }\n];\n\nconst data22 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return ;\n }\n}\nDemo22.defaultProps = defaultProps22;\n\n\n", "desc": " 点击列的表头,进行左右拖拽,注意:固定列不可以交换" }, { "example": _react2['default'].createElement(Demo92, null), "title": " 拖拽改变列宽度", "code": "/**\n*\n* @title 拖拽改变列宽度\n* @description 注:不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n }, \n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return {\n console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n", "desc": " 注:不支持tree结构的表头、合并表头的table" }, { "example": _react2['default'].createElement(Demo101, null), "title": " 嵌套子表格", "code": "/**\n*\n* @title 嵌套子表格\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Popconfirm } from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\nconst DragColumnTable = dragColumn(Table);\nconst columns16 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst columns17 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\n\nclass Demo16 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{}\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 42 * (this.state.data_obj[record.key].length+ 2);\n \n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格" }, { "example": _react2['default'].createElement(Demo102, null), "title": " 层级树型展示", "code": "/**\n*\n* @title 层级树型展示\n* @description 通过在data中配置children数据,来自动生成树形表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n\n constructor(props){\n super(props);\n this.state = {\n data: data4,\n factoryValue: 0,\n selectedRow: new Array(data4.length)//状态同步\n }\n }\n\n render() {\n return {\n if (this.state.selectedRow[index]) {\n return 'selected';\n } else {\n return '';\n }\n }}\n onRowClick={(record,index,indent)=>{\n let selectedRow = new Array(this.state.data.length);\n selectedRow[index] = true;\n this.setState({\n factoryValue: record,\n selectedRow: selectedRow\n });\n }}\n \n columns={columns4} data={data4} />;\n }\n}\n\n\n", "desc": " 通过在data中配置children数据,来自动生成树形表格" }, { "example": _react2['default'].createElement(Demo103, null), "title": " 选中行颜色、自定义表格标题和表尾", "code": "/**\r\n*\r\n* @title 选中行颜色、自定义表格标题和表尾\r\n* @description\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip,} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width:80 , className:\"rowClassName\"},\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n];\r\n\r\nconst data = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"黄蓉\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nclass Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n {\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\r\n title={currentData => 标题: 这是一个标题
}\r\n footer={currentData => 表尾: 我是小尾巴
}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": "" }, { "example": _react2['default'].createElement(Demo104, null), "title": " 自定义行高", "code": "/**\n*\n* @title 自定义行高\n* @description 设置`height`属性自定义表格行高,设置`headerHeight`属性自定义表头高度。\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n \n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": " 设置`height`属性自定义表格行高,设置`headerHeight`属性自定义表头高度。" }, { "example": _react2['default'].createElement(Demo105, null), "title": " 自定义行、列合并", "code": "/**\n*\n* @title 自定义行、列合并\n* @description 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst renderContent = (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n};\n\nconst columns = [{\n title: 'Name',\n key: \"name\",\n dataIndex: 'name',\n render: (text, row, index) => {\n if (index < 4) {\n return {text};\n }\n return {\n children: {text},\n props: {\n colSpan: 5,\n },\n };\n },\n}, {\n title: 'Age',\n key: \"Age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: 'Home phone',\n colSpan: 2,\n key: \"tel\",\n dataIndex: 'tel',\n render: (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 2) {\n obj.props.rowSpan = 2;\n }\n if (index === 3) {\n obj.props.rowSpan = 0;\n }\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n },\n}, {\n title: 'Phone',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: 'Address',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\nconst data = [{\n key: '1',\n name: 'John Brown',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: 'New York No. 1 Lake Park',\n}, {\n key: '2',\n name: 'Jim Green',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: 'London No. 1 Lake Park',\n}, {\n key: '3',\n name: 'Joe Black',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Sidney No. 1 Lake Park',\n}, {\n key: '4',\n name: 'Jim Red',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'London No. 2 Lake Park',\n}, {\n key: '5',\n name: 'Jake White',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Dublin No. 2 Lake Park',\n}];\n\nclass Demo15 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n\n", "desc": " 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。" }, { "example": _react2['default'].createElement(Demo121, null), "title": " 多选表格", "code": "/**\r\n*\r\n* @title 多选表格\r\n* @description 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport {Checkbox} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n\r\nconst columns12 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst data12 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\",_checked:true },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" ,_checked:false},\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" ,_checked:false},\r\n { a: \"郭靖1\", b: \"男\", c: 25,d:'大侠', key: \"4\" ,_disabled:true},\r\n { a: \"郭靖2\", b: \"男\", c: 25,d:'大侠', key: \"5\" ,_checked:false}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data12\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 如果在回调中增加setState逻辑,需要同步data中的_checked属性。即下面的代码\r\n // const allChecked = selectedList.length == 0?false:true;\r\n // record为undefind则为全选或者全不选\r\n // if(!record){\r\n // data12.forEach(item=>{\r\n // item._checked = allChecked;\r\n // })\r\n // }else{\r\n // data12[index]['_checked'] = record._checked;\r\n // } \r\n\r\n \r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n {\r\n if (record._checked) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n", "desc": " 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。" }, { "example": _react2['default'].createElement(Demo131, null), "title": " 滚动加载", "code": "/**\n*\n* @title 滚动加载\n* @description 万行数据渲染\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo30 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n", "desc": " 万行数据渲染", "scss_code": ".big-data tr td {\n // height: 48px;\n}" }, { "example": _react2['default'].createElement(Demo132, null), "title": " 嵌套子表格滚动加载", "code": "/**\n*\n* @title 嵌套子表格滚动加载\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst outColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst innerColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [ ...new Array(10000) ].map((e, i) => {\n return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n })\n\n\n\n\n\nclass Demo31 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{\n 0:[\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ],\n 1: [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ],\n }\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 200;\n let innderData = [ ...new Array(100) ].map((e, i) => {\n return { a: index+\"-\"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+\"-\"+ i };\n })\n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格" }, { "example": _react2['default'].createElement(Demo133, null), "title": " 多功能表格滚动加载", "code": "/**\n*\n* @title 多功能表格滚动加载\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip,Checkbox,Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\n\nlet ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);\n\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'50',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo32 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n\n render() {\n return (\n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n getSelectedDataFunc={this.getSelectedDataFunc}/>\n\n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo134, null), "title": " 树状表滚动加载", "code": "/**\n*\n* @title 树状表滚动加载\n* 【Tooltip】\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'150',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(1000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }else{\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }\n return rs;\n })\n\n\nclass Demo34 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n onExpandedRowsChange = (params)=>{\n console.log(params);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo161, null), "title": " 表格+分页", "code": "/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns8 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst pageData = {\n 1: [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n ],\n 2: [\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\n { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\n", "desc": " 点击分页联动表格", "scss_code": ".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}" }, { "example": _react2['default'].createElement(Demo162, null), "title": " 表格+搜索", "code": "/**\n *\n * @title 表格+搜索\n * @description 搜索刷新表格数据\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Icon,FormControl,InputGroup} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let { onSearch } = this.props;\n this.setState({\n empty: true\n });\n onSearch && onSearch(this.state.searchValue);\n };\n\n /**\n * 捕获回车\n * @param e\n */\n handleKeyDown = e => {\n if (e.keyCode === 13) {\n this.handleSearch();\n }\n };\n\n /**\n * 输入框改变\n * @param e\n */\n handleChange = (e) => {\n this.setState({\n searchValue: e\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let { onEmpty } = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty ? (\n \n ) : null}\n\n \n \n \n \n );\n }\n}\n\nconst columns9 = [\n {\n title: \"姓名\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst userData = [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: userData\n };\n }\n\n handleSearch = value => {\n if (value === \"\") {\n return this.setState({\n data: userData\n });\n }\n let regExp = new RegExp(value, \"ig\");\n let data = userData.filter(item => regExp.test(item.a));\n this.setState({\n data\n });\n };\n\n handleEmpty = () => {\n this.setState({\n data: userData\n });\n };\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 搜索刷新表格数据" }, { "example": _react2['default'].createElement(Demo181, null), "title": " 主子表", "code": "/**\n *\n * @title 主子表\n * @description 点击主表行,子表联动切换\n * @description 具体场景演示请前往典型案例(http://yanshi01.app.yyuap.com/wbalone/index.html#/)\n *\n */\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns7 = [\n { title: \"班级\", dataIndex: \"a\", key: \"a\" },\n { title: \"人数\", dataIndex: \"b\", key: \"b\" },\n { title: \"班主任\", dataIndex: \"c\", key: \"c\" },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data7 = [\n { a: \"02级一班\", b: \"2\", c: \"欧阳锋\", d: \"大侠\", key: \"1\" },\n { a: \"03级二班\", b: \"3\", c: \"归海一刀\", d: \"大侠\", key: \"2\" },\n { a: \"05级三班\", b: \"1\", c: \"一拳超人\", d: \"愣头青\", key: \"3\" }\n];\n\nconst columns7_1 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\" },\n { title: \"班级\", dataIndex: \"b\", key: \"b\" },\n { title: \"系别\", dataIndex: \"c\", key: \"c\" }\n];\n\nclass Demo7 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n children_data: [],\n selectedRowIndex: -1\n };\n }\n\n rowclick = (record, index) => {\n if (record.a === \"02级一班\") {\n this.setState({\n children_data: [\n { a: \"郭靖\", b: \"02级一班\", c: \"文学系\", key: \"1\" },\n { a: \"黄蓉\", b: \"02级一班\", c: \"文学系\", key: \"2\" }\n ],\n selectedRowIndex: index\n });\n } else if (record.a === \"03级二班\") {\n this.setState({\n children_data: [\n { a: \"杨过\", b: \"03级二班\", c: \"外语系\", key: \"1\" },\n { a: \"小龙女\", b: \"03级二班\", c: \"外语系\", key: \"2\" },\n { a: \"傻姑\", b: \"03级二班\", c: \"外语系\", key: \"3\" }\n ],\n selectedRowIndex: index\n });\n } else if (record.a === \"05级三班\") {\n this.setState({\n children_data: [{ a: \"金圣叹\", b: \"05级三班\", c: \"美术系\", key: \"1\" }],\n selectedRowIndex: index\n });\n }\n };\n\n render() {\n return (\n \n {/*
{\n if (this.state.selectedRowIndex == index) {\n return 'selected';\n } else {\n return '';\n }\n }}\n title={currentData => 标题: 我是主表
}\n />\n 标题: 我是子表
}\n /> */}\n \n );\n }\n}\n\n\n", "desc": " 点击主表行,子表联动切换" }];
+ var Demo01 = __webpack_require__(533);var Demo02 = __webpack_require__(535);var Demo03 = __webpack_require__(536);var Demo04 = __webpack_require__(537);var Demo05 = __webpack_require__(538);var Demo11 = __webpack_require__(539);var Demo12 = __webpack_require__(540);var Demo21 = __webpack_require__(541);var Demo32 = __webpack_require__(542);var Demo35 = __webpack_require__(543);var Demo41 = __webpack_require__(545);var Demo51 = __webpack_require__(549);var Demo52 = __webpack_require__(550);var Demo53 = __webpack_require__(551);var Demo62 = __webpack_require__(552);var Demo63 = __webpack_require__(553);var Demo71 = __webpack_require__(557);var Demo81 = __webpack_require__(563);var Demo82 = __webpack_require__(564);var Demo83 = __webpack_require__(565);var Demo91 = __webpack_require__(566);var Demo92 = __webpack_require__(569);var Demo101 = __webpack_require__(570);var Demo102 = __webpack_require__(571);var Demo103 = __webpack_require__(572);var Demo104 = __webpack_require__(573);var Demo105 = __webpack_require__(574);var Demo121 = __webpack_require__(575);var Demo131 = __webpack_require__(576);var Demo132 = __webpack_require__(578);var Demo133 = __webpack_require__(579);var Demo134 = __webpack_require__(580);var Demo161 = __webpack_require__(581);var Demo162 = __webpack_require__(582);var DemoArray = [{ "example": _react2['default'].createElement(Demo01, null), "title": " 基本表格", "code": "/**\n*\n* @title 基本表格\n* 【Tooltip】\n* @description 鼠标hover行时呼出操作按钮\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500, \"textAlign\":\"center\"},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200, \"textAlign\":\"center\"}\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo01 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 鼠标hover行时呼出操作按钮" }, { "example": _react2['default'].createElement(Demo02, null), "title": " 默认无数据展示", "code": "/**\r\n*\r\n* @title 默认无数据展示\r\n* @description 无数据时显示效果展示(可自定义)\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table, Icon } from 'tinper-bee';\r\n\n\r\n\r\nconst columns02 = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"Address\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n }\r\n ];\r\n \r\n const data02 = [];\r\n\r\n const emptyFunc = () => \r\n \r\nclass Demo02 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n", "desc": " 无数据时显示效果展示(可自定义)", "scss_code": ".demo02 {\n .u-table-placeholder i{\n font-size: 60px;\n }\n}" }, { "example": _react2['default'].createElement(Demo03, null), "title": " 固定表头", "code": "/**\r\n*\r\n* @title 固定表头\r\n* @description 设置`scroll.y`指定滚动区域的高度,添加纵向滚动条,达到固定表头效果\r\n*/\r\n\r\nimport React, { Component } from 'react';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns03 = [\r\n {\r\n title: \"Full Name\",\r\n width: 100,\r\n dataIndex: \"name\",\r\n key: \"name\"\r\n },\r\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\r\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\r\n];\r\n\r\nconst data03 = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },{\r\n key: \"11\",\r\n name: \"John Brown\",\r\n age: 32,\r\n address: \"New York Park\"\r\n },\r\n {\r\n key: \"12\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"13\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n },\r\n {\r\n key: \"14\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n address: \"London Park\"\r\n }\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return ;\r\n }\r\n}\r\n\r\n", "desc": " 设置`scroll.y`指定滚动区域的高度,添加纵向滚动条,达到固定表头效果" }, { "example": _react2['default'].createElement(Demo04, null), "title": " 隔行换色", "code": "/**\n*\n* @title 隔行换色\n* @description 可自定义斑马线颜色\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\nconst columns04 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data04 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo04 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 可自定义斑马线颜色", "scss_code": ".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}" }, { "example": _react2['default'].createElement(Demo05, null), "title": " 表格 Loading 加载", "code": "/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @description loading可以传boolean或者object对象,object为bee-loading组件的参数类型\r\n*\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button,Popconfirm} from \"tinper-bee\";\r\n\r\nconst columns05 = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n render(text, record, index) {\r\n return (\r\n \r\n \r\n 一些操作\r\n \r\n \r\n );\r\n }\r\n }\r\n];\r\n\r\nconst data05 = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n \r\n
\r\n
标题: 这是一个标题
}\r\n footer={currentData => 表尾: 我是小尾巴
}\r\n // loading={this.state.loading}或者是boolean\r\n loading={{show:this.state.loading}}\r\n />\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " loading可以传boolean或者object对象,object为bee-loading组件的参数类型" }, { "example": _react2['default'].createElement(Demo11, null), "title": " 横向滚动条", "code": "/**\n*\n* @title 横向滚动条\n* @description 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns11 = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 200, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 200, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 200\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 200\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 200\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 200,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 200\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 200\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 200\n }\n];\n\nconst data11 = [\n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n key: \"4\"\n },\n];\n\nclass Demo11 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值" }, { "example": _react2['default'].createElement(Demo12, null), "title": " 纵向滚动条", "code": "/**\n*\n* @title 纵向滚动条\n* @description 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst columns12 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\"},\n { title: \"Address\", dataIndex: \"address\", key: \"1\" }\n];\n\nconst data12 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },{\n key: \"11\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"12\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"13\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"14\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\nclass Demo12 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 设置`scroll`属性支持横向或纵向滚动,x/y的取值可以是正整数、百分比、布尔值" }, { "example": _react2['default'].createElement(Demo21, null), "title": " 渲染本地数据", "code": "/**\n*\n* @title 渲染本地数据\n* @description \n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo21 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " " }, { "example": _react2['default'].createElement(Demo32, null), "title": " 多列表头", "code": "/**\r\n *\r\n * @title 多列表头\r\n * @description columns[n] 可以内嵌 children,以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight,注:修改th的padding top和bottom置为0,否则会有影响\r\n *\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": " columns[n] 可以内嵌 children,以渲染分组表头。", "scss_code": ".demo32{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}" }, { "example": _react2['default'].createElement(Demo35, null), "title": " 合并列后合计", "code": "/**\n *\n * @title 合并列后合计\n * @description 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Button} from \"tinper-bee\";\nimport { Table } from 'tinper-bee'; \nimport sum from \"tinper-bee/lib/sum.js\";;\n \nlet ComplexTable = sum(Table);\n\nconst columns = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"Other\",\n children: [\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: 200,\n sumCol: true,\n },\n {\n title: \"Address\",\n children: [\n {\n title: \"Street\",\n dataIndex: \"street\",\n key: \"street\",\n width: 200\n },\n {\n title: \"Block\",\n children: [\n {\n title: \"Building\",\n dataIndex: \"building\",\n key: \"building\",\n width: 100\n },\n {\n title: \"Door No.\",\n dataIndex: \"number\",\n key: \"number\",\n // width: 100,\n sumCol: true,\n }\n ]\n }\n ]\n }\n ]\n },\n // {\n // title: \"Company\",\n // children: [\n // {\n // title: \"Company Address\",\n // dataIndex: \"companyAddress\",\n // key: \"companyAddress\",\n // width: 100,\n // },\n // {\n // title: \"Company Name\",\n // dataIndex: \"companyName\",\n // key: \"companyName\",\n // width: 100,\n // }\n // ]\n // },\n {\n title: \"Gender\",\n dataIndex: \"gender\",\n key: \"gender\",\n width: 80,\n fixed: \"right\"\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n name: \"John Brown\"+i,\n age: i + Math.floor(Math.random()*10),\n street: \"Lake Park\",\n building: \"C\",\n number: 20 * Math.floor(Math.random()*10),\n companyAddress: \"Lake Street 42\",\n companyName: \"SoftLake Co\",\n gender: \"M\"\n });\n }\n return data;\n}\n\nclass Demo35 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData()\n };\n }\n\n changeData = ()=>{\n this.setState({\n data: getData()\n });\n }\n\n render() {\n const {data} = this.state;\n return (\n \n \n\n \n
\n );\n }\n}\n\n", "desc": " 合并标题后的合计,且支持多字段统计(通过使用的封装好的功能方法实现复杂功能,简单易用!)" }, { "example": _react2['default'].createElement(Demo41, null), "title": " 编辑态表格", "code": "/**\n*\n* @title 编辑态表格\n* @description 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)\n*\n*/\n\nimport React from \"react\";\nimport {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from \"tinper-bee\";\nimport { Table, Datepicker } from 'tinper-bee';\nimport renderInput from \"tinper-bee/lib/InputRender.js\";;\nimport renderDate from \"tinper-bee/lib/DateRender.js\";;\nimport renderSelect from \"tinper-bee/lib/SelectRender.js\";;\n\nconst InputRender = renderInput(Form, FormControl, Icon);\nconst DateRender = renderDate(Datepicker, Icon);\nconst SelectRender = renderSelect(Select, Icon);\n\nconst format = \"YYYY-MM-DD\";\nconst format2 = \"YYYY-MM\";\nconst format3 = \"YYYY-MM-DD HH:mm:ss\";\n\nconst dateInputPlaceholder = \"选择日期\";\nconst dateInputPlaceholder2 = \"选择年月\";\nconst dataSource = [\n {\n key: \"boyuzhou\",\n value: \"jack\"\n },\n {\n key: \"renhualiu\",\n value: \"lucy\"\n },\n {\n key: \"yuzhao\",\n value: \"yiminghe\"\n }\n];\nclass Demo41 extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: [\n {\n key: \"0\",\n name: \"沉鱼\",\n number: \"10\",\n age: \"y\",\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"1\",\n name: \"落雁\",\n number: \"100\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"2\",\n name: \"闭月\",\n number: \"1000\",\n age: \"n\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n },\n {\n key: \"3\",\n name: \"羞花\",\n number: \"9999\",\n age: \"y\",\n address: \"lucy\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n }\n ],\n count: 4\n };\n this.columns = [\n {\n title: \"普通输入\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n />\n )\n },\n {\n title: \"货币输入\",\n dataIndex: \"number\",\n key: \"number\",\n width: \"150px\",\n render: (text, record, index) => (\n \n \n \n }\n reg={/^[0-9]+$/}\n />\n )\n },\n {\n title: \"复选\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"100px\",\n render: (text, record, index) => (\n \n )\n },\n {\n title: \"下拉框\",\n dataIndex: \"address\",\n key: \"address\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n \n \n \n \n \n );\n }\n },\n {\n title: \"年月日\",\n dataIndex: \"datepicker\",\n key: \"datepicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n },\n {\n title: \"年月\",\n dataIndex: \"MonthPicker\",\n key: \"MonthPicker\",\n width: \"200px\",\n render: (text, record, index) => {\n return (\n \n );\n }\n }\n ];\n }\n check = (flag, obj) => {\n console.log(flag);\n console.log(obj);\n };\n\n onInputChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onCheckChange = (index, key) => {\n return value => {\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onSelectChange = (index, key) => {\n return value => {\n console.log(`selected ${value}`);\n const dataSource = [...this.state.dataSource];\n dataSource[index][key] = value;\n this.setState({ dataSource });\n };\n };\n onDateChange = d => {\n console.log(d);\n };\n onDateSelect = d => {\n console.log(d);\n };\n onDelete = index => {\n return () => {\n const dataSource = [...this.state.dataSource];\n dataSource.splice(index, 1);\n this.setState({ dataSource });\n };\n };\n handleAdd = () => {\n const { count, dataSource } = this.state;\n const newData = {\n key: count,\n name: `凤姐 ${count}`,\n age: 32,\n address: \"jack\",\n datepicker: \"2017-06-12\",\n MonthPicker: \"2017-02\"\n };\n this.setState({\n dataSource: [...dataSource, newData],\n count: count + 1\n });\n };\n\n getBodyWrapper = body => {\n return (\n \n {body.props.children}\n \n );\n };\n getData = () => {\n console.log(this.state.dataSource);\n };\n render() {\n const { dataSource } = this.state;\n const columns = this.columns;\n return (\n \n
\n
\n
\n
\n );\n }\n}\n\n\n", "desc": " 这是带有多种不同格式的编辑态表格(编辑态是通过使用不同的render来达到不同编辑格式)" }, { "example": _react2['default'].createElement(Demo51, null), "title": " 左侧固定列", "code": "/**\n*\n* @title 左侧固定列\n* @description 固定列到表格的左侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\n\nconst columns5 = [\n {\n title: \"Full Name\",\n width: 100,\n dataIndex: \"name\",\n key: \"name\",\n fixed: \"left\"\n },\n { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n { title: \"address\", dataIndex: \"address\", key: \"address\" }\n];\n\nconst data5 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n address: \"New York Park\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n address: \"London Park\"\n }\n];\n\nclass Demo51 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的左侧" }, { "example": _react2['default'].createElement(Demo52, null), "title": " 右侧固定列", "code": "/**\n*\n* @title 右侧固定列\n* @description 固定列到表格的右侧\n*\n*/\n\n\n\nimport React, { Component } from 'react';\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\n\nconst columns5 = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 100, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 100\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 100\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 100\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 300\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 100,\n \n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 100\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 100\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n },\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:100,\n fixed: \"right\",\n render(text, record, index) {\n return (\n \n )\n }\n }\n];\n\nconst data5 = [\n { \n index: 1, \n orderCode:\"2343\", \n supplierName: \"xxx\",\n type_name: \"123\",\n purchasing:'内行', \n purchasingGroup:\"323\",\n voucherDate:\"kkkk\",\n approvalState_name:\"vvvv\",\n confirmState_name:\"aaaa\",\n closeState_name:\"vnnnnn\",\n d:\"操作\",\n key: \"1\"\n }, \n { \n index: 2, \n _checked:true,\n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"2操作\",\n key: \"2\"\n },\n { \n index: 3, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n _disabled:true,\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"3操作\",\n key: \"3\"\n },\n { \n index: 4, \n orderCode:\"222\", \n supplierName: \"22xxx\",\n type_name: \"1223\",\n purchasing:'内行2', \n purchasingGroup:\"3223\",\n voucherDate:\"222kk\",\n approvalState_name:\"22vvvv\",\n confirmState_name:\"2aaaa\",\n closeState_name:\"2vnnnnn\",\n d:\"4操作\",\n key: \"4\"\n },\n];\n\nclass Demo52 extends Component {\n render() {\n return ;\n }\n}\n\n", "desc": " 固定列到表格的右侧" }, { "example": _react2['default'].createElement(Demo53, null), "title": " 动态设置列锁定、解除锁定", "code": "/**\n*\n* @title 动态设置列锁定、解除锁定\n* @description 动态设置固、取消固定列\n* @description 动态固定列设置 一个table动态设置一个方向【fixed: \"left\",fixed: \"right\"】。\n*\n*/\nimport React, { Component } from 'react';\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst { Item } = Menu;\n// const columns24 = [\n// {\n// title: \"Full Name\",\n// width: 100,\n// dataIndex: \"name\",\n// key: \"name\",\n// fixed: \"left\",\n// },\n// { title: \"Age\", width: 100, dataIndex: \"age\", key: \"age\", fixed: \"left\" },\n// { title: \"Column 1\", dataIndex: \"address\", key: \"1\" },\n// { title: \"Column 2\", dataIndex: \"address2\", key: \"2\" },\n// { title: \"Column 3\", dataIndex: \"address\", key: \"3\" },\n// { title: \"Column 4\", dataIndex: \"address\", key: \"4\" },\n// { title: \"Column 24\", dataIndex: \"address\", key: \"24\" },\n// { title: \"Column 6\", dataIndex: \"address\", key: \"6\" },\n// { title: \"Column 7\", dataIndex: \"address\", key: \"7\" },\n// { title: \"Column 8\", dataIndex: \"address\", key: \"8\" }\n// ];\n\n\nconst columns24 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100,\n fixed: \"left\",\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 100, \n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 150 \n },\n {\n title: \"对手\",\n dataIndex: \"e\",\n key: \"e\",\n width: 100 \n },\n {\n title: \"帮派\",\n dataIndex: \"f\",\n key: \"f\",\n width: 100 \n },\n {\n title: \"武功类型\",\n dataIndex: \"g\",\n key: \"g\",\n width: 150 \n },\n {\n title: \"师傅\",\n dataIndex: \"k\",\n key: \"k\",\n // width: 100 \n },\n {\n title: \"攻击系数\",\n dataIndex: \"h\",\n key: \"h\",\n width: 100 \n }\n];\n\n\nconst data24 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: \"1\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: \"3\" }\n]; \n \nclass Demo24 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n columns:columns24\n }\n }\n\n \n onSelect = ({key,item})=>{ \n console.log(`${key} selected`); //获取key\n let currentObject = item.props.data; //获取选中对象的数据\n let {columns} = this.state;\n let fixedCols = [];\n let nonColums = [];\n columns.find(da=>{\n if(da.key == key){\n da.fixed?delete da.fixed:da.fixed = 'left';\n }\n da.fixed?fixedCols.push(da):nonColums.push(da);\n });\n \n columns = [...fixedCols,...nonColums]\n\n this.setState({\n columns\n });\n }\n //表头增加下拉菜单\n renderColumnsDropdown(columns) {\n const icon ='uf-arrow-down';\n \n return columns.map((originColumn,index) => {\n let column = Object.assign({}, originColumn);\n let menuInfo = [], title='锁定';\n if(originColumn.fixed){\n title = '解锁'\n }\n menuInfo.push({\n info:title,\n key:originColumn.key,\n index:index\n });\n const menu = (\n )\n column.title = (\n \n {column.title}\n \n \n \n \n \n );\n return column;\n });\n \n }\n\n render() {\n let {columns} = this.state;\n columns = this.renderColumnsDropdown(columns);\n return ;\n }\n}\n\n", "desc": " 动态设置固、取消固定列", "scss_code": "th{\n .drop-menu{\n .uf{\n font-size: 12px;\n visibility: hidden;\n margin-left: 15px;\n }\n \n \n }\n &:hover{\n .uf{\n visibility: visible;\n }\n }\n\n}\n\n" }, { "example": _react2['default'].createElement(Demo62, null), "title": " 按条件、值过滤", "code": "/**\n*\n* @title 按条件、值过滤\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns26 = [\n { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\n { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\n { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\n { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\n];\n\nconst data26 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\nclass Demo26 extends Component {\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n render() {\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认300ms\n filterable={true}//是否开启过滤数据功能\n bordered\n columns={columns26}\n data={data26} />;\n }\n}\n\n", "desc": " 可以根据输入项目以及判断条件对表格内的数据进行过滤" }, { "example": _react2['default'].createElement(Demo63, null), "title": " 复杂表格中行过滤", "code": "/**\n*\n* @title 复杂表格中行过滤\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\n*\n*/\n\n/**\n * @description \n */\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Dropdown,Menu} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst SubMenu = Menu.SubMenu;\nconst MenuItemGroup = Menu.ItemGroup;\n\nconst data27 = [\n {\n key: \"1\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-19\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"2\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"朝阳区\",\n mark: \"无\"\n },\n {\n key: \"3\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n },\n {\n key: \"4\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"东城区\",\n mark: \"无\"\n }, {\n key: \"5\",\n name: \"John Brown\",\n age: 32,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"6\",\n name: \"Jim Green\",\n age: 48,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"7\",\n name: \"Jim Green\",\n age: 40,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n },\n {\n key: \"8\",\n name: \"Jim Green\",\n age: 38,\n date: \"2018-09-18\",\n address: \"海淀区\",\n mark: \"无\"\n }\n];\n\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\nclass Demo27 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n dropdownvalue: []\n }\n }\n handlerFilterChange = (key, val, condition) => {\n console.log('参数:key=', key, ' value=', val, 'condition=', condition);\n }\n\n handlerFilterClear = (key) => {\n console.log('清除条件', key);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onClick = (item) => {\n console.log(item);\n }\n\n render() {\n const menu1 = (\n )\n let multiObj = {\n type: \"checkbox\"\n };\n let columns27 = [\n {\n title: \"\", width: 40, dataIndex: \"key\", key: \"key\", render: (text, record, index) => {\n return \n \n \n }\n },\n {\n title: \"姓名\",\n width: 180,\n dataIndex: \"name\",\n key: \"name\",\n filterType: \"text\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"年龄\",\n width: 180,\n dataIndex: \"age\",\n key: \"age\",\n filterType: \"number\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"日期\",\n width: 190,\n dataIndex: \"date\",\n key: \"date\",\n filterType: \"date\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"string\"//字符条件\n },\n {\n title: \"时间范围\",\n width: 290,\n dataIndex: \"mark\",\n key: \"mark\",\n filterType: \"daterange\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n },\n {\n title: \"地址\",\n width: 100,\n dataIndex: \"address\",\n key: \"address\",\n filterType: \"dropdown\",//输入框类型\n filterDropdown: \"show\",//显示条件\n filterDropdownType: \"number\"//字符条件\n }\n ];\n return ()\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\n filterDelay={500}//输入文本多少ms触发回调函数,默认500ms\n filterable={true}//是否开启过滤数据功能\n getSelectedDataFunc={this.getSelectedDataFunc}\n bordered\n multiSelect={multiObj}\n columns={columns27}\n data={data27} />;\n }\n}\n\n", "desc": " 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等" }, { "example": _react2['default'].createElement(Demo71, null), "title": " 列过滤面板", "code": "/**\n*\n* @title 列过滤面板\n* @description 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon,Checkbox,Popover,Popconfirm} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\nimport sum from \"tinper-bee/lib/sum\";;\n\nconst data21 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行',e: \"操作\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠',e: \"操作\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠',e: \"操作\", key: \"3\" }\n];\n\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\n\nconst defaultProps21 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo21 extends Component {\n constructor(props) {\n super(props);\n this.state ={\n columns21: [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\"\n // width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n // width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n ifshow:false,\n // width: 200,\n // sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"操作\",\n dataIndex: \"e\",\n key: \"e\",\n render(text, record, index){\n return (\n \n );\n }\n }\n ]};\n }\n afterFilter = (optData,columns)=>{\n if(optData.key == 'b'){\n if(optData.ifshow){\n columns[2].ifshow = false;\n }else{\n columns[2].ifshow = true;\n }\n this.setState({\n columns21 :columns,\n showFilterPopover:true\n });\n }\n \n }\n \n render() {\n \n return ;\n }\n}\nDemo21.defaultProps = defaultProps21;\n\n\n", "desc": " 点击表格右侧按钮,进行表格列的数据过滤。可以自定义设置显示某列,通过ifshow属性控制,默认为true都显示。afterFilter为过滤之后的回调函数" }, { "example": _react2['default'].createElement(Demo81, null), "title": " 列排序", "code": "/**\n* @title 列排序\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\n\nlet ComplexTable = sort(Table, Icon);\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst defaultProps11 = {\n prefixCls: \"bee-table\"\n};\nclass Demo11 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n render() {\n\n return ;\n }\n}\nDemo11.defaultProps = defaultProps11;\n\n\n", "desc": " column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据,c代表比较当前对象的字段名称" }, { "example": _react2['default'].createElement(Demo82, null), "title": " 后端列排序", "code": "/**\n* @title 后端列排序\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport sort from \"tinper-bee/lib/sort.js\";;\nlet ComplexTable = sort(Table, Icon);\n\nconst columns11 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n },\n {\n title: \"分数\",\n dataIndex: \"e\",\n key: \"e\",\n sorter: (a, b) => a.c - b.c\n },\n];\n\nconst data11 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\n];\n\nconst defaultProps = {\n prefixCls: \"bee-table\"\n};\nclass Demo28 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n sortOrder: \"\",\n data: data11\n };\n }\n /**\n * 后端获取数据\n */\n sortFun = (sortParam)=>{\n console.info(sortParam);\n //将参数传递给后端排序\n }\n render() {\n let sortObj = {\n mode:'multiple',\n backSource:true,\n sortFun:this.sortFun\n }\n return ;\n }\n}\nDemo28.defaultProps = defaultProps;\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo83, null), "title": " 多列排序", "code": "/**\n *\n * @title 多列排序\n * @description 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Checkbox,Button,Icon} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\nimport sort from \"tinper-bee/lib/sort.js\";;\nimport sum from \"tinper-bee/lib/sum.js\";;\n\nconst columns13 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n className:'dfasd',\n width: 200\n },\n {\n title: \"功力指数\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n sorterClick:(data,type)=>{//排序的回调函数\n //type value is up or down\n console.log(\"data\",data);\n }\n },\n {\n title: \"成绩\",\n dataIndex: \"e\",\n key: \"e\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c,\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200\n }\n];\n\nconst data13 = [\n { a: \"杨过\", b: 675, c: 30, d: \"内行\",e:100, key: \"2\" },\n { a: \"令狐冲\", b: 43, c: 41, d: \"大侠\",e:90, key: \"1\" },\n { a: \"令狐冲1\", b: 43, c: 81, d: \"大侠\", e:120,key: \"4\" },\n { a: \"令狐冲2\", b: 43, c: 81, d: \"大侠\", e:130,key: \"5\" },\n { a: \"郭靖\", b: 153, c: 25, d: \"大侠\",e:90, key: \"3\" }\n];\n\n\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\nlet ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);\n\nclass Demo13 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data13: data13,\n selectedRow: this.selectedRow,\n selectDisabled: this.selectDisabled\n };\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n selectDisabled = (record, index) => {\n // console.log(record);\n if (index === 1) {\n return true;\n }\n return false;\n };\n selectedRow = (record, index) => {\n // console.log(record);\n if (index === 0) {\n return true;\n }\n return false;\n };\n onClick = () => {\n this.setState({\n selectedRow: function() {}\n });\n };\n\n render() {\n let multiObj = {\n type: \"checkbox\"\n };\n let sortObj = {\n mode:'multiple'\n }\n \n return (\n \n \n \n
\n );\n }\n}\n", "desc": " 多列排序、全选功能、合计(通过使用的封装好的功能方法实现复杂功能,简单易用!)新增回调函数(sorterClick)" }, { "example": _react2['default'].createElement(Demo91, null), "title": " 拖拽改变列顺序", "code": "/**\n*\n* @title 拖拽改变列顺序\n* @description 点击列的表头,进行左右拖拽,注意:固定列不可以交换\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns22 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 200\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200,\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 200,\n }\n];\n\nconst data22 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps22 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props); \n }\n \n render() {\n return ;\n }\n}\nDemo22.defaultProps = defaultProps22;\n\n\n", "desc": " 点击列的表头,进行左右拖拽,注意:固定列不可以交换" }, { "example": _react2['default'].createElement(Demo92, null), "title": " 拖拽改变列宽度", "code": "/**\n*\n* @title 拖拽改变列宽度\n* @description 注:不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n }, \n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return {\n console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n", "desc": " 注:不支持tree结构的表头、合并表头的table" }, { "example": _react2['default'].createElement(Demo101, null), "title": " 嵌套子表格", "code": "/**\n*\n* @title 嵌套子表格\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Popconfirm } from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\nconst DragColumnTable = dragColumn(Table);\nconst columns16 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst columns17 = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"操作\", key: \"3\" }\n];\n\n\nclass Demo16 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{}\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 42 * (this.state.data_obj[record.key].length+ 2);\n \n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格" }, { "example": _react2['default'].createElement(Demo102, null), "title": " 层级树型展示", "code": "/**\n*\n* @title 层级树型展示\n* @description 通过在data中配置children数据,来自动生成树形表格\n*\n*/\n\n\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\n\n\nconst columns4 = [\n {\n title: \"Name\",\n dataIndex: \"name\",\n key: \"name\",\n width: \"40%\"\n },\n {\n title: \"Age\",\n dataIndex: \"age\",\n key: \"age\",\n width: \"30%\"\n },\n {\n title: \"Address\",\n dataIndex: \"address\",\n key: \"address\"\n }\n];\n\nconst data4 = [\n {\n key: 1,\n name: \"John Brown sr.\",\n age: 60,\n address: \"New York No. 1 Lake Park\",\n children: [\n {\n key: 11,\n name: \"John Brown\",\n age: 42,\n address: \"New York No. 2 Lake Park\"\n },\n {\n key: 12,\n name: \"John Brown jr.\",\n age: 30,\n address: \"New York No. 3 Lake Park\",\n children: [\n {\n key: 121,\n name: \"Jimmy Brown\",\n age: 16,\n address: \"New York No. 3 Lake Park\"\n }\n ]\n },\n {\n key: 13,\n name: \"Jim Green sr.\",\n age: 72,\n address: \"London No. 1 Lake Park\",\n children: [\n {\n key: 131,\n name: \"Jim Green\",\n age: 42,\n address: \"London No. 2 Lake Park\",\n children: [\n {\n key: 1311,\n name: \"Jim Green jr.\",\n age: 25,\n address: \"London No. 3 Lake Park\"\n },\n {\n key: 1312,\n name: \"Jimmy Green sr.\",\n age: 18,\n address: \"London No. 4 Lake Park\"\n }\n ]\n }\n ]\n }\n ]\n },\n {\n key: 2,\n name: \"Joe Black\",\n age: 32,\n address: \"Sidney No. 1 Lake Park\"\n }\n];\nclass Demo4 extends Component {\n\n constructor(props){\n super(props);\n this.state = {\n data: data4,\n factoryValue: 0,\n selectedRow: new Array(data4.length)//状态同步\n }\n }\n\n render() {\n return {\n if (this.state.selectedRow[index]) {\n return 'selected';\n } else {\n return '';\n }\n }}\n onRowClick={(record,index,indent)=>{\n let selectedRow = new Array(this.state.data.length);\n selectedRow[index] = true;\n this.setState({\n factoryValue: record,\n selectedRow: selectedRow\n });\n }}\n \n columns={columns4} data={data4} />;\n }\n}\n\n\n", "desc": " 通过在data中配置children数据,来自动生成树形表格" }, { "example": _react2['default'].createElement(Demo103, null), "title": " 选中行颜色、自定义表格标题和表尾", "code": "/**\r\n*\r\n* @title 选中行颜色、自定义表格标题和表尾\r\n* @description\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip,} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width:80 , className:\"rowClassName\"},\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n];\r\n\r\nconst data = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\r\n { a: \"黄蓉\", b: \"男\", c: 67, key: \"2\" },\r\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\r\n];\r\n\r\nclass Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n {\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\r\n title={currentData => 标题: 这是一个标题
}\r\n footer={currentData => 表尾: 我是小尾巴
}\r\n /> \r\n );\r\n }\r\n}\r\n\r\n\r\n", "desc": "" }, { "example": _react2['default'].createElement(Demo104, null), "title": " 自定义行高", "code": "/**\n*\n* @title 自定义行高\n* @description 设置`height`属性自定义表格行高,设置`headerHeight`属性自定义表头高度。\n*/\n\nimport React, { Component } from \"react\";\nimport {Button,Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\n\nconst columns = [\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 500},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [\n { a: \"令狐冲\", b: \"男\", c: 41, key: \"1\" },\n { a: \"杨过叔叔的女儿黄蓉\", b: \"男\", c: 67, key: \"2\" },\n { a: \"郭靖\", b: \"男\", c: 25, key: \"3\" }\n];\n\nclass Demo1 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容:' , this.currentRecord);\n }\n\n onRowHover=(index,record)=>{\n this.currentIndex = index;\n this.currentRecord = record;\n }\n\n getHoverContent=()=>{\n return
\n }\n\n render() {\n return (\n \n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n />\n\n \n );\n }\n}\n\n\n", "desc": " 设置`height`属性自定义表格行高,设置`headerHeight`属性自定义表头高度。" }, { "example": _react2['default'].createElement(Demo105, null), "title": " 自定义行、列合并", "code": "/**\n*\n* @title 自定义行、列合并\n* @description 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。\n*\n*/\n\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\n\nconst renderContent = (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n};\n\nconst columns = [{\n title: 'Name',\n key: \"name\",\n dataIndex: 'name',\n render: (text, row, index) => {\n if (index < 4) {\n return {text};\n }\n return {\n children: {text},\n props: {\n colSpan: 5,\n },\n };\n },\n}, {\n title: 'Age',\n key: \"Age\",\n dataIndex: 'age',\n render: renderContent,\n}, {\n title: 'Home phone',\n colSpan: 2,\n key: \"tel\",\n dataIndex: 'tel',\n render: (value, row, index) => {\n const obj = {\n children: value,\n props: {},\n };\n if (index === 2) {\n obj.props.rowSpan = 2;\n }\n if (index === 3) {\n obj.props.rowSpan = 0;\n }\n if (index === 4) {\n obj.props.colSpan = 0;\n }\n return obj;\n },\n}, {\n title: 'Phone',\n colSpan: 0,\n key: \"phone\",\n dataIndex: 'phone',\n render: renderContent,\n}, {\n title: 'Address',\n key: \"address\",\n dataIndex: 'address',\n render: renderContent,\n}];\n\nconst data = [{\n key: '1',\n name: 'John Brown',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: 'New York No. 1 Lake Park',\n}, {\n key: '2',\n name: 'Jim Green',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: 'London No. 1 Lake Park',\n}, {\n key: '3',\n name: 'Joe Black',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Sidney No. 1 Lake Park',\n}, {\n key: '4',\n name: 'Jim Red',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'London No. 2 Lake Park',\n}, {\n key: '5',\n name: 'Jake White',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Dublin No. 2 Lake Park',\n}];\n\nclass Demo15 extends Component {\n render() {\n return (\n \n );\n }\n}\n\n\n\n", "desc": " 表头只支持列合并,使用 column 里的 colSpan 进行设置。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。" }, { "example": _react2['default'].createElement(Demo121, null), "title": " 多选表格", "code": "/**\r\n*\r\n* @title 多选表格\r\n* @description 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。\r\n*\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\r\nimport {Checkbox} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n\r\nconst columns12 = [\r\n {\r\n title: \"名字\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 100\r\n },\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"武功级别\",\r\n dataIndex: \"d\",\r\n key: \"d\"\r\n }\r\n];\r\n\r\nconst data12 = [\r\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\",_checked:true },\r\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" ,_checked:false},\r\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" ,_checked:false},\r\n { a: \"郭靖1\", b: \"男\", c: 25,d:'大侠', key: \"4\" ,_disabled:true},\r\n { a: \"郭靖2\", b: \"男\", c: 25,d:'大侠', key: \"5\" ,_checked:false}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义,需要像此例子声明在组件的外侧,不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data12\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 如果在回调中增加setState逻辑,需要同步data中的_checked属性。即下面的代码\r\n // const allChecked = selectedList.length == 0?false:true;\r\n // record为undefind则为全选或者全不选\r\n // if(!record){\r\n // data12.forEach(item=>{\r\n // item._checked = allChecked;\r\n // })\r\n // }else{\r\n // data12[index]['_checked'] = record._checked;\r\n // } \r\n\r\n \r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n {\r\n if (record._checked) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n", "desc": " 点击表格左列按钮即可选中,并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。" }, { "example": _react2['default'].createElement(Demo131, null), "title": " 无限滚动 Infinite Scroll", "code": "/**\n*\n* @title 无限滚动 Infinite Scroll\n* @description 万行数据渲染\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'60',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo30 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n", "desc": " 万行数据渲染", "scss_code": ".big-data tr td {\n // height: 48px;\n}" }, { "example": _react2['default'].createElement(Demo132, null), "title": " 嵌套子表格滚动加载", "code": "/**\n*\n* @title 嵌套子表格滚动加载\n* @description 通过expandedRowRender参数来实现子表格\n*\n*/\n\nimport React, { Component } from \"react\";\nimport {Popconfirm} from 'tinper-bee';\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst outColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\", \n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\nconst innerColumns = [\n {\n title: \"操作\",\n dataIndex: \"d\",\n key: \"d\",\n width:200,\n render(text, record, index) {\n return (\n \n \n 一些操作\n \n \n );\n }\n },\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n \n];\n\nconst data16 = [ ...new Array(10000) ].map((e, i) => {\n return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n })\n\n\n\n\n\nclass Demo31 extends Component {\n constructor(props){\n super(props);\n this.state={\n data_obj:{\n 0:[\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ],\n 1: [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ],\n }\n }\n }\n expandedRowRender = (record, index, indent) => {\n let height = 200;\n let innderData = [ ...new Array(100) ].map((e, i) => {\n return { a: index+\"-\"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+\"-\"+ i };\n })\n return (\n \n );\n };\n getData=(expanded, record)=>{\n //当点击展开的时候才去请求数据\n let new_obj = Object.assign({},this.state.data_obj);\n if(expanded){\n if(record.key==='1'){\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }else{\n new_obj[record.key] = [\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\n ]\n this.setState({\n data_obj:new_obj\n })\n }\n }\n }\n haveExpandIcon=(record, index)=>{\n //控制是否显示行展开icon,该参数只有在和expandedRowRender同时使用才生效\n if(index == 0){\n return true;\n }\n return false;\n }\n render() {\n return (\n 标题: 这是一个标题
}\n footer={currentData => 表尾: 我是小尾巴
}\n />\n );\n }\n}\n\n\n", "desc": " 通过expandedRowRender参数来实现子表格" }, { "example": _react2['default'].createElement(Demo133, null), "title": " 多功能表格滚动加载", "code": "/**\n*\n* @title 多功能表格滚动加载\n* @description\n*/\n\nimport React, { Component } from \"react\";\nimport {Tooltip,Checkbox,Icon,Popover} from \"tinper-bee\";\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\n\nlet ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);\n\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'80',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(10000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n }\n return rs;\n })\n\n\nclass Demo32 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n getSelectedDataFunc = data => {\n console.log(data);\n };\n\n render() {\n return (\n {\n this.setState({\n selectedRowIndex: index\n });\n }}\n getSelectedDataFunc={this.getSelectedDataFunc}/>\n\n );\n }\n}\n\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo134, null), "title": "Demo134", "code": "import React, { Component } from \"react\";\nimport {Tooltip} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\nimport BigData from \"tinper-bee/lib/bigData\";;\nconst BigDataTable = BigData(Table);\nconst columns = [\n {\n title:'序号',\n dataIndex:'index',\n width:'150',\n key:'index',\n render:(text,record,index)=>{\n return index\n }\n },\n {\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\n render: (text, record, index) => {\n return (\n \n {text}\n \n );\n }\n },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\n];\n\nconst data = [ ...new Array(1000) ].map((e, i) => {\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\n if(i%3==0){\n rs.b = '女';\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }else{\n rs.children = [];\n for(let subi=0;subi<3;subi++){\n rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});\n }\n }\n return rs;\n })\n\n\nclass Demo34 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data,\n selectedRowIndex: 0\n }\n }\n onExpandedRowsChange = (params)=>{\n console.log(params);\n }\n onExpand = (expandKeys)=>{\n console.log('expand---'+expandKeys);\n }\n render() {\n return (\n {\n console.log('currentIndex--'+index);\n }}\n />\n\n \n );\n }\n}\n\n", "desc": "" }, { "example": _react2['default'].createElement(Demo161, null), "title": " 表格+分页", "code": "/**\n *\n * @title 表格+分页\n * @description 点击分页联动表格\n */\n\nimport React, { Component } from \"react\";\nimport {Pagination} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nconst columns8 = [\n { title: \"姓名\", dataIndex: \"a\", key: \"a\", width: 100 },\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst pageData = {\n 1: [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n ],\n 2: [\n { a: \"芙蓉姐姐\", b: \"女\", c: 23, d: \"大侠\", key: \"1\" },\n { a: \"芙蓉妹妹\", b: \"女\", c: 23, d: \"内行\", key: \"2\" }\n ]\n};\n\nclass Demo8 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: pageData[1],\n activePage: 1\n };\n }\n\n handleSelect(eventKey) {\n this.setState({\n data: pageData[eventKey],\n activePage: eventKey\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\n", "desc": " 点击分页联动表格", "scss_code": ".demo8{\n .u-table {\n margin-bottom: 11px;\n }\n .u-pagination{\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}" }, { "example": _react2['default'].createElement(Demo162, null), "title": " 表格+搜索", "code": "/**\n *\n * @title 表格+搜索\n * @description 搜索刷新表格数据\n *\n */\n\nimport React, { Component } from \"react\";\nimport {Icon,FormControl,InputGroup} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee';\n\nclass Search extends Component {\n state = {\n searchValue: \"\",\n empty: false\n };\n\n /**\n * 搜索\n */\n handleSearch = () => {\n let { onSearch } = this.props;\n this.setState({\n empty: true\n });\n onSearch && onSearch(this.state.searchValue);\n };\n\n /**\n * 捕获回车\n * @param e\n */\n handleKeyDown = e => {\n if (e.keyCode === 13) {\n this.handleSearch();\n }\n };\n\n /**\n * 输入框改变\n * @param e\n */\n handleChange = (e) => {\n this.setState({\n searchValue: e\n });\n };\n\n /**\n * 清空输入框\n */\n emptySearch = () => {\n let { onEmpty } = this.props;\n this.setState({\n searchValue: \"\",\n empty: false\n });\n onEmpty && onEmpty();\n };\n\n render() {\n return (\n \n \n {this.state.empty ? (\n \n ) : null}\n\n \n \n \n \n );\n }\n}\n\nconst columns9 = [\n {\n title: \"姓名\",\n dataIndex: \"a\",\n key: \"a\",\n width: 100\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: 100\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: 200\n },\n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\"\n }\n];\n\nconst userData = [\n { a: \"杨过\", b: \"男\", c: 30, d: \"内行\", key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"大侠\", key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25, d: \"大侠\", key: \"3\" }\n];\n\nclass Demo9 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: userData\n };\n }\n\n handleSearch = value => {\n if (value === \"\") {\n return this.setState({\n data: userData\n });\n }\n let regExp = new RegExp(value, \"ig\");\n let data = userData.filter(item => regExp.test(item.a));\n this.setState({\n data\n });\n };\n\n handleEmpty = () => {\n this.setState({\n data: userData\n });\n };\n\n render() {\n return (\n \n );\n }\n}\n\n\n", "desc": " 搜索刷新表格数据" }];
var Demo = function (_Component) {
_inherits(Demo, _Component);
@@ -166418,809 +166418,6 @@
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 _react = __webpack_require__(1);
-
- var _react2 = _interopRequireDefault(_react);
-
- var _tinperBee = __webpack_require__(534);
-
- var _reqwest = __webpack_require__(543);
-
- var _reqwest2 = _interopRequireDefault(_reqwest);
-
- var _src = __webpack_require__(157);
-
- var _src2 = _interopRequireDefault(_src);
-
- 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
- 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); } /**
- *
- * @title 渲染远程数据
- * @description
- */
-
- var columns = [{
- title: 'Name',
- dataIndex: 'name',
- sorter: true,
- render: function render(name) {
- return name.first + " " + name.last;
- },
- width: '20%'
- }, {
- title: 'Gender',
- dataIndex: 'gender',
- filters: [{ text: 'Male', value: 'male' }, { text: 'Female', value: 'female' }],
- width: '20%'
- }, {
- title: 'Email',
- dataIndex: 'email'
- }];
-
- var Demo22 = function (_Component) {
- _inherits(Demo22, _Component);
-
- function Demo22(props) {
- _classCallCheck(this, Demo22);
-
- var _this = _possibleConstructorReturn(this, _Component.call(this, props));
-
- _this.handleTableChange = function (pagination, filters, sorter) {
- var pager = _extends({}, _this.state.pagination);
- pager.current = pagination.current;
- _this.setState({
- pagination: pager
- });
- _this.fetch(_extends({
- results: pagination.pageSize,
- page: pagination.current,
- sortField: sorter.field,
- sortOrder: sorter.order
- }, filters));
- };
-
- _this.fetch = function () {
- var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
- console.log('params:', params);
- _this.setState({ loading: true });
- (0, _reqwest2["default"])({
- url: 'https://randomuser.me/api',
- method: 'get',
- data: _extends({
- results: 10
- }, params),
- type: 'json'
- }).then(function (data) {
- var pagination = _extends({}, _this.state.pagination);
- // Read total count from server
- // pagination.total = data.totalCount;
- pagination.total = 200;
- _this.setState({
- loading: false,
- data: data.results,
- pagination: pagination
- });
- });
- };
-
- _this.onPageIndexSelect = function (pageIndex) {
- var _this$state = _this.state,
- pageSize = _this$state.pageSize,
- nodeId = _this$state.nodeId;
-
-
- dataMaintainStore.getTableRequest(nodeId, pageIndex, pageSize);
- _this.setState({
- pageIndex: pageIndex
- });
- };
-
- _this.state = {
- data: [],
- loading: false
- };
- return _this;
- }
-
- Demo22.prototype.componentDidMount = function componentDidMount() {
- this.fetch();
- };
-
- Demo22.prototype.render = function render() {
- return _react2["default"].createElement(
- "div",
- null,
- _react2["default"].createElement(_src2["default"], {
- columns: columns,
- data: this.state.data,
- loading: this.state.loading,
- onChange: this.handleTableChange
- }),
- _react2["default"].createElement(_tinperBee.Pagination, {
- first: true,
- last: true,
- prev: true,
- next: true,
- maxButtons: 5,
- boundaryLinks: true,
- activePage: this.state.activePage,
- onSelect: this.onPageIndexSelect,
- onDataNumSelect: this.dataNumSelect,
- showJump: true,
- total: 100,
- dataNum: 2
- })
- );
- };
-
- return Demo22;
- }(_react.Component);
-
- exports["default"] = Demo22;
- module.exports = exports["default"];
-
-/***/ }),
-/* 543 */
-/***/ (function(module, exports, __webpack_require__) {
-
- var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
- * Reqwest! A general purpose XHR connection manager
- * license MIT (c) Dustin Diaz 2015
- * https://github.com/ded/reqwest
- */
-
- !function (name, context, definition) {
- if (typeof module != 'undefined' && module.exports) module.exports = definition()
- else if (true) !(__WEBPACK_AMD_DEFINE_FACTORY__ = (definition), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__))
- else context[name] = definition()
- }('reqwest', this, function () {
-
- var context = this
-
- if ('window' in context) {
- var doc = document
- , byTag = 'getElementsByTagName'
- , head = doc[byTag]('head')[0]
- } else {
- var XHR2
- try {
- XHR2 = __webpack_require__(544)
- } catch (ex) {
- throw new Error('Peer dependency `xhr2` required! Please npm install xhr2')
- }
- }
-
-
- var httpsRe = /^http/
- , protocolRe = /(^\w+):\/\//
- , twoHundo = /^(20\d|1223)$/ //http://stackoverflow.com/questions/10046972/msie-returns-status-code-of-1223-for-ajax-request
- , readyState = 'readyState'
- , contentType = 'Content-Type'
- , requestedWith = 'X-Requested-With'
- , uniqid = 0
- , callbackPrefix = 'reqwest_' + (+new Date())
- , lastValue // data stored by the most recent JSONP callback
- , xmlHttpRequest = 'XMLHttpRequest'
- , xDomainRequest = 'XDomainRequest'
- , noop = function () {}
-
- , isArray = typeof Array.isArray == 'function'
- ? Array.isArray
- : function (a) {
- return a instanceof Array
- }
-
- , defaultHeaders = {
- 'contentType': 'application/x-www-form-urlencoded'
- , 'requestedWith': xmlHttpRequest
- , 'accept': {
- '*': 'text/javascript, text/html, application/xml, text/xml, */*'
- , 'xml': 'application/xml, text/xml'
- , 'html': 'text/html'
- , 'text': 'text/plain'
- , 'json': 'application/json, text/javascript'
- , 'js': 'application/javascript, text/javascript'
- }
- }
-
- , xhr = function(o) {
- // is it x-domain
- if (o['crossOrigin'] === true) {
- var xhr = context[xmlHttpRequest] ? new XMLHttpRequest() : null
- if (xhr && 'withCredentials' in xhr) {
- return xhr
- } else if (context[xDomainRequest]) {
- return new XDomainRequest()
- } else {
- throw new Error('Browser does not support cross-origin requests')
- }
- } else if (context[xmlHttpRequest]) {
- return new XMLHttpRequest()
- } else if (XHR2) {
- return new XHR2()
- } else {
- return new ActiveXObject('Microsoft.XMLHTTP')
- }
- }
- , globalSetupOptions = {
- dataFilter: function (data) {
- return data
- }
- }
-
- function succeed(r) {
- var protocol = protocolRe.exec(r.url)
- protocol = (protocol && protocol[1]) || context.location.protocol
- return httpsRe.test(protocol) ? twoHundo.test(r.request.status) : !!r.request.response
- }
-
- function handleReadyState(r, success, error) {
- return function () {
- // use _aborted to mitigate against IE err c00c023f
- // (can't read props on aborted request objects)
- if (r._aborted) return error(r.request)
- if (r._timedOut) return error(r.request, 'Request is aborted: timeout')
- if (r.request && r.request[readyState] == 4) {
- r.request.onreadystatechange = noop
- if (succeed(r)) success(r.request)
- else
- error(r.request)
- }
- }
- }
-
- function setHeaders(http, o) {
- var headers = o['headers'] || {}
- , h
-
- headers['Accept'] = headers['Accept']
- || defaultHeaders['accept'][o['type']]
- || defaultHeaders['accept']['*']
-
- var isAFormData = typeof FormData !== 'undefined' && (o['data'] instanceof FormData);
- // breaks cross-origin requests with legacy browsers
- if (!o['crossOrigin'] && !headers[requestedWith]) headers[requestedWith] = defaultHeaders['requestedWith']
- if (!headers[contentType] && !isAFormData) headers[contentType] = o['contentType'] || defaultHeaders['contentType']
- for (h in headers)
- headers.hasOwnProperty(h) && 'setRequestHeader' in http && http.setRequestHeader(h, headers[h])
- }
-
- function setCredentials(http, o) {
- if (typeof o['withCredentials'] !== 'undefined' && typeof http.withCredentials !== 'undefined') {
- http.withCredentials = !!o['withCredentials']
- }
- }
-
- function generalCallback(data) {
- lastValue = data
- }
-
- function urlappend (url, s) {
- return url + (/\?/.test(url) ? '&' : '?') + s
- }
-
- function handleJsonp(o, fn, err, url) {
- var reqId = uniqid++
- , cbkey = o['jsonpCallback'] || 'callback' // the 'callback' key
- , cbval = o['jsonpCallbackName'] || reqwest.getcallbackPrefix(reqId)
- , cbreg = new RegExp('((^|\\?|&)' + cbkey + ')=([^&]+)')
- , match = url.match(cbreg)
- , script = doc.createElement('script')
- , loaded = 0
- , isIE10 = navigator.userAgent.indexOf('MSIE 10.0') !== -1
-
- if (match) {
- if (match[3] === '?') {
- url = url.replace(cbreg, '$1=' + cbval) // wildcard callback func name
- } else {
- cbval = match[3] // provided callback func name
- }
- } else {
- url = urlappend(url, cbkey + '=' + cbval) // no callback details, add 'em
- }
-
- context[cbval] = generalCallback
-
- script.type = 'text/javascript'
- script.src = url
- script.async = true
- if (typeof script.onreadystatechange !== 'undefined' && !isIE10) {
- // need this for IE due to out-of-order onreadystatechange(), binding script
- // execution to an event listener gives us control over when the script
- // is executed. See http://jaubourg.net/2010/07/loading-script-as-onclick-handler-of.html
- script.htmlFor = script.id = '_reqwest_' + reqId
- }
-
- script.onload = script.onreadystatechange = function () {
- if ((script[readyState] && script[readyState] !== 'complete' && script[readyState] !== 'loaded') || loaded) {
- return false
- }
- script.onload = script.onreadystatechange = null
- script.onclick && script.onclick()
- // Call the user callback with the last value stored and clean up values and scripts.
- fn(lastValue)
- lastValue = undefined
- head.removeChild(script)
- loaded = 1
- }
-
- // Add the script to the DOM head
- head.appendChild(script)
-
- // Enable JSONP timeout
- return {
- abort: function () {
- script.onload = script.onreadystatechange = null
- err({}, 'Request is aborted: timeout', {})
- lastValue = undefined
- head.removeChild(script)
- loaded = 1
- }
- }
- }
-
- function getRequest(fn, err) {
- var o = this.o
- , method = (o['method'] || 'GET').toUpperCase()
- , url = typeof o === 'string' ? o : o['url']
- // convert non-string objects to query-string form unless o['processData'] is false
- , data = (o['processData'] !== false && o['data'] && typeof o['data'] !== 'string')
- ? reqwest.toQueryString(o['data'])
- : (o['data'] || null)
- , http
- , sendWait = false
-
- // if we're working on a GET request and we have data then we should append
- // query string to end of URL and not post data
- if ((o['type'] == 'jsonp' || method == 'GET') && data) {
- url = urlappend(url, data)
- data = null
- }
-
- if (o['type'] == 'jsonp') return handleJsonp(o, fn, err, url)
-
- // get the xhr from the factory if passed
- // if the factory returns null, fall-back to ours
- http = (o.xhr && o.xhr(o)) || xhr(o)
-
- http.open(method, url, o['async'] === false ? false : true)
- setHeaders(http, o)
- setCredentials(http, o)
- if (context[xDomainRequest] && http instanceof context[xDomainRequest]) {
- http.onload = fn
- http.onerror = err
- // NOTE: see
- // http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/30ef3add-767c-4436-b8a9-f1ca19b4812e
- http.onprogress = function() {}
- sendWait = true
- } else {
- http.onreadystatechange = handleReadyState(this, fn, err)
- }
- o['before'] && o['before'](http)
- if (sendWait) {
- setTimeout(function () {
- http.send(data)
- }, 200)
- } else {
- http.send(data)
- }
- return http
- }
-
- function Reqwest(o, fn) {
- this.o = o
- this.fn = fn
-
- init.apply(this, arguments)
- }
-
- function setType(header) {
- // json, javascript, text/plain, text/html, xml
- if (header === null) return undefined; //In case of no content-type.
- if (header.match('json')) return 'json'
- if (header.match('javascript')) return 'js'
- if (header.match('text')) return 'html'
- if (header.match('xml')) return 'xml'
- }
-
- function init(o, fn) {
-
- this.url = typeof o == 'string' ? o : o['url']
- this.timeout = null
-
- // whether request has been fulfilled for purpose
- // of tracking the Promises
- this._fulfilled = false
- // success handlers
- this._successHandler = function(){}
- this._fulfillmentHandlers = []
- // error handlers
- this._errorHandlers = []
- // complete (both success and fail) handlers
- this._completeHandlers = []
- this._erred = false
- this._responseArgs = {}
-
- var self = this
-
- fn = fn || function () {}
-
- if (o['timeout']) {
- this.timeout = setTimeout(function () {
- timedOut()
- }, o['timeout'])
- }
-
- if (o['success']) {
- this._successHandler = function () {
- o['success'].apply(o, arguments)
- }
- }
-
- if (o['error']) {
- this._errorHandlers.push(function () {
- o['error'].apply(o, arguments)
- })
- }
-
- if (o['complete']) {
- this._completeHandlers.push(function () {
- o['complete'].apply(o, arguments)
- })
- }
-
- function complete (resp) {
- o['timeout'] && clearTimeout(self.timeout)
- self.timeout = null
- while (self._completeHandlers.length > 0) {
- self._completeHandlers.shift()(resp)
- }
- }
-
- function success (resp) {
- var type = o['type'] || resp && setType(resp.getResponseHeader('Content-Type')) // resp can be undefined in IE
- resp = (type !== 'jsonp') ? self.request : resp
- // use global data filter on response text
- var filteredResponse = globalSetupOptions.dataFilter(resp.responseText, type)
- , r = filteredResponse
- try {
- resp.responseText = r
- } catch (e) {
- // can't assign this in IE<=8, just ignore
- }
- if (r) {
- switch (type) {
- case 'json':
- try {
- resp = context.JSON ? context.JSON.parse(r) : eval('(' + r + ')')
- } catch (err) {
- return error(resp, 'Could not parse JSON in response', err)
- }
- break
- case 'js':
- resp = eval(r)
- break
- case 'html':
- resp = r
- break
- case 'xml':
- resp = resp.responseXML
- && resp.responseXML.parseError // IE trololo
- && resp.responseXML.parseError.errorCode
- && resp.responseXML.parseError.reason
- ? null
- : resp.responseXML
- break
- }
- }
-
- self._responseArgs.resp = resp
- self._fulfilled = true
- fn(resp)
- self._successHandler(resp)
- while (self._fulfillmentHandlers.length > 0) {
- resp = self._fulfillmentHandlers.shift()(resp)
- }
-
- complete(resp)
- }
-
- function timedOut() {
- self._timedOut = true
- self.request.abort()
- }
-
- function error(resp, msg, t) {
- resp = self.request
- self._responseArgs.resp = resp
- self._responseArgs.msg = msg
- self._responseArgs.t = t
- self._erred = true
- while (self._errorHandlers.length > 0) {
- self._errorHandlers.shift()(resp, msg, t)
- }
- complete(resp)
- }
-
- this.request = getRequest.call(this, success, error)
- }
-
- Reqwest.prototype = {
- abort: function () {
- this._aborted = true
- this.request.abort()
- }
-
- , retry: function () {
- init.call(this, this.o, this.fn)
- }
-
- /**
- * Small deviation from the Promises A CommonJs specification
- * http://wiki.commonjs.org/wiki/Promises/A
- */
-
- /**
- * `then` will execute upon successful requests
- */
- , then: function (success, fail) {
- success = success || function () {}
- fail = fail || function () {}
- if (this._fulfilled) {
- this._responseArgs.resp = success(this._responseArgs.resp)
- } else if (this._erred) {
- fail(this._responseArgs.resp, this._responseArgs.msg, this._responseArgs.t)
- } else {
- this._fulfillmentHandlers.push(success)
- this._errorHandlers.push(fail)
- }
- return this
- }
-
- /**
- * `always` will execute whether the request succeeds or fails
- */
- , always: function (fn) {
- if (this._fulfilled || this._erred) {
- fn(this._responseArgs.resp)
- } else {
- this._completeHandlers.push(fn)
- }
- return this
- }
-
- /**
- * `fail` will execute when the request fails
- */
- , fail: function (fn) {
- if (this._erred) {
- fn(this._responseArgs.resp, this._responseArgs.msg, this._responseArgs.t)
- } else {
- this._errorHandlers.push(fn)
- }
- return this
- }
- , 'catch': function (fn) {
- return this.fail(fn)
- }
- }
-
- function reqwest(o, fn) {
- return new Reqwest(o, fn)
- }
-
- // normalize newline variants according to spec -> CRLF
- function normalize(s) {
- return s ? s.replace(/\r?\n/g, '\r\n') : ''
- }
-
- function serial(el, cb) {
- var n = el.name
- , t = el.tagName.toLowerCase()
- , optCb = function (o) {
- // IE gives value="" even where there is no value attribute
- // 'specified' ref: http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-862529273
- if (o && !o['disabled'])
- cb(n, normalize(o['attributes']['value'] && o['attributes']['value']['specified'] ? o['value'] : o['text']))
- }
- , ch, ra, val, i
-
- // don't serialize elements that are disabled or without a name
- if (el.disabled || !n) return
-
- switch (t) {
- case 'input':
- if (!/reset|button|image|file/i.test(el.type)) {
- ch = /checkbox/i.test(el.type)
- ra = /radio/i.test(el.type)
- val = el.value
- // WebKit gives us "" instead of "on" if a checkbox has no value, so correct it here
- ;(!(ch || ra) || el.checked) && cb(n, normalize(ch && val === '' ? 'on' : val))
- }
- break
- case 'textarea':
- cb(n, normalize(el.value))
- break
- case 'select':
- if (el.type.toLowerCase() === 'select-one') {
- optCb(el.selectedIndex >= 0 ? el.options[el.selectedIndex] : null)
- } else {
- for (i = 0; el.length && i < el.length; i++) {
- el.options[i].selected && optCb(el.options[i])
- }
- }
- break
- }
- }
-
- // collect up all form elements found from the passed argument elements all
- // the way down to child elements; pass a '