产品规格生成图表

tableData格式：
关键： generateTable()函数，通过goodsSpecList生成下图的格式

<product-spec 
                  v-for="(s, i) in form.goodsSpecList" 
                  :key="s.specName" 
                  :spec="s" 
                  :index="i"
                  @specValue="handleSpecValue"
                  @closeSpec="handleCloseSpec"
                  ></product-spec>
                <Button class="bt-spec" @click="handleAddSpec">添加规格项目</Button>

 handleSpecValue() {
        this.tableData = this.generateTable();
      },
<el-table
                :data="tableData"
                border
                style="width: 100%">
                  <el-table-column
                    :prop="c.specName"
                    :label="c.specName"
                    width="180"
                    v-for="c in form.goodsSpecList">
                  </el-table-column>
                  <el-table-column
                    prop="prcie"
                    label="价格">
                    <template slot-scope="{row}">
                      <el-input 
                        v-model="row.price"
                        @input="handlePriceInput"
                        oninput="value=value.replace(/^0|[^0-9.]/g, '')"
                        style="width: 223px;"></el-input>
                    </template>
                  </el-table-column>
                </el-table>

data() {
      return {
form: {goodsSpecList: [
            {
              specName: '',
              specValueList: [
                {
                  specValue: '',
                  imgUrl: ''
                }
              ]
            }
          ],}
}

generateTable()  {
        let specs = this.form.goodsSpecList
        let tt = [{}]
        specs.forEach(s => {
          tt = tt.flatMap(t => {
            return s.specValueList.map(v  => {
              console.log({...t});
              return {
                ...t,
                [s.specName]: v.specValue
              }
            })
          })
        })
        return tt;
      },