console
const { useState, useEffect } = React;
function RowList(props) {
const { dataList ,columnList,loadMore,onSelect,selectedArr,setSelectedArr} = props
const oncheckbox=(item)=>{
const ischeck = selectedArr.includes(item)
let array
if(ischeck){
array = selectedArr.filter(i=>i.id !=item.id)
}else{
array=[...selectedArr,item]
}
setSelectedArr(array)
console.log("array==",array)
}
return <div>
<div>
<table border="2px">
<tr>
<td></td>
{
columnList.map(item=>{
return(
<td key={item.id}>{item.label}</td>
)
})
}
</tr>
{
dataList.map(item=>{
return(
<tr key={item.id}>
<td><input type="checkbox" value={item.id} onClick={(e)=>oncheckbox(item)} checked={selectedArr.includes(item)}></input></td>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.phone}</td>
</tr>
)
})
}
</table>
</div>
<div onClick={()=>loadMore()}>加载更多</div>
</div>
}
function App() {
const [dataList, setDataList] = useState([])
const [selectedArr, setSelectedArr] = useState([])
const [columnList, setColumnList] = useState([
{
index: 'id',
label: 'ID'
},
{
index: 'name',
label: '名称'
},
{
index: 'phone',
label: '手机号'
},])
useEffect(() => {
loadData()
}, [])
function onSelect(e) {
console.log("e===",e)
setSelectedArr(e)
}
function loadMore(currentLen) {
loadData(currentLen)
}
async function loadData(currentLen = 0) {
const res = await mockData(currentLen)
setDataList([...dataList, ...res])
}
function mockData(currentIndex = 0, LEN = 100) {
return new Promise((resolve, reject) => {
try {
const res = []
for (let i = currentIndex; i < currentIndex + LEN; i++) {
res.push({
id: `id-${i}`,
name: `名称-${i}`,
phone: 13333333333 + i
})
}
resolve(res)
} catch (e) {
reject(e)
}
})
}
return (
<div>
<RowList dataList={dataList} columnList={columnList} onSelect={(e) => onSelect(e)} loadMore={(e) => loadMore(e)} selectedArr={selectedArr} setSelectedArr={setSelectedArr}></RowList>
{selectedArr.map(e => <span style={{ marginRight: '4px' }}>{e.id}</span>)}
</div>)
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
<div id="app"></div>
.select{
width:20px;
height: 20px;
border: 1px solid red
}
.bgc{
background-color: red;
}