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>