文/景朝霞源公众号/朝霞光影笔记ID/朝霞景景图/自己画的????喜欢，让我知道你来过~????【往期总结】标题|let和var(1,2)的区别图|let和var(1,2)的区别VAR与无VAR区别图|VAR与无VAR区别总结|LET和VAR(3,4)图的区别|范围和范围链练习|范围和范围链图|理解闭包案例|闭合功能：保护和保存图|变量提升、私有变量、全局变量、判断条件中的参数理解|堆内存栈内存释放、null和{}、undefined的区别【iview】低版本iview实现表格拖拽、滚动条列宽计算案例|iview中的表格：拖拽自适应列、自定义固定列、合并列阅读源码|跟着大佬学习编程思想|iview的Table组件合并列demo|iview的Table组件合并列，升级代码0/要求iview的Table组件显示合并的列https://www.iviewui.com/compo...△16.1iview的Table组件合并行/列的要求。更希望以这种方式展现。△16.2要求1/修改源码修改了iview最新Table组件的table-body.vue。同样在原有基础上进行了同步修改。[PS：这里没有鼠标事件，纯显示]//y-table/table-body.vue:350render(h){//...CODElet$tableTrColspanArr=[];this.data.forEach((row,index)=>{//...CODE/***2020-03-3109:25:44byjing_zhaoxia@sina.com*合并列单元格*/if((index+1)===this.data.length){let$tdColspanTitle=null;this.colSpanColumns.forEach((colSpanColumn,colSpanColumnIndex)=>{//tr里面放td：表头和值let$tdsColspan=[],$tbodyColspan=colSpanColumn.tableBody,bodyLength=$tbodyColspan.length;让$tableCellColspanTitle=h(TableCell,{props:{fixed:this.fixed,'prefix-cls':this.prefixCls,row:colSpanColumn,column:colSpanColumn,'natural-index':Number(colSpanColumnIndex+this.data.length),index:Number(colSpanColumnIndex+this.data.length)},key:colSpanColumn.key,});$tdColspanTitle=h('td',{属性:{colspan:colSpanColumn.colspan,},类:this.alignCls(colSpanColumn,$tbodyColspan)},[$tableCellColspanTitle]);if(bodyLength>0){//第一个是表头，后面的是值得的let$tableCellColspan=null;$tbodyColspan.forEach((colSpanBody,colSpanBodyIndex)=>{$tableCellColspan=h(TableCell,{props:{fixed:this.fixed,'prefix-cls':this.prefixCls,row:colSpanBody,column:colSpanBody,'natural-index':Number(colSpanBodyIndex+this.data.length),索引:Number(colSpanBodyIndex+this.data.length),},key:colSpanBody.key,});$tdsColspan.push(h('td',{属性：{colspan:colSpanBody.colspan,},类:this.alignCls(colSpanBody,colSpanBody)},[$tableCellColspan]));});}让$tableTrColspan=h(TableTr,{props:{draggable:this.draggable,row:colSpanColumn,'prefix-cls':this.prefixCls},key:colSpanColumn.key},[$tdColspanTitle,...$tdsColspan]);$tableTrColspanArr.push($tableTrColspan);});}});const$tbody=h('tbody',{class:this.prefixCls+'-tbody'},[$tableTrs,...$tableTrColspanArr]);returnh('table',{attrs:{cellspacing:'0',cellpadding:'0',border:'0'},style:this.styleObject},[$colgroup,$tbody]);}△table-body.vue显示合并的数据2/分析数据"colspan":[{"tableBody":[{"className":"colSpanClass","colspan":1,"supplier_2020001":"79730826111.00","supplierId":"2020001","align":"center",“key”：“supplier_2020001”}，{“className”：“colSpanClass”，“colspan”：1，“supplier_2020002”：“1123.00”，“supplierId”：“2020002”，“align”：“center”，“key”":"supplier_2020002"}],"total":"合计（元）","className":"colSpanClass","key":"total","align":"center","colspan":2}]△合并行的数据需要显示在一行中：1、合并列的列标题：列标题+列标题的标题2。合并列的数据：与表1的列标题一一对应。合并列的列标题{"key":"total",//KEY"align":"center",//ALIGN"colspan":2//COLSPAN需要合并的列数}△合并后的列column的列头（1）列头显示在表格数据中，不需要标题（2）数据中的值需要显示（3）保留列的属性可以使用data{"total":"total(yuan)"}△合并列的列头的数据写在上面together{"key":"total",//KEY"align":"center",//ALIGN"colspan":2,//COLSPAN中需要合并的列数"total":"total(yuan)"}△合并列的列△16.3说明合并列列显示2.合并列的数据"tableBody":[{"className":"colSpanClass","colspan":1,"supplier_2020001":"79730826111.00","supplierId":"2020001","align":"center","key":"supplier_2020001"},{"className":"colSpanClass","colspan":1,"supplier_2020002":"1123.00","supplierId":"2020002","align":"center","key":"supplier_2020002"}]△数据数据列{"align":"center","key":"supplier_2020001"}△数据列{"className":"colSpanClass","colspan":1、"supplier_2020002":"1123.00","supplierId":"2020002"}△合并列中的数据写在一起{"className":"colSpanClass","colspan":1,"supplier_2020001":"79730826111.00","supplierId":"2020001","align":"center","key":"supplier_2020001"}△完整数据3/代码地址分享地址https://github.com/jingzhaoxi..。
