动态生成规格配置项

点击添加配置添加大规格项，点击添加子规格，增加子规格项，点击删除则删除大规格,点×号则删除子规格。

<el-form-item label="选项设置">
    <div style="width: 100%">
        <el-button @click="additem" type="primary">添加配置</el-button>
    </div>
    <!-- 选项配置项 -->
    <div class="mt-5 bg" v-for="(item, i1) in options" :key="i1">
        <div>
            <BaciscCom
                v-model="item.norms"
                :basicdata="basicdata"
            ></BaciscCom>
            <el-button
                @click="delItem(i1)"
                style="margin-left: 20px"
                type="primary"
                >删除规格</el-button
            >
        </div>
        <!-- 子规格 -->
        <div>
            <template v-for="(itm2, i2) in item.Son_norms" :key="i2">
                <el-input-number
                    v-model="itm2.value"
                    min="0"
                    step="100"
                    class="Son-specification"
                    step-strictly="100"
                    placeholder="请输入内容"
                ></el-input-number
                ><span
                    @click="delSonitem(item, i2)"
                    style="
                        cursor: pointer;
                        margin-left: 2px;
                        font-size: 20px;
                    "
                    >X</span
                >
            </template>
            <el-button
                style="margin-left: 30px; margin-top: 10px"
                type="primary"
                @click="addSonitem(item)"
                >添加子规格</el-button
            >
        </div>
    </div>
</el-form-item>

style样式: 

.Son-specification {
    width: 215px;
    margin-left: 30px;
    margin-top: 10px;
}

 JS逻辑:

interface Norm {
    value: string
    price?: string // 添加一个可选的 price 属性
}
// 配置规格数据
const options = ref<
    {
        norms: string
        Son_norms: Norm[]
    }[]
>([
    {
        norms: '',
        Son_norms: [{ value: '' }]
    }
])

// 删除配置项
const delItem = (i1: any) => {
    options.value.splice(i1, 1)
    // 添加大规格
}
// 删除子规格
const delSonitem = (item: any, i2: any) => {
    item.Son_norms.splice(i2, 1)
}
// 添加配置选项
const additem = () => {
    const obj = {
        norms: '',
        Son_norms: [{ value: '' }]
    }
    options.value.push(obj)
}
// 添加子规格
const addSonitem = (itm2: any) => {
    const obj = { value: '' }
    itm2.Son_norms.push(obj)
}

价格配置

<el-form-item label="价格配置">
    <div style="width: 100%">
        <el-button @click="generatehandle" :loading="loading" type="warning"
            >生成配置表</el-button
        >
        <span style="color: red; margin-left: 10px">请记得生成配置哦!</span>
    </div>
    <div>
        <el-table
            v-if="priceSet.length > 0"
            :data="priceSet"
            style="width: 600px"
        >
            <el-table-column type="index" label="序号" width="60px" />
            <el-table-column prop="norms" label="基础项" width="100px">
            </el-table-column>
            <el-table-column label="规格" width="100px">
                <template v-slot="scope">
                    <div
                        v-for="(item, index) in scope.row.Son_norms"
                        :key="index"
                    >
                        {{ item.value }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="价格" align="center">
                <template v-slot="scope">
                    <div
                        class="h-10 flex items-center"
                        v-for="(item, index) in scope.row.Son_norms"
                        :key="index"
                    >
                        <div>
                            <el-input-number
                                min="0"
                                style="width: 120px"
                                v-model="item.price"
                                placeholder="单价"
                                :precision="2"
                                :step="0.1"
                            >
                            </el-input-number>
                        </div>
                        <div
                            style="
                                margin-left: 10px;
                                font-size: 10px;
                                color: gray;
                            "
                        >
                            元/{{ scope.row.norms }}
                        </div>
                        <div class="ml-5">
                            总价：
                            <el-input
                                style="width: 50px"
                                disabled
                                :value="item.price * item.value || 0"
                                placeholder="请输入价格"
                            />
                            元
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</el-form-item>

/**价格配置模块 */
// 表格数据
const priceSet = ref([])
const loading = ref(false)
// 生成表格
const generatehandle = () => {
    // 配置项赋值
    fromModel.value.productBase.optionSettings = { arr: options.value }

    loading.value = true
    setTimeout(() => {
        priceSet.value = options.value
        options.value.forEach((item) => {
            item.Son_norms.forEach((it2) => {
                it2.price = ''
            })
        })
        fromModel.value.productBase.priceSettings = { pricearr: options.value }
        loading.value = false
    }, 1000)
}