本文实例为大家分享了React实现表格选取的具体代码，供大家参考，具体内容如下
在工作中，遇到一个需求，在表格中实现类似于Excel选中一片区域的，然后拿到选中区域的所有数据。
1.实现需求和效果截图
1.获取选中区域的数据
2.选择的方向是任意的
3.支持几行 / 几列的选取
4.通过生产JSON给后台进行交互
5.标记出表头和第一行的数据
2.核心代码解析
2.1区域选择
onClick={() => {
? ? ?// 区间选取
? ? ? if (itemIndex != 0) {
? ? ? ? ? setType('slide')
? ? ? ? ? /**
? ? ? ? ? 第一个点击的时候，打开鼠标移动的逻辑
? ? ? ? ? 区间选取的时候，要标记第一次选中点的（x,y）坐标。
? ? ? ? ? 同时初始化x,y的最小最大值。
? ? ? ? ? **/
? ? ? ? ? if(isStart == 0){
? ? ? ? ? ? ? setIsStart(1)
? ? ? ? ? ? ? setStartItemIndex(itemIndex)
? ? ? ? ? ? ? setStartDataIndex(dataIndex)
? ? ? ? ? ? ? setMaxItemIndexs(itemIndex)
? ? ? ? ? ? ? setMaxDataIndexs(dataIndex)
? ? ? ? ? ? ? setMinItemIndexs(itemIndex)
? ? ? ? ? ? ? setMinDataIndexs(dataIndex)
? ? ? ? ? }else {
? ? ? ? ? ?? ? //第二次点击的时候，关闭鼠标移动的逻辑
? ? ? ? ? ? ? setIsStart(0)
? ? ? ? ? }
? ? ? }
? ? ? // 行选取
? ? ? if (itemIndex == 0) {
? ? ? ? ? setType('row')
? ? ? ? ? setIsStart(1)
? ? ? ? ? setColumnIndexList([])
? ? ? ? ? if (rowIndexList.indexOf(dataIndex) != -1) {
? ? ? ? ? ? ? let obj = [...rowIndexList]
? ? ? ? ? ? ? obj.deleteElementByValue(dataIndex)
? ? ? ? ? ? ? setRowIndexList(obj)
? ? ? ? ? } else {
? ? ? ? ? ? ? let obj = [...rowIndexList]
? ? ? ? ? ? ? obj.push(dataIndex)
? ? ? ? ? ? ? setRowIndexList(obj)
? ? ? ? ? }
? ? ? }
? }}
2.2鼠标移动效果
onMouseOver={() => {
? ? ?if (isStart) {
? ? ? ? ?if(itemIndex!= 0 ){
? ? ? ? ??? ? //比较当前值跟第一次点击值的大小，随时调整最大值和最小值。从而达到选中区域的效果
? ? ? ? ? ? ?if (itemIndex > startItemIndex) {
? ? ? ? ? ? ? ? ?setMinItemIndexs(startItemIndex)
? ? ? ? ? ? ? ? ?setMaxItemIndexs(itemIndex)
? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ?setMaxItemIndexs(startItemIndex)
? ? ? ? ? ? ? ? ?setMinItemIndexs(itemIndex)
? ? ? ? ? ? ?}
? ? ? ? ?}
? ? ? ? ?if (dataIndex > startDataIndex) {
? ? ? ? ? ? ?setMinDataIndexs(startDataIndex)
? ? ? ? ? ? ?setMaxDataIndexs(dataIndex)
? ? ? ? ?}
? ? ? ? ?else {
? ? ? ? ? ? ?setMaxDataIndexs(startDataIndex)
? ? ? ? ? ? ?setMinDataIndexs(dataIndex)
? ? ? ? ?}
? ? ?}
?}}
2.3生产JSON数据逻辑
<Button type="primary" onClick={() => {
? ? ?if (type == 'slide') {
? ? ? ? ?// 区域选择
? ? ? ? ?// 数据体
? ? ? ? ?let obj = {}
? ? ? ? ?// 表头集合
? ? ? ? ?let headerList = []
? ? ? ? ?// 第一列集合
? ? ? ? ?let firstRow = []
? ? ? ? ?for (let i = minDataIndexs; i <= maxDataIndexs; i++) {
? ? ? ? ? ? ?obj[data['数据集'][i]] = []
? ? ? ? ? ? ?if(firstRow.indexOf(data['数据集'][i]) == -1){
? ? ? ? ? ? ? ? ?firstRow.push(data['数据集'][i])
? ? ? ? ? ? ?}
? ? ? ? ? ? ?for (let j = minItemIndexs; j <= maxItemIndexs; j++) {
? ? ? ? ? ? ? ? ?let dataObj = {}
? ? ? ? ? ? ? ? ?dataObj[header[j].name] = data[header[j].name][i]
? ? ? ? ? ? ? ? ?if(headerList.indexOf(header[j].name) == -1){
? ? ? ? ? ? ? ? ? ? ?headerList.push(header[j].name)
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ?obj[data['数据集'][i]].push(dataObj)
? ? ? ? ? ? ?}
? ? ? ? ?}
? ? ? ? ?console.log(firstRow);
? ? ? ? ?console.log(headerList);
? ? ? ? ?console.log(obj);
? ? ?} else if (type == 'row') {
? ? ? ? ?// 几行选中
? ? ? ? ?let obj = {}
? ? ? ? ?let headerList = []
? ? ? ? ?let firstRow = []
? ? ? ? ?rowIndexList.map(item => {
? ? ? ? ? ? ?obj[data['数据集'][item]] = []
? ? ? ? ? ? ?firstRow.push(data['数据集'][item])
? ? ? ? ? ? ?header.map((headerItem, headerIndex) => {
? ? ? ? ? ? ? ? ?if (headerIndex != 0) {
? ? ? ? ? ? ? ? ? ? ?let dataObj = {}
? ? ? ? ? ? ? ? ? ? ?if(headerList.indexOf(headerItem.name) == -1){
? ? ? ? ? ? ? ? ? ? ? ? ?headerList.push(headerItem.name)
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?dataObj[headerItem.name] = data[headerItem.name][item]
? ? ? ? ? ? ? ? ? ? ?obj[data['数据集'][item]].push(dataObj)
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?})
? ? ? ? ?})
? ? ? ? ?console.log(firstRow);
? ? ? ? ?console.log(headerList);
? ? ? ? ?console.log(obj);
? ? ?} else if (type == 'column') {
? ? ? ? ?// 几列选中
? ? ? ? ?let headerList = []
? ? ? ? ?let firstRow = []
? ? ? ? ?let obj = {}
? ? ? ? ?data['数据集'].map((item, index) => {
? ? ? ? ? ? ?obj[item] = []
? ? ? ? ? ? ?firstRow.push(item)
? ? ? ? ? ? ?columnIndexList.map(i => {
? ? ? ? ? ? ? ? ?let dataObj = {}
? ? ? ? ? ? ? ? ?if(headerList.indexOf(header[i].name) == -1){
? ? ? ? ? ? ? ? ? ? ?headerList.push(header[i].name)
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ?dataObj[header[i].name] = data[header[i].name][index]
? ? ? ? ? ? ? ? ?obj[item].push(dataObj)
? ? ? ? ? ? ?})
? ? ? ? ?})
? ? ? ? ?console.log(firstRow);
? ? ? ? ?console.log(headerList);
? ? ? ? ?console.log(obj);
? ? ?}
?}}>确定</Button>
3.完成代码
import { Button } from 'antd';
import React, { useState } from 'react';
function Index(params) {
? ? // 删除数组中第一个匹配的元素，成功则返回位置索引，失败则返回 -1。
? ? Array.prototype.deleteElementByValue = function (varElement) {
? ? ? ? var numDeleteIndex = -1;
? ? ? ? for (var i = 0; i < this.length; i++) {
? ? ? ? ? ? // 严格比较，即类型与数值必须同时相等。
? ? ? ? ? ? if (this[i] === varElement) {
? ? ? ? ? ? ? ? this.splice(i, 1);
? ? ? ? ? ? ? ? numDeleteIndex = i;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return numDeleteIndex;
? ? }
? ? // 表头
? ? const [header, setHeader] = useState([
? ? ? ? {
? ? ? ? ? ? name: "数据集",
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '19春支付金额',
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '20春支付金额',
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '21春支付金额',
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '19春支付人数',
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '20春支付人数',
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '21春支付人数',
? ? ? ? }
? ? ])
? ? // 数据
? ? const [data, setData] = useState({
? ? ? ? '数据集': ['连衣裙', '裤子', '衬衫', '短袖', '长袖', '短裤', '羽绒服', '棉毛裤'],
? ? ? ? '19春支付金额': [10000, 5000, 10000, 5000, 10000, 5000, 10000, 5000],
? ? ? ? '20春支付金额': [12000, 5200, 12000, 5200, 12000, 5200, 12000, 5200],
? ? ? ? '21春支付金额': [14000, 5400, 14000, 5400, 14000, 5400, 14000, 5400],
? ? ? ? '19春支付人数': [1000, 500, 1000, 500, 1000, 500, 1000, 500],
? ? ? ? '20春支付人数': [1200, 520, 1200, 520, 1200, 520, 1200, 520],
? ? ? ? '21春支付人数': [1400, 540, 1400, 540, 1400, 540, 1400, 540],
? ? })
? ? //?
? ? const [isStart, setIsStart] = useState(0)
? ? // 类型
? ? const [type, setType] = useState('')
? ? // // 起始
? ? const [startItemIndex, setStartItemIndex] = useState(-1)
? ? const [startDataIndex, setStartDataIndex] = useState(-1)
? ? // 小
? ? const [minItemIndexs, setMinItemIndexs] = useState(-1)
? ? const [minDataIndexs, setMinDataIndexs] = useState(-1)
? ? // 大
? ? const [maxItemIndexs, setMaxItemIndexs] = useState(-1)
? ? const [maxDataIndexs, setMaxDataIndexs] = useState(-1)
? ? // 行下标
? ? const [rowIndexList, setRowIndexList] = useState([])
? ? // 列下标
? ? const [columnIndexList, setColumnIndexList] = useState([])
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <div style={{ marginLeft: 200 }}>
? ? ? ? ? ? ? ? <div style={{ display: 'flex' }}>
? ? ? ? ? ? ? ? ? ? <Button type="primary" onClick={() => {
? ? ? ? ? ? ? ? ? ? ? ? if (type == 'slide') {
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 区域选择
? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = {}
? ? ? ? ? ? ? ? ? ? ? ? ? ? let headerList = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? let firstRow = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? for (let i = minDataIndexs; i <= maxDataIndexs; i++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[data['数据集'][i]] = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(firstRow.indexOf(data['数据集'][i]) == -1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? firstRow.push(data['数据集'][i])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for (let j = minItemIndexs; j <= maxItemIndexs; j++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let dataObj = {}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? dataObj[header[j].name] = data[header[j].name][i]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(headerList.indexOf(header[j].name) == -1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? headerList.push(header[j].name)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[data['数据集'][i]].push(dataObj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(firstRow);
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(headerList);
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(obj);
? ? ? ? ? ? ? ? ? ? ? ? } else if (type == 'row') {
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 几行选中
? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = {}
? ? ? ? ? ? ? ? ? ? ? ? ? ? let headerList = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? let firstRow = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? rowIndexList.map(item => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[data['数据集'][item]] = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? firstRow.push(data['数据集'][item])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? header.map((headerItem, headerIndex) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (headerIndex != 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let dataObj = {}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(headerList.indexOf(headerItem.name) == -1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? headerList.push(headerItem.name)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? dataObj[headerItem.name] = data[headerItem.name][item]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[data['数据集'][item]].push(dataObj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(firstRow);
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(headerList);
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(obj);
? ? ? ? ? ? ? ? ? ? ? ? } else if (type == 'column') {
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 几列选中
? ? ? ? ? ? ? ? ? ? ? ? ? ? let headerList = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? let firstRow = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = {}
? ? ? ? ? ? ? ? ? ? ? ? ? ? data['数据集'].map((item, index) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[item] = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? firstRow.push(item)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? columnIndexList.map(i => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let dataObj = {}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(headerList.indexOf(header[i].name) == -1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? headerList.push(header[i].name)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? dataObj[header[i].name] = data[header[i].name][index]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[item].push(dataObj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(firstRow);
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(headerList);
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(obj);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }}>确定</Button>
? ? ? ? ? ? ? ? ? ? {/* <Button type="primary" danger onClick={()=>{
? ? ? ? ? ? ? ? ? ? ? ? setStartItemIndex(-1)
? ? ? ? ? ? ? ? ? ? ? ? setRowIndexList([])
? ? ? ? ? ? ? ? ? ? ? ? setColumnIndexList([])
? ? ? ? ? ? ? ? ? ? ? ? setType('')
? ? ? ? ? ? ? ? ? ? }}>重置</Button> */}
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div style={{ display: 'flex', textAlign: "center" }}>
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? header.map((item, index) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? return <div style={{ minWidth: 100, border: "1px solid #ccc" }} onClick={() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setType('column')
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setRowIndexList([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (columnIndexList.indexOf(index) != -1) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...columnIndexList]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.deleteElementByValue(index)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setColumnIndexList(obj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...columnIndexList]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.push(index)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setColumnIndexList(obj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? }}>{item.name}</div>
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div style={{ display: 'flex', textAlign: "center" }}>
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? header.map((item, itemIndex) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? return <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data[item.name].map((data, dataIndex) => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return <div onClick={() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 区间选取
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (itemIndex != 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setType('slide')
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(isStart == 0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setIsStart(1)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setStartItemIndex(itemIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setStartDataIndex(dataIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMaxItemIndexs(itemIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMaxDataIndexs(dataIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMinItemIndexs(itemIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMinDataIndexs(dataIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setIsStart(0)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 行选取
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (itemIndex == 0) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setType('row')
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setIsStart(1)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setColumnIndexList([])
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (rowIndexList.indexOf(dataIndex) != -1) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...rowIndexList]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.deleteElementByValue(dataIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setRowIndexList(obj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...rowIndexList]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.push(dataIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setRowIndexList(obj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} onMouseOver={() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (isStart) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(itemIndex!= 0 ){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (itemIndex > startItemIndex) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMinItemIndexs(startItemIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMaxItemIndexs(itemIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMaxItemIndexs(startItemIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMinItemIndexs(itemIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (dataIndex > startDataIndex) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMinDataIndexs(startDataIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMaxDataIndexs(dataIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMaxDataIndexs(startDataIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setMinDataIndexs(dataIndex)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} style={{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? minWidth: 100, border: "1px solid #ccc",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? backgroundColor: type == 'slide' ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (itemIndex >= minItemIndexs && itemIndex <= maxItemIndexs) && (dataIndex >= minDataIndexs && dataIndex <= maxDataIndexs) ? 'pink' : '' :
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type == 'row' ? rowIndexList.indexOf(dataIndex) != -1 ? 'pink' : '' :
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type == 'column' ? columnIndexList.indexOf(itemIndex) != -1 ? 'pink' : '' : ''
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }}>{data}</div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? )
}
export default Index
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did121883