React實(shí)現(xiàn)表格選取
更新時(shí)間：2022年08月23日 16:03:37 作者：追逐驀然
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)表格選取，類(lèi)似于Excel選中一片區(qū)域并獲得選中區(qū)域的所有數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了React實(shí)現(xiàn)表格選取的具體代碼，供大家參考，具體內(nèi)容如下
在工作中，遇到一個(gè)需求，在表格中實(shí)現(xiàn)類(lèi)似于Excel選中一片區(qū)域的，然后拿到選中區(qū)域的所有數(shù)據(jù)。
1.實(shí)現(xiàn)需求和效果截圖
1.獲取選中區(qū)域的數(shù)據(jù)
2.選擇的方向是任意的
3.支持幾行 / 幾列的選取
4.通過(guò)生產(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í)候，打開(kāi)鼠標(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)格比較，即類(lèi)型與數(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ù)集': ['連衣裙', '褲子', '襯衫', '短袖', '長(zhǎng)袖', '短褲', '羽絨服', '棉毛褲'],
? ? ? ? '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)
? ? // 類(lèi)型
? ? 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以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React Fiber構(gòu)建beginWork源碼解析
這篇文章主要為大家介紹了React Fiber構(gòu)建beginWork源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
淺談react.js中實(shí)現(xiàn)tab吸頂效果的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談react.js中實(shí)現(xiàn)tab吸頂效果的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了在react中使用vue的狀態(tài)管理的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家介紹了React?Fiber?鏈表操作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
ahooks整體架構(gòu)及React工具庫(kù)源碼解讀
這篇文章主要為大家介紹了ahooks整體架構(gòu)及React工具庫(kù)的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了react native之ScrollView下拉刷新效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
眾所周知，性能是Web應(yīng)用界面的關(guān)鍵方面，它直接影響到用戶的使用體驗(yàn)。本文將向您展示十種提高React UI性能的特定技術(shù)和一般方法。2021-05-05
React項(xiàng)目中hook實(shí)現(xiàn)展示對(duì)話框功能
Modal(模態(tài)框)是 web 開(kāi)發(fā)中十分常見(jiàn)的組件,即從頁(yè)面中彈出的對(duì)話框,下面這篇文章主要給大家介紹了關(guān)于React項(xiàng)目中hook實(shí)現(xiàn)展示對(duì)話框功能的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了十分鐘帶你快速了解React16新特性,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
如何使用 React Router v6 在 React 中
面包屑在網(wǎng)頁(yè)開(kāi)發(fā)中的角色不可忽視,它們?yōu)橛脩籼峁┝艘环N跟蹤其在網(wǎng)頁(yè)中當(dāng)前位置的方法,并有助于網(wǎng)頁(yè)導(dǎo)航,本文介紹了如何使用react-router v6和bootstrap在react中實(shí)現(xiàn)面包屑,感興趣的朋友一起看看吧2024-09-09