Jexcel学习 合并单元格操作及合并后单元格的数据处理
主要用到两个事件
选取单元格的事件onselection
合并单元格的时间setMerge

import React, { useEffect, useState } from "react";
import "../../node_modules/jexcel/dist/jexcel.css";
import jexcel from 'jexcel'
import { Space } from "antd";
let el: jexcel.JExcelElement;//函数体外部定义
const FirstJexcel = () => {
    let jexcelDom: HTMLDivElement;
    const [startCell, setStartCell] = useState()
    const [cNum, setCnum] = useState(0)
    const [rNum, setRnum] = useState(0)
    const [x1, setx1] = useState<any>()
    const [y1, sety1] = useState<any>()
    const selectionActive = (instance: any, x1: any, y1: any, x2: any, y2: any, origin: any) => {
        let cellName1 = jexcel.getColumnNameFromId([x1, y1]);//起始单元格名称
        let cellName2 = jexcel.getColumnNameFromId([x1, x2]);
        setCnum(Math.abs(x1 - x2) + 1) //列数
        setRnum(Math.abs(y1 - y2) + 1) //行数
        setStartCell(cellName1) //起始单元格名称
        setx1(x1)
        sety1(y1)
    }
    useEffect(() => {
        el = jexcel(jexcelDom, options);
        //第一个参数是被挂载的dom节点
    }, [])

    let options: any = {
        data: [
            ['Mazda', 2001, 2000],
            ['Pegeout', 2010, 5000],
            ['Honda Fit', 2009, 3000],
            ['Honda CRV', 2010, 6000],
        ],
        minDimensions: [10, 5],
        onselection: selectionActive,//选取单元格的事件
    };
    return (
        <div>
            <div ref={(dom: HTMLDivElement) => jexcelDom = dom} />
            <br />
            <Space>
                <input type="button" value="合并" onClick={() => mer(el, startCell, cNum, rNum, x1, y1)} />
            </Space>
        </div>
    );
};

const mer = (el: jexcel.JExcelElement, startCell: any, cNum: number, rNum: number, x1: number, y1: number) => {
    //setMerge接收三个参数：
    //需要合并区域左上角的单元格名称，合并的列数，合并的行数
    let arr = el.getData(false)//arr是二维数组，接收所有单元格数据
    let newarr = [];//遍历时用来保存不为空的单元格数据
    //x1 列编号  y1 行编号
    for (let m = y1; m <= (rNum + y1 - 1); m++) {//控制行数
        for (let n = x1; n <= (cNum + x1 - 1); n++) {//一行中有多少个元素（即多少列）
            if (arr[m][n]) {
                newarr.push(arr[m][n]) //不为空就加到newarr数组里
            }
        }
    }
    newarr[0] = newarr[0] === undefined ? '' : newarr[0] 
    //如果newarr[0]为undefined，说明全部为空，就设值为空，否则就为newarr[0]里面的值
    el.setMerge(startCell, cNum, rNum)//合并
    el.setValue(startCell, newarr[0], true)//合并后单元格的值
    el.undo()//手动撤销一次
}
export default FirstJexcel;

注意合并的单元格如果有数据，默认只会保存左上单元格的数据，如果左上单元格没有数据，就会按行在选取的几个单元格中向后寻找数据，找到的第一个就是合并后单元格的值，没找到说明选取的合并区域是空的，直接显示为空就行
例如我选取的区域如上图，左上没有数据，向后查找，找到11就显示11，如果第一行没有，就下一行寻找，只会遍历选取区域的单元格里面的数据。全部没有数据就显示空的单元格

运行结果
合并后

Jexcel官网地址