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 #