Jexcel学习笔记（react hooks+ts）

Jexcel学习笔记

//设置下标为3(下标从0开始)的标题和高度
rows:{ 3: { title:'Model', height:'100px' }}
//rowResize为true 可以调整每行每列的高度和宽度
rowResize: true

data:[
            ['Honda', 1],//1代表Red
            ['Peugeot', 3],
            ['Smart', 3],
        ],
        columns: [
            {
                type:'dropdown',//下拉菜单
                title:'Region',
                source:['South East','South West','North','London'],//下拉菜单的值
                width:'200',
            },
            {
                type:'dropdown',
                title:'Available in',
                source:[{id:1, name:'Red'},{id:2, name:'Yellow'},{id:3,name:'Blue'}],//data中可以直接使用id初始化
                width:'200',
            },
        ]

minDimensions:[10,5] //表格最小尺寸 5行10列

tableOverflow:true//溢出的时候右边有那个滚动条

列的一些类型

data:[
            ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
            ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
        ],
        columns: [
            //普通文本 readOnly:true只读
            { type: 'text', title:'Car', width:120,readOnly:true },
            //下拉框 source为下拉框中的内容
            { type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw" ] },
            //日历
            { type: 'calendar', title:'Available', width:200 },
            //图片 点击单元格可上传图片
            { type: 'image', title:'Photo', width:120 },
            //单选框
            { type: 'checkbox', title:'Stock', width:80 },
            //数字  mask为数字格式
            { type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
            //颜色 square矩形渲染
            { type: 'color', width:100, render:'square', }
         ]

头部导航

头部导航部分官网操作链接