报错。今天在vue中遇到复杂表格的渲染，需要合并表头th的单元格和合并后的单元格的列表头数据是动态数据，也就是不知道表头列会有多少是，并且这些标题列被分成几个子标题。这个需求用js中的Juicer模板可以轻松搞定。我有一些想法，但是即使对于vue，我也是初学者。很多概念不是很理解，限制了我的思路。我发现网上很多mergingcell都是简单的datamerging，也就是tdmerging，这不是我们需要的，就不贴了。嘿嘿，废话不多说，看代码：代码示例使用了iviewui的table组件：首先在项目中直接使用iviewui的table组件，为column设置children，实现表头合并。我们先用硬编码的数据做一个样例，如下：data()如下：',width:60,align:'center',fixed:'left',render:(h,params)=>{returnh('span',params.row._index+1)}},{标题:'name',key:'name',align:'center',fixed:'left',width:80},{title:'学号',key:'code',align:'center',width:80},{title:'性别',key:'sex',align:'center',width:80},{title:'term',key:'term',align:'center',width:80},{title:'9月28日',align:'center',children:[{title:'Reading',key:'date1_rScore',align:'cent呃',minWidth:80,sortable:true},{title:'Listening',key:'date1_lScore',align:'center',minWidth:80,sortable:true},{title:'Writing',key:'date1_wScore',align:'center',minWidth:80,sortable:true},{title:'SpokenLanguage',key:'date1_sScore',align:'center',minWidth:80,sortable:true},{标题:'总分',key:'date1_score',align:'center',minWidth:80,sortable:true}]},{title:'8月10日和14日',align:'center',children:[{title:'阅读'，键：'date2_rScore'，align:'center',minWidth:80,sortable:true},{title:'Listening',key:'date2_lScore',align:'center',minWidth:80,sortable:true},{title:'写作',key:'date2_wScore',align:'center',minWidth:80,sortable:true},{title:'SpokenLanguage',key:'date2_sScore',align:'center',minWidth:80,sortable:true},{title:'总分',key:'date2_score',align:'center',minWidth:80,sortable:true}]},{title:'听力提升',key:'lImprove',align:'center',width:70},{title:'阅读改进',key:'rImprove',align:'center',width:70},{title:'写作改进',key:'writingImprove',align:'center',width:70},{title:'口语改进',key:'sImprovem',align:'center',width:70},{title:'总分提升',key:'srImprove',align:'center',width:70}],studentData:[{name:'xxx',code:'918989070065',sex:'Male',term:'Autumn2018',date1:'September28',date1_rScore:'3.5',date1_lScore:'3.5',date1_wScore:'5',date1_sScore:'4',date1_score:'4',date2:'August10&14',date2_rScore:'3.5',date2_lScore:'3.5',date2_wScore:'5',date2_sScore:'4',date2_score:'4',lImprove:'-0.5',rImprove：'0'，wImprove：'1.5'，sImprove:'0.5',srImprove:'0.5'}]，实现效果如图：关键是后台给的数据格式。下面是后台接口返回的data数据。数据格式如下：[{"studentId":"ff808b937f50a33","studentName":"Fuxx","studentCode":"91scdsc109","sex":{"value":"MALE","name":"Male"},"termName":"2018年秋季","examDates":["October","September28"],"map":{"September28":[{"courseName":"Listening","score":6.0},{"courseName":"Reading","score":7.0},{"courseName":"Writing","score":5.5}]},"courseNames":["Listening","Reading","Writing","Oral","Totalscore"]},{"studentId":"ff80c52801bc","studentName":"Chenxx","studentCode":"91edfedf3","sex":{"value":"FEMALE","name":"Female"},"termName":"Autumn2018","examDates":["October","September28"],"map":{"September28"：[{“课程名”："听力","score":5.5},{"courseName":"Reading","score":6.0},{"courseName":"Writing","score":5.5},{"courseName":"Speaking","score":5.5}]},"courseNames":["listening","reading","writing","speaking","totalscore"]}]重点是在地图中使用日期上面的数据是一组表头，每组日期包含五个课程，日期是从数据库中查出来的。不太清楚是多少个日期，也就是表中日期的th是根据数据周期生成的，请仔细看这里给出的数据格式使用H5的表格实现模板如下：序号姓名学号性别学期{{it}}
{{itc}}
{{index+1}} | {{item.studentName}} | {{item.studentCode}} | {{item.sex.name}} | {{item.termName}} | {{initScoreFinal(examDate,course,item.map)}}得到上面的后端返回数据后，对数据稍作处理：data(){return{studentDataList:[],examDates:[],courseNames:[]},created(){this.getData()},methods:{//获取数据(){this.$get(//这个方法是封装了axios'/list.json',{....//这里是参数，略},response=>{this.examDates=response.data[0].examDatesthis.courseNames=response.data[0].courseNamesthis.studentDataList=response.data})},initScoreFinal(examDate,course,map){letfinal=0console.log('map:'+map)for(varitinmap){map[it].forEach((item,index,array)=>{if(it===examDate&&item.courseName===course){final=item.score}})}返回final}}效果如图：在网上搜了很多合并单元格，都是简单的数据合并，也就是td合并。我们项目需要的表比较不正常。结合上面的效果图说一下，图中的表头是第th列，以日期优先，这个日期列又分为五个课程的第th个子列，日期个数是可变的。它可能是一个或两个日期，也可能是多个日期。这个日期下对应的课程也是不确定的，就像学生在上课一样，每天的课程都不一样，但是总共只有五门课程，日期列的数量不确定，课程数量的数据不确定，所以这个很头疼-_-||总之，长知识了。记录一下，可能有高手可以使用iviewui的table组件合并动态列的表头。欢迎一起讨论方法！！！
