feat:每行第一列padding-left为12px,其他默认8px
This commit is contained in:
parent
e614706d09
commit
f734fd59c3
|
@ -20,13 +20,15 @@
|
|||
text-align: left; }
|
||||
.u-table th {
|
||||
font-weight: bold;
|
||||
text-align: left; }
|
||||
text-align: left;
|
||||
line-height: 16px; }
|
||||
.u-table th[colspan] {
|
||||
text-align: center; }
|
||||
.u-table th ::last-child {
|
||||
overflow: hidden; }
|
||||
.u-table td {
|
||||
border-bottom: 1px solid rgb(193, 199, 208); }
|
||||
border-bottom: 1px solid rgb(193, 199, 208);
|
||||
line-height: 1.33; }
|
||||
.u-table td a {
|
||||
color: #2196F3; }
|
||||
.u-table td a:hover {
|
||||
|
@ -55,6 +57,10 @@
|
|||
.u-table th.text-right,
|
||||
.u-table td.text-right {
|
||||
text-align: right; }
|
||||
.u-table-sm td {
|
||||
padding: 8px 8px; }
|
||||
.u-table-lg td {
|
||||
padding: 16px 8px; }
|
||||
.u-table tr.filterable th {
|
||||
padding-top: 5px !important;
|
||||
padding-bottom: 5px !important; }
|
||||
|
@ -352,6 +358,10 @@
|
|||
.u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
|
||||
width: 14px;
|
||||
height: 14px; }
|
||||
.u-table .u-table-scroll tr td:first-child, .u-table .u-table-scroll tr th:first-child, .u-table .u-table-fixed-left tr td:first-child, .u-table .u-table-fixed-left tr th:first-child {
|
||||
padding-left: 12px; }
|
||||
.u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {
|
||||
padding-left: 8px; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
|
|
|
@ -100,7 +100,8 @@ var propTypes = {
|
|||
onFilterClear: _propTypes2["default"].func,
|
||||
syncHover: _propTypes2["default"].bool,
|
||||
tabIndex: _propTypes2["default"].string,
|
||||
hoverContent: _propTypes2["default"].func
|
||||
hoverContent: _propTypes2["default"].func,
|
||||
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg'])
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
@ -145,7 +146,8 @@ var defaultProps = {
|
|||
setRowHeight: function setRowHeight() {},
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
tabIndex: '0',
|
||||
heightConsistent: false
|
||||
heightConsistent: false,
|
||||
size: 'md'
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
@ -1319,7 +1321,7 @@ var Table = function (_Component) {
|
|||
|
||||
var props = this.props;
|
||||
var clsPrefix = props.clsPrefix;
|
||||
|
||||
var hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
|
||||
var className = props.clsPrefix;
|
||||
if (props.className) {
|
||||
className += ' ' + props.className;
|
||||
|
@ -1348,6 +1350,12 @@ var Table = function (_Component) {
|
|||
show: loading
|
||||
};
|
||||
}
|
||||
if (props.size) {
|
||||
className += ' ' + clsPrefix + '-' + props.size;
|
||||
}
|
||||
if (hasFixedLeft) {
|
||||
className += ' has-fixed-left';
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
|
@ -1366,7 +1374,7 @@ var Table = function (_Component) {
|
|||
this.getEmptyText(),
|
||||
this.getFooter()
|
||||
),
|
||||
this.columnManager.isAnyColumnsLeftFixed() && _react2["default"].createElement(
|
||||
hasFixedLeft && _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + '-fixed-left' },
|
||||
this.getLeftFixedTable()
|
||||
|
|
|
@ -223,7 +223,7 @@ function multiSelect(Table, Checkbox) {
|
|||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
fixed: "left",
|
||||
width: 60,
|
||||
width: 50,
|
||||
render: function render(text, record, index) {
|
||||
var attr = {};
|
||||
record._disabled ? attr.disabled = record._disabled : "";
|
||||
|
|
|
@ -0,0 +1,78 @@
|
|||
/**
|
||||
*
|
||||
* @title 基本表格
|
||||
* @parent 基础 Basic
|
||||
* @description 鼠标hover行时呼出操作按钮。单元格数据过长时,可结合Tooltip组件使用。
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||
fixed:'left',
|
||||
textAlign:'center',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo01 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容:' , this.currentRecord);
|
||||
}
|
||||
|
||||
onRowHover=(index,record)=>{
|
||||
this.currentIndex = index;
|
||||
this.currentRecord = record;
|
||||
}
|
||||
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
height={40}
|
||||
hoverContent={this.getHoverContent}
|
||||
onRowHover={this.onRowHover}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo01;
|
File diff suppressed because one or more lines are too long
|
@ -8618,6 +8618,10 @@ ul {
|
|||
.u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
|
||||
width: 14px;
|
||||
height: 14px; }
|
||||
.u-table .u-table-scroll tr td:first-child, .u-table .u-table-scroll tr th:first-child, .u-table .u-table-fixed-left tr td:first-child, .u-table .u-table-fixed-left tr th:first-child {
|
||||
padding-left: 12px; }
|
||||
.u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {
|
||||
padding-left: 8px; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
|
|
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>
|
||||
|
|
|
@ -1184,7 +1184,7 @@ class Table extends Component {
|
|||
render() {
|
||||
const props = this.props;
|
||||
const clsPrefix = props.clsPrefix;
|
||||
|
||||
const hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
|
||||
let className = props.clsPrefix;
|
||||
if (props.className) {
|
||||
className += ` ${props.className}`;
|
||||
|
@ -1218,6 +1218,9 @@ class Table extends Component {
|
|||
if (props.size) {
|
||||
className += ` ${clsPrefix}-${props.size}`;
|
||||
}
|
||||
if(hasFixedLeft){
|
||||
className += ` has-fixed-left`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className} style={props.style} ref={el => this.contentTable = el}
|
||||
|
@ -1231,7 +1234,7 @@ class Table extends Component {
|
|||
{this.getFooter()}
|
||||
</div>
|
||||
|
||||
{this.columnManager.isAnyColumnsLeftFixed() &&
|
||||
{hasFixedLeft &&
|
||||
<div className={`${clsPrefix}-fixed-left`}>
|
||||
{this.getLeftFixedTable()}
|
||||
</div>}
|
||||
|
|
|
@ -11,6 +11,7 @@ $table-border-color: unquote("rgb(#{$table-border-color-base})");
|
|||
// $table-head-text-color: #666;
|
||||
$vertical-padding: 12px;
|
||||
$horizontal-padding: 8px;
|
||||
$first-horizontal-padding: 12px;
|
||||
// $table-border-color: #e9e9e9;
|
||||
|
||||
$table-hover-color: #E7F2FC;
|
||||
|
@ -600,6 +601,22 @@ $icon-color:#505F79;
|
|||
}
|
||||
}
|
||||
}
|
||||
.u-table-scroll,.u-table-fixed-left{
|
||||
tr{
|
||||
td:first-child, th:first-child{
|
||||
padding-left: $first-horizontal-padding
|
||||
}
|
||||
}
|
||||
}
|
||||
&.has-fixed-left{
|
||||
.u-table-scroll{
|
||||
tr{
|
||||
td:first-child, th:first-child{
|
||||
padding-left: $horizontal-padding
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.u-table:focus{
|
||||
outline: none;
|
||||
|
|
|
@ -175,7 +175,7 @@ export default function multiSelect(Table, Checkbox) {
|
|||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
fixed:"left",
|
||||
width: 60,
|
||||
width: 50,
|
||||
render: (text, record, index) => {
|
||||
let attr = {};
|
||||
record._disabled?attr.disabled = record._disabled:"";
|
||||
|
|
Loading…
Reference in New Issue