在管理后台，我们会用到大量的表格和表单组件来导入导出各种报表。有些场景还需要对报表数据进行可视化分析，动态生成可视化图表。基于以上场景，笔者将总结一些实用的Table组件开发技巧。让前端开发不再难。以前的经典可以轻松教你拖放组件、缩放、多控制点缩放和拖放数据上报。基于自然流布局的可视化拖拽平台设计基于React+Koa实现一个h5页面可视化编辑器-H5-Dooring效果演示技术要点实现表格动态渲染表格排序、多列排序、自定义搜索批量导入Excel数据渲染Table将Table数据导出为Excel文件基于Table数据自动生成多维可视化报表实现简单的Table编辑以上是几个常用的业务场景，接下来笔者就带大家一一实现。技术实现1.实现表格动态渲染一般我们在渲染表格的时候，大多是提前写好表格结构，而不是先定义列。然后向后台请求数据填表，如下：constcolumns=[{title:'name',dataIndex:'name',key:'name',},{title:'age',dataIndex:'age',key:'年龄',},{title:'地址',dataIndex:'地址',key:'地址',},];constdataSource=[{key:'1',name:'许小希',age:18,address:'HangzhouXihuDistrict',}];这个业务场景虽然可以满足大部分后台管理系统的Table需求，但是也可以使用antd或者element，但是对于lowcode系统来说，很多模块是不确定的，我们需要根据协议和数据来驱动Table的渲染。比如我们在H5-Dooring中配置了一个表单，我们想对表单的数据进行统计分析，因为表单项是Uncertain的，所以我们不能提前定义一个tableschema。那么如何动态渲染这个Table呢？这里给大家提个idea，基于数据驱动+协同层约束。类似于国外的SAP低代码平台，完全基于odata协议。我们可以约束表单提交的数据格式，然后结合用户提交的数据动态提取Table需要的列，最后渲染Table组件。Protocol层主要约束不同字段的显示类型，如字符串、按钮、链接、标签等，用户提交表单后，会携带协议层对应的flag和用户输入的值，即有利于我们的解析器呈现表格。列显示不同的类型。如下：笔者这里简单实现了一个demo，如下：//表格数据源lettableData=res.map((item:any,i:number)=>({ID:nanoid(8),...item}));letbaseRow=tableData[0],keys=Object.keys(baseRow);setColumns(()=>{constbaseColumn=keys.map(item=>{return{title:item,dataIndex:item,key:item,width:item==='ID'?0:null,render:(v:any)=>{if(typeofv==='object'){return<>{v.map(item=>{item.label||item})}}returnitem==='ID'?'':v}}})baseColumn.push({title:'操作',key:'operation',fixed:'right',width:100,render:(row)=>handleDel(row)}>delete,})returnbaseColumn})以上我们有实施了动态表格呈现解决方案。案例中使用了React，也可以使用大家熟悉的vue3.0.2。表格排序、多列排序、自定义搜索表格排序、多列排序实现起来也非常简单。我们只需要自定义Table表头，将排序字段提升为Table的公共状态可以通过排序标识符和排序方法进行排序。目前antd4.0已经支持多列排序，可以直接参考学习，如下：对于自定义搜索，在文章开头的demo中展示了列搜索，我们可以使用如下方案来实现：constgetColumnSearchProps=dataIndex=>({filterDropdown:({setSelectedKeys,selectedKeys,confirm,clearFilters})=>({searchInput=node;}}placeholder={`Search${dataIndex}`}value={selectedKeys[0]}onChange={e=>setSelectedKeys(e.target.value?[e.target.value]:[])}onPressEnter={()=>handleSearch(selectedKeys,confirm,dataIndex)}style={{width:188,marginBottom:8,display:'block'}}/>handleSearch(selectedKeys,confirm,dataIndex)}icon={}size="small"style={{width:90}}>搜索handleReset(clearFilters)}size="small"style={{width:90}}>reset
,onFilter:(value,record)=>record[dataIndex]?record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()):'',onFilterDropdownVisibleChange:visible=>{if(visible){setTimeout(()=>searchInput.select(),100);}},render:text=>searchedColumn===dataIndex?(
):(text),});此时我们只需要动态生成列，给其中一列添加一个自定义的header即可：{title:item,dataIndex:item,key:item,...getColumnSearchProps(item)}在antd4.0中也有详细的使用方法，这里就不一一介绍了，效果如下：具体效果也可以在H5-Dooring的管理后台查看。3、批量导入Excel数据渲染表格在很多数据分析的背景下，我们需要处理大量的电子表格，传统的excel手工录入的方式将逐渐被淘汰。比如不同的渠道采集了很多业务数据整理成excel，那么如何快速保存到自己的后台系统中呢？大体思路是：通过表格将后台分析文件一个一个录入，加工成标准化的可录入库数据结构前端，实现一个导入excel，自动同步数据。第一种方案效率太低，适合C端用户手动输入。我们暂时忽略它。笔者将实现第三种方案。实现思路如下：这里我们使用XLSX库，结合FileReaderAPI。我们通过FileReader获取excel文件的二进制数据，然后传给XLSX解析成js对象，最终通过作者编写的表格渲染器生成符合规范的表格数据结构。源码如下：//解析提取excel数据letreader=newFileReader();reader.onload=function(e){letdata=e.target.result;letworkbook=XLSX.read(data,{type:'binary'});letsheetNames=workbook.SheetNames;//工作表名称集合letdraftArr={}sheetNames.forEach(name=>{letworksheet=workbook.Sheets[name];//指定工作表只能通过工作表名获取for(letkeyinworksheet){//v为读取单元格的原始值if(key[0]!=='!'){if(draftArr[key[0]]){draftArr[key[0]].push(worksheet[key].v)}else{draftArr[key[0]]=[worksheet[key].v]}}}});//获取合法数据产品constsourceData=Object.values(draftArr);}reader.readAsBinaryString(file);拿到合法的表数据源后，我们就可以执行第一节提到的动态渲染Table的逻辑了。通过以上方式，我们就可以导入任意结构的excel表格了。导入后我们可以自动发送请求到我们的业务后台存储。4.将Table数据导出到Excel类似。上面我们介绍了将excel导入表格，同样我们也可以将表格导出到excel进行数据分发和本地化，比如我们最近流行的在线文档等应用。作者这里简单说下实现思路：也就是我们在第3节提到的反分析。作者生成excel文件使用的是js-export-excel库，基于它，作者实现了一个out-of-开箱即用的方法来避免大家的头脑风暴。如下：importExportJsonExcelfrom'js-export-excel';constgenerateExcel=()=>{letoption:any={};//option表示excel文件letdataTable=[];//excel文件中的数据内容letlen=list.length;if(len){for(leti=0;i
