[Feature]左侧展开收起图标的行高由16px改为14px
This commit is contained in:
yangchch6
parent
0d4bdeb4ec
commit
f04b26e573
|
|
@ -146,7 +146,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
|
|
@ -162,9 +162,9 @@
|
|||
.u-table-row.selected {
|
||||
background: #FFF7E7; }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row .u-table {
|
||||
z-index: 1; }
|
||||
.u-table-column-hidden {
|
||||
|
|
|
|||
|
|
@ -11,49 +11,20 @@ import {Button,Tooltip} from "tinper-bee";
|
|||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo01 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
class Demo0101 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
|
|
@ -64,4 +35,4 @@ class Demo01 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo01;
|
||||
export default Demo0101;
|
||||
|
|
|
|||
|
|
@ -9,9 +9,8 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Icon from 'bee-icon';
|
||||
|
||||
const columns02 = [
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "num",
|
||||
|
|
@ -31,7 +30,7 @@ const columns02 = [
|
|||
}
|
||||
];
|
||||
|
||||
const data02 = [];
|
||||
const data = [];
|
||||
|
||||
// 在此自定义无数据时的展示内容
|
||||
const emptyFunc = () => 'No Data';
|
||||
|
|
@ -40,8 +39,8 @@ class Demo02 extends Component {
|
|||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns02}
|
||||
data={data02}
|
||||
columns={columns}
|
||||
data={data}
|
||||
// emptyText={emptyFunc}
|
||||
/>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 固定表头
|
||||
* @parent 基础 Basic
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。
|
||||
* demo0103
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
*
|
||||
* @title 带边框
|
||||
* @parent 基础 Basic
|
||||
* @description 设置 `bordered` 属性可添加表格边框线。
|
||||
* demo0107
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo06 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo06;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -146,7 +146,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -165,9 +165,9 @@
|
|||
.u-table-row.selected {
|
||||
background: #FFF7E7; }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row .u-table {
|
||||
z-index: 1; }
|
||||
.u-table-column-hidden {
|
||||
|
|
|
|||
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
14
package.json
14
package.json
|
|
@ -48,16 +48,16 @@
|
|||
"dependencies": {
|
||||
"bee-button": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.9",
|
||||
"bee-dropdown": "^2.0.3",
|
||||
"bee-datepicker": "^2.0.28",
|
||||
"bee-dropdown": "^2.0.4",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-number": "^2.0.5",
|
||||
"bee-loading": "^1.0.6",
|
||||
"bee-locale": "0.0.11",
|
||||
"bee-menus": "^2.0.2",
|
||||
"bee-input-number": "^2.0.7",
|
||||
"bee-loading": "^1.0.9",
|
||||
"bee-locale": "0.0.13",
|
||||
"bee-menus": "^2.0.6",
|
||||
"bee-radio": "^2.0.8",
|
||||
"bee-select": "^2.0.9",
|
||||
"bee-select": "^2.0.11",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
|
|
|
|||
|
|
@ -270,7 +270,7 @@ $icon-color:#505F79;
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid $table-border-color;
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
|
|
@ -297,9 +297,9 @@ $icon-color:#505F79;
|
|||
}
|
||||
}
|
||||
tr.u-table-expanded-row {
|
||||
background: #f7f7f7;
|
||||
background: #DFE1E6;
|
||||
&:hover {
|
||||
background: #f7f7f7;
|
||||
background: #DFE1E6;
|
||||
}
|
||||
.u-table {
|
||||
// padding: 0 40px 0 20px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue