feat:表头行高40px,排序过滤列样式调整,滚动加载树表示例调整
This commit is contained in:
parent
7aa9ad6d68
commit
a67e557d7e
|
@ -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";
|
||||
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@ const columns = [
|
|||
{
|
||||
title:'序号',
|
||||
dataIndex:'index',
|
||||
width:'50',
|
||||
width:'60',
|
||||
key:'index',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
|
|
|
@ -17,7 +17,7 @@ const columns = [
|
|||
{
|
||||
title:'序号',
|
||||
dataIndex:'index',
|
||||
width:'50',
|
||||
width:'80',
|
||||
key:'index',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
|
|
|
@ -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;
|
|
@ -17,7 +17,7 @@ const columns = [
|
|||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: 100,
|
||||
width: 120,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||
|
|
|
@ -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{
|
||||
|
|
|
@ -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) => {
|
||||
|
|
Loading…
Reference in New Issue