React實(shí)現(xiàn)表格選取
更新時(shí)間：2022年08月23日 16:03:37 作者：追逐驀然
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)表格選取，類似于Excel選中一片區(qū)域并獲得選中區(qū)域的所有數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了React實(shí)現(xiàn)表格選取的具體代碼，供大家參考，具體內(nèi)容如下
在工作中，遇到一個(gè)需求，在表格中實(shí)現(xiàn)類似于Excel選中一片區(qū)域的，然后拿到選中區(qū)域的所有數(shù)據(jù)。
1.實(shí)現(xiàn)需求和效果截圖
1.獲取選中區(qū)域的數(shù)據(jù)
2.選擇的方向是任意的
3.支持幾行 / 幾列的選取
4.通過生產(chǎn)JSON給后臺(tái)進(jìn)行交互
5.標(biāo)記出表頭和第一行的數(shù)據(jù)
2.核心代碼解析
2.1區(qū)域選擇
onClick={() => {
? ? ?// 區(qū)間選取
? ? ? if (itemIndex != 0) {
? ? ? ? ? setType('slide')
? ? ? ? ? /**
? ? ? ? ? 第一個(gè)點(diǎn)擊的時(shí)候，打開鼠標(biāo)移動(dòng)的邏輯
? ? ? ? ? 區(qū)間選取的時(shí)候，要標(biāo)記第一次選中點(diǎn)的（x,y）坐標(biāo)。
? ? ? ? ? 同時(shí)初始化x,y的最小最大值。
? ? ? ? ? **/
? ? ? ? ? if(isStart == 0){
? ? ? ? ? ? ? setIsStart(1)
? ? ? ? ? ? ? setStartItemIndex(itemIndex)
? ? ? ? ? ? ? setStartDataIndex(dataIndex)
? ? ? ? ? ? ? setMaxItemIndexs(itemIndex)
? ? ? ? ? ? ? setMaxDataIndexs(dataIndex)
? ? ? ? ? ? ? setMinItemIndexs(itemIndex)
? ? ? ? ? ? ? setMinDataIndexs(dataIndex)
? ? ? ? ? }else {
? ? ? ? ? ?? ? //第二次點(diǎn)擊的時(shí)候，關(guān)閉鼠標(biāo)移動(dòng)的邏輯
? ? ? ? ? ? ? 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鼠標(biāo)移動(dòng)效果
onMouseOver={() => {
? ? ?if (isStart) {
? ? ? ? ?if(itemIndex!= 0 ){
? ? ? ? ??? ? //比較當(dāng)前值跟第一次點(diǎn)擊值的大小，隨時(shí)調(diào)整最大值和最小值。從而達(dá)到選中區(qū)域的效果
? ? ? ? ? ? ?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生產(chǎn)JSON數(shù)據(jù)邏輯
<Button type="primary" onClick={() => {
? ? ?if (type == 'slide') {
? ? ? ? ?// 區(qū)域選擇
? ? ? ? ?// 數(shù)據(jù)體
? ? ? ? ?let obj = {}
? ? ? ? ?// 表頭集合
? ? ? ? ?let headerList = []
? ? ? ? ?// 第一列集合
? ? ? ? ?let firstRow = []
? ? ? ? ?for (let i = minDataIndexs; i <= maxDataIndexs; i++) {
? ? ? ? ? ? ?obj[data['數(shù)據(jù)集'][i]] = []
? ? ? ? ? ? ?if(firstRow.indexOf(data['數(shù)據(jù)集'][i]) == -1){
? ? ? ? ? ? ? ? ?firstRow.push(data['數(shù)據(jù)集'][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['數(shù)據(jù)集'][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['數(shù)據(jù)集'][item]] = []
? ? ? ? ? ? ?firstRow.push(data['數(shù)據(jù)集'][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['數(shù)據(jù)集'][item]].push(dataObj)
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?})
? ? ? ? ?})
? ? ? ? ?console.log(firstRow);
? ? ? ? ?console.log(headerList);
? ? ? ? ?console.log(obj);
? ? ?} else if (type == 'column') {
? ? ? ? ?// 幾列選中
? ? ? ? ?let headerList = []
? ? ? ? ?let firstRow = []
? ? ? ? ?let obj = {}
? ? ? ? ?data['數(shù)據(jù)集'].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) {
? ? // 刪除數(shù)組中第一個(gè)匹配的元素，成功則返回位置索引，失敗則返回 -1。
? ? Array.prototype.deleteElementByValue = function (varElement) {
? ? ? ? var numDeleteIndex = -1;
? ? ? ? for (var i = 0; i < this.length; i++) {
? ? ? ? ? ? // 嚴(yán)格比較，即類型與數(shù)值必須同時(shí)相等。
? ? ? ? ? ? if (this[i] === varElement) {
? ? ? ? ? ? ? ? this.splice(i, 1);
? ? ? ? ? ? ? ? numDeleteIndex = i;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return numDeleteIndex;
? ? }
? ? // 表頭
? ? const [header, setHeader] = useState([
? ? ? ? {
? ? ? ? ? ? name: "數(shù)據(jù)集",
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '19春支付金額',
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '20春支付金額',
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '21春支付金額',
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '19春支付人數(shù)',
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '20春支付人數(shù)',
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? name: '21春支付人數(shù)',
? ? ? ? }
? ? ])
? ? // 數(shù)據(jù)
? ? const [data, setData] = useState({
? ? ? ? '數(shù)據(jù)集': ['連衣裙', '褲子', '襯衫', '短袖', '長袖', '短褲', '羽絨服', '棉毛褲'],
? ? ? ? '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春支付人數(shù)': [1000, 500, 1000, 500, 1000, 500, 1000, 500],
? ? ? ? '20春支付人數(shù)': [1200, 520, 1200, 520, 1200, 520, 1200, 520],
? ? ? ? '21春支付人數(shù)': [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)
? ? // 行下標(biāo)
? ? const [rowIndexList, setRowIndexList] = useState([])
? ? // 列下標(biāo)
? ? const [columnIndexList, setColumnIndexList] = useState([])
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <div style={{ marginLeft: 200 }}>
? ? ? ? ? ? ? ? <div style={{ display: 'flex' }}>
? ? ? ? ? ? ? ? ? ? <Button type="primary" onClick={() => {
? ? ? ? ? ? ? ? ? ? ? ? if (type == 'slide') {
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 區(qū)域選擇
? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = {}
? ? ? ? ? ? ? ? ? ? ? ? ? ? let headerList = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? let firstRow = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? for (let i = minDataIndexs; i <= maxDataIndexs; i++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[data['數(shù)據(jù)集'][i]] = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(firstRow.indexOf(data['數(shù)據(jù)集'][i]) == -1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? firstRow.push(data['數(shù)據(jù)集'][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['數(shù)據(jù)集'][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['數(shù)據(jù)集'][item]] = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? firstRow.push(data['數(shù)據(jù)集'][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['數(shù)據(jù)集'][item]].push(dataObj)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(firstRow);
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(headerList);
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(obj);
? ? ? ? ? ? ? ? ? ? ? ? } else if (type == 'column') {
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 幾列選中
? ? ? ? ? ? ? ? ? ? ? ? ? ? let headerList = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? let firstRow = []
? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = {}
? ? ? ? ? ? ? ? ? ? ? ? ? ? data['數(shù)據(jù)集'].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={() => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 區(qū)間選取
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了React錯(cuò)誤用法習(xí)慣分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解
這篇文章主要為大家介紹了React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
在react-router4中進(jìn)行代碼拆分的方法（基于webpack）
這篇文章主要介紹了在react-router4中進(jìn)行代碼拆分的方法（基于webpack），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
React-Router如何進(jìn)行頁面權(quán)限管理的方法
本篇文章主要介紹了React-Router如何進(jìn)行頁面權(quán)限管理的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
本篇文章主要介紹了詳解使用React進(jìn)行組件庫開發(fā)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了React 錯(cuò)誤邊界組件的處理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要給大家介紹了關(guān)于react中hook及使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
本篇文章主要介紹了詳解webpack2+React 實(shí)例demo，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Ant?Design?組件庫按鈕實(shí)現(xiàn)示例詳解
這篇文章主要介紹了Ant?Design?組件庫按鈕實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪</P><P><BR>2022-08-08
React中的Context應(yīng)用場(chǎng)景分析
這篇文章主要介紹了React中的Context應(yīng)用場(chǎng)景分析,Context 提供了一種在組件之間共享數(shù)據(jù)的方式，而不必顯式地通過組件樹的逐層傳遞 props，通過實(shí)例代碼給大家介紹使用步驟，感興趣的朋友跟隨小編一起看看吧2021-06-06