feat:每行第一列padding-left为12px,其他默认8px
This commit is contained in:
parent
e614706d09
commit
f734fd59c3
|
@ -20,13 +20,15 @@
|
||||||
text-align: left; }
|
text-align: left; }
|
||||||
.u-table th {
|
.u-table th {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: left; }
|
text-align: left;
|
||||||
|
line-height: 16px; }
|
||||||
.u-table th[colspan] {
|
.u-table th[colspan] {
|
||||||
text-align: center; }
|
text-align: center; }
|
||||||
.u-table th ::last-child {
|
.u-table th ::last-child {
|
||||||
overflow: hidden; }
|
overflow: hidden; }
|
||||||
.u-table td {
|
.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 {
|
.u-table td a {
|
||||||
color: #2196F3; }
|
color: #2196F3; }
|
||||||
.u-table td a:hover {
|
.u-table td a:hover {
|
||||||
|
@ -55,6 +57,10 @@
|
||||||
.u-table th.text-right,
|
.u-table th.text-right,
|
||||||
.u-table td.text-right {
|
.u-table td.text-right {
|
||||||
text-align: right; }
|
text-align: right; }
|
||||||
|
.u-table-sm td {
|
||||||
|
padding: 8px 8px; }
|
||||||
|
.u-table-lg td {
|
||||||
|
padding: 16px 8px; }
|
||||||
.u-table tr.filterable th {
|
.u-table tr.filterable th {
|
||||||
padding-top: 5px !important;
|
padding-top: 5px !important;
|
||||||
padding-bottom: 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 {
|
.u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 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 {
|
.u-table:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
|
@ -100,7 +100,8 @@ var propTypes = {
|
||||||
onFilterClear: _propTypes2["default"].func,
|
onFilterClear: _propTypes2["default"].func,
|
||||||
syncHover: _propTypes2["default"].bool,
|
syncHover: _propTypes2["default"].bool,
|
||||||
tabIndex: _propTypes2["default"].string,
|
tabIndex: _propTypes2["default"].string,
|
||||||
hoverContent: _propTypes2["default"].func
|
hoverContent: _propTypes2["default"].func,
|
||||||
|
size: _propTypes2["default"].oneOf(['sm', 'md', 'lg'])
|
||||||
};
|
};
|
||||||
|
|
||||||
var defaultProps = {
|
var defaultProps = {
|
||||||
|
@ -145,7 +146,8 @@ var defaultProps = {
|
||||||
setRowHeight: function setRowHeight() {},
|
setRowHeight: function setRowHeight() {},
|
||||||
setRowParentIndex: function setRowParentIndex() {},
|
setRowParentIndex: function setRowParentIndex() {},
|
||||||
tabIndex: '0',
|
tabIndex: '0',
|
||||||
heightConsistent: false
|
heightConsistent: false,
|
||||||
|
size: 'md'
|
||||||
};
|
};
|
||||||
|
|
||||||
var Table = function (_Component) {
|
var Table = function (_Component) {
|
||||||
|
@ -1319,7 +1321,7 @@ var Table = function (_Component) {
|
||||||
|
|
||||||
var props = this.props;
|
var props = this.props;
|
||||||
var clsPrefix = props.clsPrefix;
|
var clsPrefix = props.clsPrefix;
|
||||||
|
var hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
|
||||||
var className = props.clsPrefix;
|
var className = props.clsPrefix;
|
||||||
if (props.className) {
|
if (props.className) {
|
||||||
className += ' ' + props.className;
|
className += ' ' + props.className;
|
||||||
|
@ -1348,6 +1350,12 @@ var Table = function (_Component) {
|
||||||
show: loading
|
show: loading
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
if (props.size) {
|
||||||
|
className += ' ' + clsPrefix + '-' + props.size;
|
||||||
|
}
|
||||||
|
if (hasFixedLeft) {
|
||||||
|
className += ' has-fixed-left';
|
||||||
|
}
|
||||||
|
|
||||||
return _react2["default"].createElement(
|
return _react2["default"].createElement(
|
||||||
'div',
|
'div',
|
||||||
|
@ -1366,7 +1374,7 @@ var Table = function (_Component) {
|
||||||
this.getEmptyText(),
|
this.getEmptyText(),
|
||||||
this.getFooter()
|
this.getFooter()
|
||||||
),
|
),
|
||||||
this.columnManager.isAnyColumnsLeftFixed() && _react2["default"].createElement(
|
hasFixedLeft && _react2["default"].createElement(
|
||||||
'div',
|
'div',
|
||||||
{ className: clsPrefix + '-fixed-left' },
|
{ className: clsPrefix + '-fixed-left' },
|
||||||
this.getLeftFixedTable()
|
this.getLeftFixedTable()
|
||||||
|
|
|
@ -223,7 +223,7 @@ function multiSelect(Table, Checkbox) {
|
||||||
key: "checkbox",
|
key: "checkbox",
|
||||||
dataIndex: "checkbox",
|
dataIndex: "checkbox",
|
||||||
fixed: "left",
|
fixed: "left",
|
||||||
width: 60,
|
width: 50,
|
||||||
render: function render(text, record, index) {
|
render: function render(text, record, index) {
|
||||||
var attr = {};
|
var attr = {};
|
||||||
record._disabled ? attr.disabled = record._disabled : "";
|
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 {
|
.u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 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 {
|
.u-table:focus {
|
||||||
outline: none;
|
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>
|
<title>neoui-react-button</title>
|
||||||
<link rel="stylesheet" href="./demo/atom-one-dark.css">
|
<link rel="stylesheet" href="./demo/atom-one-dark.css">
|
||||||
<link rel="stylesheet" href="./dist/demo.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>
|
</head>
|
||||||
|
|
|
@ -1184,7 +1184,7 @@ class Table extends Component {
|
||||||
render() {
|
render() {
|
||||||
const props = this.props;
|
const props = this.props;
|
||||||
const clsPrefix = props.clsPrefix;
|
const clsPrefix = props.clsPrefix;
|
||||||
|
const hasFixedLeft = this.columnManager.isAnyColumnsLeftFixed();
|
||||||
let className = props.clsPrefix;
|
let className = props.clsPrefix;
|
||||||
if (props.className) {
|
if (props.className) {
|
||||||
className += ` ${props.className}`;
|
className += ` ${props.className}`;
|
||||||
|
@ -1218,6 +1218,9 @@ class Table extends Component {
|
||||||
if (props.size) {
|
if (props.size) {
|
||||||
className += ` ${clsPrefix}-${props.size}`;
|
className += ` ${clsPrefix}-${props.size}`;
|
||||||
}
|
}
|
||||||
|
if(hasFixedLeft){
|
||||||
|
className += ` has-fixed-left`;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className} style={props.style} ref={el => this.contentTable = el}
|
<div className={className} style={props.style} ref={el => this.contentTable = el}
|
||||||
|
@ -1231,7 +1234,7 @@ class Table extends Component {
|
||||||
{this.getFooter()}
|
{this.getFooter()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{this.columnManager.isAnyColumnsLeftFixed() &&
|
{hasFixedLeft &&
|
||||||
<div className={`${clsPrefix}-fixed-left`}>
|
<div className={`${clsPrefix}-fixed-left`}>
|
||||||
{this.getLeftFixedTable()}
|
{this.getLeftFixedTable()}
|
||||||
</div>}
|
</div>}
|
||||||
|
|
|
@ -11,6 +11,7 @@ $table-border-color: unquote("rgb(#{$table-border-color-base})");
|
||||||
// $table-head-text-color: #666;
|
// $table-head-text-color: #666;
|
||||||
$vertical-padding: 12px;
|
$vertical-padding: 12px;
|
||||||
$horizontal-padding: 8px;
|
$horizontal-padding: 8px;
|
||||||
|
$first-horizontal-padding: 12px;
|
||||||
// $table-border-color: #e9e9e9;
|
// $table-border-color: #e9e9e9;
|
||||||
|
|
||||||
$table-hover-color: #E7F2FC;
|
$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{
|
.u-table:focus{
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
|
@ -175,7 +175,7 @@ export default function multiSelect(Table, Checkbox) {
|
||||||
key: "checkbox",
|
key: "checkbox",
|
||||||
dataIndex: "checkbox",
|
dataIndex: "checkbox",
|
||||||
fixed:"left",
|
fixed:"left",
|
||||||
width: 60,
|
width: 50,
|
||||||
render: (text, record, index) => {
|
render: (text, record, index) => {
|
||||||
let attr = {};
|
let attr = {};
|
||||||
record._disabled?attr.disabled = record._disabled:"";
|
record._disabled?attr.disabled = record._disabled:"";
|
||||||
|
|
Loading…
Reference in New Issue