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 += ''
for (let i = 0; i < arr.length; i++) {
let item = arr[i];
this.html += ''
this.html += `${item.name} `
this.html += `${item.sore} `
this.html += '';
if (item.children && item.children.length) {
this.createTab(item.children);
} else {
this.html += ` ${item.timeout} `
this.html += `${item.pinlv} `
this.html += `${item.req} `
this.html += `${item.date} `
this.html += `${item.source} `
this.html += `${item.complete} `
this.html += `${item.audit} `
this.html += `${item.audit} `
}
this.html += '';
this.html += ' ';
}
this.html += '
'
}
}
js代码
后端数据
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'
}
}
]
}
]
}
]
}
]