js合并单元格colspan,react好还是vuejs好

请根据需要填写菜单权限表。需要进行单元合并。制作本来使用的antd-vue表，构建customRender，总觉得有些本末倒置，但其实自己实现比较快。而且，你想改变哪里，想改变哪里？以下是写这个功能之前的测试演示。

效果图表

代码

templatedivclass=' class-table ' divclass=' table-wrapper ' divclass=' tabel-container ' tabletheadthv-for=' y=(index ) (周) digital2Chinese (index，) week ) )/th/tr/theadtbodytrv-for=)。索引) inclasstabledata ' : key=' index ' TDV-for=' (week，index ) inweeks ' : key=' index ' 3360 colspan='==0' { item [ week ].name|'-' } div style=' margin-top 33605 px ' { item [ week ].colspan }|{ item } div/div classtabledata : [ { classes time : ' 08336000-09:00 '，Monday:{name:'CSS '，rowspan: 1，colspan rowspan: 1，Colspan:}，WedNesday:{name:'vue '，Rowspan3360，colspan 3361 } Thursday : { name : ' friday: { name: 'REACT '，rowspan 3360，Colspan3361，colspan 3360 } Saturday : { name 3:’jquery’，rowspan 3360 Sunday : { name :’react’，Rowspan3360，Colspan3362，colspan 3360 } { classes time : ' 09:00-103:00 '，mm colspan: 1 }，Tuesday:} rowspan: 1，colspan: 1 }，wednesday: { name: 'REACT '，Rowspan:colspan Thursday 3360 { Nam man } Rowspan: 1，colspan: 1 }，friday: { name: 'REACT '，rowspan :Colspan:}， colspan: 1 }，sunday: { name: 'REACT '，Rowspan:Colspan:}，{Classestime:}，{Classestime3360}

ame: 'DATA', rowspan: 1, colspan: 1 }, tuesday: { name: 'CSS', rowspan: 1, colspan: 1 }, wednesday: { name: 'DATA', rowspan: 1, colspan: 1 }, thursday: { name: 'JQUERY', rowspan: 1, colspan: 1 }, friday: { name: 'DATA', rowspan: 1, colspan: 1 }, saturday: { name: 'JS', rowspan: 1, colspan: 1 }, sunday: { name: 'VUE', rowspan: 1, colspan: 1 }, }, { classesTime: '11:00-12:00', monday: { name: '', rowspan: 1, colspan: 1 }, tuesday: { name: 'VUE', rowspan: 1, colspan: 1 }, wednesday: { name: 'CSS', rowspan: 1, colspan: 1 }, thursday: { name: 'VUE', rowspan: 1, colspan: 1 }, friday: { name: 'JQUERY', rowspan: 1, colspan: 1 }, saturday: { name: 'JQUERY', rowspan: 1, colspan: 1 }, sunday: { name: 'DATA', rowspan: 1, colspan: 1 }, }, { classesTime: '13:00-14:00', monday: { name: 'DATA', rowspan: 1, colspan: 1 }, tuesday: { name: 'JQUERY', rowspan: 1, colspan: 1 }, wednesday: { name: 'JQUERY', rowspan: 1, colspan: 1 }, thursday: { name: 'JQUERY', rowspan: 1, colspan: 1 }, friday: { name: '', rowspan: 1, colspan: 1 }, saturday: { name: 'JS', rowspan: 1, colspan: 1 }, sunday: { name: 'REACT', rowspan: 1, colspan: 1 }, }, { classesTime: '14:00-15:00', monday: { name: 'REACT', rowspan: 1, colspan: 1 }, tuesday: { name: 'JS', rowspan: 1, colspan: 1 }, wednesday: { name: 'CSS', rowspan: 1, colspan: 1 }, thursday: { name: 'REACT', rowspan: 1, colspan: 1 }, friday: { name: '语文', rowspan: 1, colspan: 1 }, saturday: { name: 'CSS', rowspan: 1, colspan: 1 }, sunday: { name: 'JS', rowspan: 1, colspan: 1 }, }, { classesTime: '15:00-16:00', monday: { name: 'JQUERY', rowspan: 1, colspan: 1 }, tuesday: { name: 'JQUERY', rowspan: 1, colspan: 1 }, wednesday: { name: '语文', rowspan: 1, colspan: 1 }, thursday: { name: 'JQUERY', rowspan: 1, colspan: 1 }, friday: { name: 'DATA', rowspan: 1, colspan: 1 }, saturday: { name: 'JS', rowspan: 1, colspan: 1 }, sunday: { name: '', rowspan: 1, colspan: 1 }, }, ], tableShow: false, } }, created() { // /* mock随机数据*/ // Mock.mock({ // 'data|7': [ // { // 'classesTime|+1': ['08:00-09:00', '09:00-10:00', '10:00-11:00', '11:00-12:00', '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00'], // 'monday|1': ['DATA', 'CSS', 'REACT', 'VUE', 'JQUERY', 'JS', '', '语文'], // 'tuesday|1': ['DATA', 'CSS', 'REACT', 'VUE', 'JQUERY', 'JS', '', '语文'], // 'wednesday|1': ['DATA', 'CSS', 'REACT', 'VUE', 'JQUERY', 'JS', '', '语文'], // 'thursday|1': ['DATA', 'CSS', 'REACT', 'VUE', 'JQUERY', 'JS', '', '语文'], // 'friday|1': ['DATA', 'CSS', 'REACT', 'VUE', 'JQUERY', 'JS', '', '语文'], // 'saturday|1': ['DATA', 'CSS', 'REACT', 'VUE', 'JQUERY', 'JS', '', '语文'], // 'sunday|1': ['DATA', 'CSS', 'REACT', 'VUE', 'JQUERY', 'JS', '', '语文'] // } // ] // }); }, methods: { /** * 数字转中文 * @param {Number} num 需要转换的数字 * @param {String} identifier 标识符 * @returns {String} 转换后的中文 */ digital2Chinese(num, identifier) { const character = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'] return identifier === 'week' && (num === 0 || num === 7) ? '日' : character[num] }, },}</script><style lang="less" scoped>.class-table { .table-wrapper { width: 100%; height: 100%; overflow: auto; } .tabel-container { margin: 7px; table { table-layout: fixed; width: 100%; thead { background-color: #67a1ff; th { color: #fff; line-height: 17px; font-weight: normal; } } tbody { background-color: #eaf2ff; td { color: #677998; line-height: 12px; } } th, td { width: 60px; padding: 12px 2px; font-size: 12px; text-align: center; border: 1px solid grey; } tr td:first-child { color: #333; .period { font-size: 8px; } } } }}</style>