相恨不如潮有信，相思始觉海非深。

Vue简易产品sku功能

• template

<div class="button-group">

    <el-popover placement="left-start" :visible="configVisible" :width="500" trigger="click">
        <template #reference>
        <el-button size="small" type="primary" @click="configVisible = !configVisible">配置</el-button>
        </template>

    <!-- sku 配置 -->

        <div class="sku-config" v-for="(skuForm, index) in skuList" :key="index">

            <el-form ref="skuForm" :model="skuForm" label-width="auto"style="display: flex;justify-content: space-between;align-items: center;">
                <el-form-item label="名称">
                    <el-input v-model="skuForm.skuName" clearable placeholder="请输入属性名称" />
                </el-form-item>

                <el-form-item label="属性值">
                    <el-input v-model="skuForm.value" clearable placeholder="请输入属性值" />
                </el-form-item>

                <el-button type="primary" size="small" plain @click="delSkuForm(index)">删除</el-button>
            </el-form>

        </div>

        <el-button type="primary" @click="addSkuForm">增加</el-button>

        <div style=" text-align: right; margin: 5px 0;padding-top: 10px;">
            <el-button size="small" text @click="configVisible = false">取消</el-button>
            <el-button size="small" type="primary" @click="setConfig">保存</el-button>
        </div>
    </el-popover>

</div>

• js

const configVisible = ref(false)
const skuList = ref<any>([
    { skuName: '', value: '' },
])
// 会有引用
/* const skuForm = reactive<any>({
    skuName: '',
    value: ''
}) */

// 添加sku
const addSkuForm = () => {
    skuList.value.push({
        skuName: '',
        value: ''
    })
    console.log(skuList.value);
}

// 删除sku
const delSkuForm = (index: number) => {
    skuList.value.splice(index, 1)
}

// 保存配置sku
const setConfig = () => {
    console.log(skuList.value);
}