最近在开发的Vue项目中，使用了iview第三方UI库；table组件的需求是最多的，但是在一些特定的场景下，发现iviewtable组件并没有单元格合并拆分的API。搜索了一下发现很多同学问的是iview表格组件中如何拆分合并单元格的问题。所以某公司就来聊聊我们是怎么填补这个项目的这个坑的。因为我们项目中首先要做的就是细胞分裂，所以以分裂为例。基本思想是：不要在源代码级别进行修改；对外对Table组件进行二次包装。使用vuerender函数动态转换table组件的table列配置数据。普通单元格渲染span标签呈现数据，待拆分单元格渲染原生表格标签。最后，隐藏嵌套表格的边框并调整相关的原生表格样式。这里注意一下，之前打算使用iviewTable组件进行嵌套，但是发现修改table组件的样式很麻烦，而且没有效果。一不小心，很容易污染全局样式。所以使用原来的table标签，完美解决了样式不可控的问题。1、首先对已经拆分的全表的列配置数据添加split属性为true。2.为表数据源定义分表数据，即以数组的形式包含分表数据3.使用vue渲染函数动态渲染转换表列结构，渲染数据通过cell渲染span标签，以及要拆分的单元格Rendernativetable标签。让vm=这个；this.columnsList.forEach(item=>{//可编辑单元格if(item.editable){item.render=(h,param)=>{letcurrentRow=this.thisTableData[param.index];if(currentRow.editting){//正在编辑if(item.split){varchildArray=currentRow[item.key];varinputArray=[];childArray.forEach(item=>{varaa=h('Input',{style:{width:'80%','margin-top':'10px','margin-bottom':'10px'},props:{type:'text',value:item.child},on:{'on-change'(event){letkey=param.column.key;varddd=vm.editingStore[param.index][key];//item.child=event.target.value;//计算当前索引varcurrentIndex=childArray.indexOf(item);//更新数据vm.editingStore[param.index][key][currentIndex].child=event.target.value;}}});inputArray.push(aa)varcurrentIndex=childArray.索引（项目）；如果（currentIndex!==childArray.length-1){varbb=h('hr',{style:{height:'1px','background-color':'#e9eaec',border:'none'}})inputArray.push(bb)}})returnh('Row',inputArray)}else{returnh('Input',{style:{width:'80%'},props:{type:'text',value:当前行[item.key]},on:{'on-change'(event){letkey=param.column.key;vm.edittingStore[param.index][key]=event.target.value;}}});}}else{//没有在编辑if(this.editIncell){//单元格内编辑returnh('Row',{props:{type:'flex',align:'middle',justify:'center'}},[h('Col',{props:{span:'16'}},[currentRow.edittingCell[param.column.key]?cellInput(this,h,param,item):h('span',currentRow[item.key])]),h('Col',{props:{span:'8'}},[currentRow.editingCell[param.column.key]?saveIncellEditBtn(this,h,param):inCellEditBtn(this,h,param)])]);}else{//非单元格编辑if(item.split){if(currentRow.childProject.length==1){varvalue=currentRow.childProject[0].child;返回h('跨度',值);}//使用原生HTML标签渲染vartrAarry=[];varchildArray=currentRow[item.key];childArray.forEach(item=>{varaa=h('tr',{},[h('td',{样式:{border:0,'text-align':'center'}},item.child),])trAarry.push(aa)varcurrentIndex=childArray.indexOf(item);if(currentIndex!==childArray.length-1){varbb=h('hr',{style:{height:'1px','background-color':'#e9eaec',border:'none'}})trAarry.push(bb)}})返回h('table',{style:{'width':'100%',margin:0,border:0}},trAarry)}elsereturnh('span',currentRow[item.key]);}}};}//编辑和删除按钮if(item.handle){item.render=(h,param)=>{letcurrentRowData=this.thisTableData[param.index];让孩子们=[];item.handle.forEach(item=>{if(item==='edit'){children.push(editButton(this,h,currentRowData,param.index));}elseif(item==='delete'){children.push(deleteButton(this,h,currentRowData,param.index));}});返回h('div',孩子们);};}});}4.完美实现单元格分列效果
