feat:表头行高40px,排序过滤列样式调整,滚动加载树表示例调整

This commit is contained in:
izbz wh 2019-04-17 15:26:27 +08:00
parent 7aa9ad6d68
commit a67e557d7e
14 changed files with 8358 additions and 77 deletions

View File

@ -1,20 +1,20 @@
// @import "../node_modules/tinper-bee-core/scss/index.scss";
// @import "../node_modules/bee-panel/src/Panel.scss";
// @import "../node_modules/bee-layout/src/Layout.scss";
// @import "../node_modules/bee-button/src/Button.scss";
// @import "../node_modules/bee-transition/src/Transition.scss";
// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
// @import "../node_modules/bee-form-control/src/FormControl.scss";
// @import "../node_modules/bee-pagination/src/Pagination.scss";
// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
// @import "../node_modules/bee-select/src/Select.scss";
@import "../node_modules/tinper-bee-core/scss/index.scss";
@import "../node_modules/bee-panel/src/Panel.scss";
@import "../node_modules/bee-layout/src/Layout.scss";
@import "../node_modules/bee-button/src/Button.scss";
@import "../node_modules/bee-transition/src/Transition.scss";
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
@import "../node_modules/bee-form-control/src/FormControl.scss";
@import "../node_modules/bee-pagination/src/Pagination.scss";
@import "../node_modules/bee-checkbox/src/Checkbox.scss";
@import "../node_modules/bee-select/src/Select.scss";
// @import "../node_modules/bee-form/src/Form.scss";
// @import "../node_modules/bee-popover/src/Popover.scss";
// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
// @import "../node_modules/bee-message/build/Message.css";
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
// @import "../node_modules/bee-input-number/build/InputNumber.css";
// @import "../node_modules/bee-modal/build/Modal.css";
@import "../node_modules/bee-popover/src/Popover.scss";
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
@import "../node_modules/bee-message/build/Message.css";
@import "../node_modules/bee-dropdown/build/Dropdown.css";
@import "../node_modules/bee-input-number/build/InputNumber.css";
@import "../node_modules/bee-modal/build/Modal.css";
@import "../src/Table.scss";

View File

@ -13,7 +13,7 @@ const columns = [
{
title:'序号',
dataIndex:'index',
width:'50',
width:'60',
key:'index',
render:(text,record,index)=>{
return index

View File

@ -17,7 +17,7 @@ const columns = [
{
title:'序号',
dataIndex:'index',
width:'50',
width:'80',
key:'index',
render:(text,record,index)=>{
return index

View File

@ -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;

View File

@ -17,7 +17,7 @@ const columns = [
title: "Name",
dataIndex: "name",
key: "name",
width: 100,
width: 120,
fixed: "left"
},
{

View File

@ -74,7 +74,7 @@ const columns24 = [
title: "武功类型",
dataIndex: "g",
key: "g",
width: 100
width: 150
},
{
title: "师傅",

File diff suppressed because one or more lines are too long

8313
dist/demo.css vendored

File diff suppressed because it is too large Load Diff

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

19
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -5,7 +5,7 @@
<title>neoui-react-button</title>
<link rel="stylesheet" href="./demo/atom-one-dark.css">
<link rel="stylesheet" href="./dist/demo.css">
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
<!-- <link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" /> -->
</head>

View File

@ -4,22 +4,23 @@
$text-color: $font-color-base;
$font-size-base: 12px;
$line-height: 1.5;
$line-height: 1.33;
// 主题定制border
$table-border-color: unquote("rgb(#{$table-border-color-base})");
// $table-head-background-color: #f7f7f7;
// $table-head-text-color: #666;
$vertical-padding: 12px;
$horizontal-padding: 8px;
$horizontal-padding: 16px;
// $table-border-color: #e9e9e9;
$table-hover-color: #E7F2FC;
$table-move-in-color: $bg-color-base;
$checkbox-height:16px;
$checkbox-height:14px;
$table-th-bottom-border:#C1C7D0;
$filter-form-control-height:28px;
$filter-form-control-height:26px;
$table-head-font-weight: bold;
$icon-color:#505F79;
.u-table {
font-size: $font-size-base;
color: $text-color;
@ -115,6 +116,9 @@ $table-head-font-weight: bold;
.filterContext{
height: 35px;
}
.u-select-selection--single{
height: 26px;
}
}
}
}
@ -166,7 +170,7 @@ $table-head-font-weight: bold;
}
&.fixed-height td {
padding: 0px 8px;
padding: 0px $horizontal-padding;
}
&-fixed-header &-body {
@ -389,14 +393,20 @@ $table-head-font-weight: bold;
.bee-table-column-sorter {
position: relative;
margin-left: 4px;
height: 1em;
height: 16px;
vertical-align: middle;
text-align: center;
display: inline-block;
margin-top: -3px;
i{
padding: 0px;
font-weight: 600;
color: $icon-color;
}
& > .bee-table-column-sorter-down,
& > .bee-table-column-sorter-up, & > .bee-table-column-sorter-flat {
line-height: 6px;
line-height: 16px;
display: block;
width: 34px;
cursor: pointer;
@ -444,6 +454,7 @@ $table-head-font-weight: bold;
}
.th-drag:hover{
background: $hover-bg-color-base;
}
//为了区分是拖拽宽度还是交换列先注释上面了
// .th-drag:hover{
@ -512,17 +523,18 @@ $table-head-font-weight: bold;
}
&-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: $table-head-background-color;
text-align: center;
cursor: pointer;
i.uf{
padding: 0px;
color: $icon-color;
}
}
&-pop-cont-item{
@ -561,6 +573,13 @@ $table-head-font-weight: bold;
height: $checkbox-height;
line-height: $checkbox-height;
margin:0px;
.u-checkbox-label{
line-height: $checkbox-height;
&:before,&:after {
width: $checkbox-height;
height: $checkbox-height;
}
}
}
}
.u-table:focus{

View File

@ -390,7 +390,7 @@ export default function bigData(Table) {
if(!_this.props.expandedRowKeys){
if(expandState){
expandedRowKeys.push(rowKey);
this.setState({ needRender: !needRender });
}else{
let index = -1;
expandedRowKeys.forEach((r, i) => {