1、公共editableTabke（js）
import Reactfrom 'react';
import './index.css';
class EditableTableextends React.Component {
componentDidMount = () => {
//文字无缝滚动
this.industryNews =setInterval(this.taskIndustryNews,50);
}
taskIndustryNews = () => {
if (this.refs.newDiv.scrollTop >=this.refs.newDivUI.offsetHeight -this.refs.newDiv.clientHeight) {
this.refs.newDiv.scrollTop =0;
}
else {
this.refs.newDiv.scrollTop +=1;
}
}
handleIndustryNewsEnter = () => {
clearInterval(this.industryNews);
}
handleIndustryNewsLeave = () => {
this.industryNews =setInterval(this.taskIndustryNews,50);
}
componentWillUnmount = () => {
clearInterval(this.industryNews);
}
render() {
const averageWidth =100/this.props.columns.length +'%'
return (
<div className='ceShiTable'>
<div className='ceShiTable-title'>
{
this.props.columns.map((item,index) => {
return (
<span className='ceShiTable-text2' key={index} style={{width:averageWidth}}>{item.title}</span>
)
})
}
</div>
<div
ref='newDiv'
className='ceShiTable-body'
onMouseEnter={this.handleIndustryNewsEnter.bind(this)} onMouseLeave={this.handleIndustryNewsLeave.bind(this)} >
<ul ref='newDivUI'>
{this.props.data &&this.props.data.length >0
?
this.props.data.map(this.tableBody)
:<span className='noData'>暂无数据</span>
}
</ul>
</div>
</div>
);
}
tableBody = (dataItem, dataIndex) => {
let averageWidth =100/this.props.columns.length +'%'
return (
<li key={dataIndex}>
{
this.props.columns.map((columnsItem,columnsIndex)=>{
return (
<span className='ceShiTable-text2' key={columnsIndex} style={{width:averageWidth}}>
{dataItem[columnsItem.key]}
</span>
)
})
}
</li>
);
}
}
export default EditableTable;
2、tableCSS样式
.ceShiTable {
padding:10px 15px;
text-align:center;
font-size:12px;
height:100%;
}
.ceShiTable .ceShiTable-text2 {
display:inline-block;
}
.ceShiTable-title {
background:rgba(0,180,251,0.5);
font-weight:bold;
color:#000;
}
.ceShiTable-title span {
font-size:12px;
height:24px;
line-height:24px;
}
.ceShiTable-body {
height:calc(100% -30px);
overflow-y:scroll;
color:#a1b6e5;
}
.ceShiTable-body::-webkit-scrollbar {
width:3px;
}
.ceShiTable-body::-webkit-scrollbar-thumb {
background:rgba(0,180,251,0.5);
border-radius:7px;
box-shadow:inset 0 0 15px rgba(0,180,251,1);
}
.ceShiTable-body ul {
padding-inline-start:0px;
}
.ceShiTable-body ul .noData{
height:78px;
line-height:78px;
}
.ceShiTable-body ul li {
background:transparent;
display:flex;
align-items:center;
min-height:24px;
}
.ceShiTable-body ul li span {
font-size:12px;
}
.ceShiTable-body ul li:nth-child(2n) {
background:rgba(157,217,255,0.1)
}
.ceShiTable-body ul li:hover {
background:rgba(87,98,250,0.4);
color:rgba(255,255,255,1);
}
3、table调用
import React, { Component }from 'react'
import EditableTablefrom '../../static/component/editableTable/index'
class InsGpsMainExhibitionextends Component{
state = {
};
columns = [
{
title:'企业名称',
key:'businessName'
},
{
title:'临检次数',
key:'inspectionNumber'
},
{
title:'行车日志',
key:'gps'
},
{
title:'维护次数',
key:'maintain'
}
]
data = [
{
businessId:1,
businessName:'测试公司1',
wholeNumber:50,
trueNumber:48
},
{
businessId:1,
businessName:'测试公司2',
wholeNumber:50,
trueNumber:48
},
{
businessId:3,
businessName:'测试公司3',
wholeNumber:50,
trueNumber:48
},
{
businessId:4,
businessName:'测试公司4',
wholeNumber:50,
trueNumber:48
},
{
businessId:5,
businessName:'测试公司5',
wholeNumber:50,
trueNumber:48
},
{
businessId:6,
businessName:'测试公司6',
wholeNumber:50,
trueNumber:48
},
{
businessId:7,
businessName:'测试公司7',
wholeNumber:50,
trueNumber:48
},
{
businessId:8,
businessName:'测试公司8',
wholeNumber:50,
trueNumber:48
},
{
businessId:9,
businessName:'测试公司9',
wholeNumber:50,
trueNumber:48
},
{
businessId:10,
businessName:'测试公司10',
wholeNumber:50,
trueNumber:48
},
{
businessId:11,
businessName:'测试公司11',
wholeNumber:50,
trueNumber:48
},
{
businessId:12,
businessName:'测试公司12',
wholeNumber:50,
trueNumber:48
}
]
render() {
return(
<div>
<EditableTable columns={this.columns} data={this.data}/>
</div>
)
}
}
export default InsGpsMainExhibition
