vue项目动态创建表格（模板字符串+递归+scss）

<>根据后端数据（数据格式为多层嵌套数组）动态创建一行对多行的表格

<>效果图

<>html代码 如果表头也是后端数据动态加载，可用for循环

<>js代码
mounted: function () { this.oppd() }, methods: { oppd() { let html =
this.createTab(this.table1) let tbody = document.getElementById('mytable')
tbody.innerHTML = this.html }, createTab(arr) { //使用模板字符串+递归 this.html +=
'<table style="width: 100%;">' for (let i = 0; i < arr.length; i++) { let item
= arr[i]; this.html += '<tr>' this.html += `<td class="w200">${item.name}</td>`
this.html += `<td class="w200">${item.sore}</td>` this.html += '<td
class="w200" colspan="12">'; if (item.children && item.children.length) {
this.createTab(item.children); } else { this.html += `<td
class="w200">${item.timeout}</td>` this.html += `<td
class="w200">${item.pinlv}</td>` this.html += `<td
class="w200">${item.req}</td>` this.html += `<td
class="w200">${item.date}</td>` this.html += `<td
class="w200">${item.source}</td>` this.html += `<td
class="w200">${item.complete}</td>` this.html += `<td
class="w200">${item.audit}</td>` this.html += `<td
class="w200">${item.audit}</td>` } this.html += '</td>'; this.html += '</tr>';
} this.html += '</table>' } }
<>js代码
<style lang="scss"> #table1 { min-width: 1400px; width: 1400px;
border-collapse: collapse; text-align: center; table { width: 100%;
border-collapse: collapse; text-align: center; border-width: 0px; border-style:
hidden; } th { border: 1px solid #999; padding: 0; margin: 0; } td { border:
1px solid #999; padding: 0; margin: 0; } .w200 { width: 100px; } } </style>
<>后端数据
var table1 = [ { id: 1, name: '加强组织领导夯实基础工作', sore: '18分', children: [ { id:
11, name: '创建氛围', sore: '9分', children: [ { id: '111', name:
'党组（党委）重视文明创建工作，定期研究有关工作，解决实际问题。2分', sore: '2.0', timeout: '超时上报加分', pinlv:
'共2次\n1次/每半年', req: '会议记录（纪要）等照片', date: '2019-01-01 -- 2019-12-31', source:
'省直文明办', complete: '100%', audit: '审核评分', option: [ { id: '1111', name: '上报任务',
data: { id: '9900', orgid: '88', uni: '1' } }, { id: '1112', name: '关联任务',
data: { id: '9901', orgid: '881', uni: '2' } } ] } ] }, { id: 11, name: '创建氛围',
sore: '9分', children: [ { id: '111', name: '党组（党委）重视文明创建工作，定期研究有关工作，解决实际问题。2分',
sore: '2.0', timeout: '超时上报加分', pinlv: '共2次\n1次/每半年', req: '会议记录（纪要）等照片', date:
'2019-01-01 -- 2019-12-31', source: '省直文明办', complete: '100%', audit: '审核评分',
option: [ { id: '1111', name: '上报任务', data: { id: '9900', orgid: '88', uni: '1'
} }, { id: '1112', name: '关联任务', data: { id: '9901', orgid: '881', uni: '2' } }
] }, { id: '112', name: '单位召开文明创建动员会或在全体职工中部署文明创建工作。 3分', sore: '3.0', timeout:
'超时上报加分', pinlv: '共2次\n2次/每半年', req: '会议现场照片、相关材料', date: '2020-01-01 --
2020-12-31', source: '省直文明办', complete: '99%', audit: '审核评分', option: [ { id:
'1121', name: '上报任务', data: { id: '9920', orgid: '81', uni: '3' } } ] } ] }, {
id: 11, name: '创建氛围', sore: '9分', children: [ { id: '111', name:
'党组（党委）重视文明创建工作，定期研究有关工作，解决实际问题。2分', sore: '2.0', timeout: '超时上报加分', pinlv:
'共2次\n1次/每半年', req: '会议记录（纪要）等照片', date: '2019-01-01 -- 2019-12-31', source:
'省直文明办', complete: '100%', audit: '审核评分', option: [ { id: '1111', name: '上报任务',
data: { id: '9900', orgid: '88', uni: '1' } }, { id: '1112', name: '关联任务',
data: { id: '9901', orgid: '881', uni: '2' } } ] }, { id: '112', name:
'单位召开文明创建动员会或在全体职工中部署文明创建工作。 3分', sore: '3.0', timeout: '超时上报加分', pinlv:
'共2次\n2次/每半年', req: '会议现场照片、相关材料', date: '2020-01-01 -- 2020-12-31', source:
'省直文明办', complete: '99%', audit: '审核评分', option: [ { id: '1121', name: '上报任务',
data: { id: '9920', orgid: '81', uni: '3' } } ] } ] } ] }, { id: 2, name:
'加强组织领导夯实基础工作', sore: '9分', children: [ { id: 11, name: '创建氛围', sore: '9分',
children: [ { id: '111', name: '党组（党委）重视文明创建工作，定期研究有关工作，解决实际问题。2分', sore:
'2.0', timeout: '超时上报加分', pinlv: '共2次\n1次/每半年', req: '会议记录（纪要）等照片', date:
'2019-01-01 -- 2019-12-31', source: '省直文明办', complete: '100%', audit: '审核评分',
option: [ { id: '1111', name: '上报任务', data: { id: '9900', orgid: '88', uni: '1'
} }, { id: '1112', name: '关联任务', data: { id: '9901', orgid: '881', uni: '2' } }
] }, { id: '112', name: '单位召开文明创建动员会或在全体职工中部署文明创建工作。 3分', sore: '3.0', timeout:
'超时上报加分', pinlv: '共2次\n2次/每半年', req: '会议现场照片、相关材料', date: '2020-01-01 --
2020-12-31', source: '省直文明办', complete: '99%', audit: '审核评分', option: [ { id:
'1121', name: '上报任务', data: { id: '9920', orgid: '81', uni: '3' } } ] } ] }, {
id: 11, name: '创建氛围', sore: '9分', children: [ { id: '111', name:
'党组（党委）重视文明创建工作，定期研究有关工作，解决实际问题。2分', sore: '2.0', timeout: '超时上报加分', pinlv:
'共2次\n1次/每半年', req: '会议记录（纪要）等照片', date: '2019-01-01 -- 2019-12-31', source:
'省直文明办', complete: '100%', audit: '审核评分', option: [ { id: '1111', name: '上报任务',
data: { id: '9900', orgid: '88', uni: '1' } }, { id: '1112', name: '关联任务',
data: { id: '9901', orgid: '881', uni: '2' } } ] }, { id: '112', name:
'单位召开文明创建动员会或在全体职工中部署文明创建工作。 3分', sore: '3.0', timeout: '超时上报加分', pinlv:
'共2次\n2次/每半年', req: '会议现场照片、相关材料', date: '2020-01-01 -- 2020-12-31', source:
'省直文明办', complete: '99%', audit: '审核评分', option: [ { id: '1121', name: '上报任务',
data: { id: '9920', orgid: '81', uni: '3' } } ] } ] }, { id: 11, name: '创建氛围',
sore: '9分', children: [ { id: '111', name: '党组（党委）重视文明创建工作，定期研究有关工作，解决实际问题。2分',
sore: '2.0', timeout: '超时上报加分', pinlv: '共2次\n1次/每半年', req: '会议记录（纪要）等照片', date:
'2019-01-01 -- 2019-12-31', source: '省直文明办', complete: '100%', audit: '审核评分',
option: [ { id: '1111', name: '上报任务', data: { id: '9900', orgid: '88', uni: '1'
} }, { id: '1112', name: '关联任务', data: { id: '9901', orgid: '881', uni: '2' } }
] }, { id: '112', name: '单位召开文明创建动员会或在全体职工中部署文明创建工作。 3分', sore: '3.0', timeout:
'超时上报加分', pinlv: '共2次\n2次/每半年', req: '会议现场照片、相关材料', date: '2020-01-01 --
2020-12-31', source: '省直文明办', complete: '99%', audit: '审核评分', option: [ { id:
'1121', name: '上报任务', data: { id: '9920', orgid: '81', uni: '3' } } ] } ] } ] }
]

• « 上一篇：如何使用 altool 命令行工具上传 IPA 包：
• » 下一篇：面试官：html里面哪个元素可以让文字换行展示