vue3은 다양한 사양과 무제한 수준의 테이블을 동적으로 생성합니다.

HTML 부분:

<template>
   <div>
      <el-button @click="getData" type="danger" circle size="small"> + </el-button>
      <el-form :model="data.form" label-width="120px">
         <el-form-item :label="item.title" style="display: flex;" v-for="(item,index) in data.specsList" :key="index">
            <el-input v-model="item.value" style="width:200px;margin-right:20px;"/>
            <el-button v-if="index > 0" @click="delFirst(index)" type="danger" circle size="small"> - </el-button>
            <el-button @click="addFirst" type="danger" circle size="small"> + </el-button>
               <div v-for="(item1,index1) in item.children" :key="index1" style="height:40px;width: 100%;padding-left:30px;box-sizing: border-box;">
                  <el-input v-model="item1.value" style="width:200px;margin-right:20px;"/>
                  <el-button v-if="index1 > 0" @click="delChildren(index,index1)" type="danger" circle size="small"> - </el-button>
                  <el-button @click="addChildren(index,index1)" type="danger" circle size="small"> + </el-button>
               </div>
         </el-form-item>
      </el-form>
      <el-table v-if="data.tableData.length > 0" :data="data.tableData" style="width: 100%">
        <template v-if="data.tabHead.length > 0">
         <el-table-column v-for="(itemss,index) in data.tabHead" :key="index" :prop="`key${index}`" :label="itemss.title" width="180">
            
         </el-table-column>
        </template>
         <el-table-column prop="sotck" label="库存" width="180">
            <template #default="scope">
               <el-input v-model="scope.row.sotck"></el-input>
            </template>
         </el-table-column>
         <el-table-column prop="originPrice" label="原价" width="180">
            <template #default="scope">
               <el-input v-model="scope.row.originPrice"></el-input>
            </template>
         </el-table-column>
         <el-table-column prop="brcode" label="条码" width="180">
            <template #default="scope">
               <el-input v-model="scope.row.brcode"></el-input>
            </template>
         </el-table-column>
      </el-table>
   </div>
</template>

js 부분

<script setup>
import {ref,reactive,inject,watch} from 'vue'
const data = reactive({
   form:{},
   specsList:[
      {
         title:'规格名',
         value:'',
         children:[
            {
               value:'',
            }
         ]
      }
   ],
   tableData:[
     {stock:0}
   ],
   tabHead:[]
})
const addChildren = (pIndex,index) => { //添加子规格
   data.specsList[pIndex].children.push({value:''})
}
const delChildren = (pIndex,index) => { //删除子规格
   data.specsList[pIndex].children.splice(index,1)
}
const addFirst = () => { //添加一级规格
   data.specsList.push({
      title:'规格名',
         value:'',
         children:[
            {
               value:'',
            }
         ]
   })
}
const delFirst = index => {
   data.specsList.splice(index,1)
}
watch(()=>data.specsList,(newVal)=>{
   handleSpecs()
},{
   deep:true
}
)
const handleSpecs = () => {
   data.tabHead = []
   data.tableData = []
   data.specsList.forEach((item,index)=>{
      data.tabHead.push({
         title:item.value,
         value:'key'+index
      })
      let values = data.specsList.map(spec => spec.children.map(child => child.value))
      let product = values.reduce((acc, cur) => acc * cur.length, 1)
      let result = []
      for (let i = 0; i < product; i++) {
        let row = {}
        for (let j = 0; j < values.length; j++) {
          let valueIndex = Math.floor(i / values.slice(j + 1).reduce((acc, cur) => acc * cur.length, 1)) % values[j].length
          row[`key${j}`] = values[j][valueIndex]
        }
        result.push(row)
      }
      data.tableData = result
   })
   console.log(data.tableData)
}
const getData = () => {
   console.log(data.specsList)
}
</script>