簡介
文章主要講述在vue3項目中使用elementui框架實現復雜表單的方式。表單中涉及動態組件的生成、文件上傳和富文本編輯器的使用，只會將在實現過程中較復雜的部分進行分享，然后提供一份完整的前端代碼。
表單效果演示
基礎信息
spu屬性
sku詳情
關鍵點
動態組件的處理
在spu屬性步驟中，CPU型號、操作系統和生物解鎖三個屬性都是動態生成的。
實現原理
組件動態生成和刪除的原理是通過操作v-for組件的數據源實現的。向數據源添加數據會動態生成組件，將數據源的數據減少就會刪除對應的組件。
所以在點擊添加屬性時，只要向v-for的數據源中添加屬性配置，就能實現動態生成組件的效果。
組件的類型、可選值都是提前定義的。
分析JD、淘寶等各類商城關于spu屬性的展示，可以發現基本可以用自定義、單選和多選屬性把所有spu屬性覆蓋。
因此就可以提前將商品可用的屬性按類型和可選值完成定義，在頁面選擇對應屬性添加到頁面即可。
動態添加spu屬性的代碼
只需要重點關注 addSpuItem、rmAttr 方法和?v-for="(dynamicSpu, dspuK) in state.auxiliaries.optional.attr.spu.dynamicItems"
<el-form-item label="選擇屬性"><el-select filterable v-model="state.auxiliaries.optional.attr.spu.dynamic"style="display: inline-block;width: 198px"><el-option label="請選擇" :value="0"></el-option><el-option v-for="(spuAttr, spuK) in state.auxiliaries.optional.attr.list" :key="spuK" :label="spuAttr.name":value="spuAttr.attrId"></el-option></el-select><el-divider direction="vertical" border-style="none" /><el-button type="primary" @click="addSpuItem">添加規格屬性</el-button></el-form-item><el-form-item v-for="(dynamicSpu, dspuK) in state.auxiliaries.optional.attr.spu.dynamicItems" :key="dspuK":label="dynamicSpu.name"><el-input v-model="dynamicSpu.selectedValue" v-if="dynamicSpu.type === 'CUSTOM'"style="max-width: 40%"></el-input><el-radio-group v-model="dynamicSpu.selectedValue" v-else-if="dynamicSpu.type === 'SINGLE'"><el-radio v-for="(dspuAttr, dspuaK) in dynamicSpu.value" :key="dspuaK" :label="dspuAttr">{{ dspuAttr}}</el-radio></el-radio-group><el-checkbox-group v-model="dynamicSpu.selectedValue" v-else-if="dynamicSpu.type === 'MULTIPLE'"><el-checkbox v-for="(dspumAttr, dspumK) in dynamicSpu.value" :key="dspumK" :label="dspumAttr":value="dspumAttr"></el-checkbox></el-checkbox-group><el-divider direction="vertical"></el-divider><el-button type="danger" @click="rmAttr('spu', dspuK)" size="small">刪除</el-button></el-form-item>向spu數據源添加元素
主要是向?state.auxiliaries.optional.attr.spu.dynamicItems 這個數組中追加元素
// 動態生成SPU條目
const addSpuItem = () => {if (state.value.auxiliaries.optional.attr.spu.dynamic === 0) {ElMessage.error("請選擇一個屬性")return}// 已選擇的SPU屬性for (let i = 0; i < state.value.auxiliaries.optional.attr.list.length; i++) {if (state.value.auxiliaries.optional.attr.list[i].attrId === state.value.auxiliaries.optional.attr.spu.dynamic) {// 利用JSON實現簡單對象的深拷貝let dynamicItem = JSON.parse(JSON.stringify(state.value.auxiliaries.optional.attr.list[i]))dynamicItem.selectedValue = []state.value.auxiliaries.optional.attr.spu.dynamicItems.push(dynamicItem)}}
}刪除動態組件
將對應數據源的元素刪除，就可以實現動態刪除生成的組件
const rmAttr = (type: string, idx: number) => {if (type === "spu") {// 刪除動態添加的SPU屬性state.value.auxiliaries.optional.attr.spu.dynamicItems.splice(idx, 1)return}if (type === "sku") {state.value.auxiliaries.optional.attr.sku.dynamicItems.splice(idx, 1)}
}文件上傳組件的使用
在sku部分有上傳組件的使用。
利用elementUI提供的組件實現，相對來說沒有什么難度。由于是動態組件，每個上傳文件的組件要設置一個單獨的參數接收數據，避免出現數據覆蓋的情況。
<!-- 商品輪播圖 --><el-form-item label="商品輪播圖" label-width="120"><el-upload v-model:file-list="state.auxiliaries.configs.upload.coversForm[dDetailItemK].covers"action="http://localhost:9900/upload/cover" multiple :headers="state.auxiliaries.configs.upload.headers":on-success="handleUploadCoverSuccess" :on-error="handleUploadCoverFailed" method="post"list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"><el-icon><Plus /></el-icon></el-upload></el-form-item>主要用到了組件的action、headers屬性。action設置上傳文件的接口、headers設置調用接口時必要的請求頭
定義headers
一般項目都是前后端分離的，headers通常設置調用接口的token等身份認證信息。
const state = ref({auxiliaries: {configs: {upload: {headers: {Authorization: "Bearer " + Session.get('token')},coversForm: [] as Array<any>}}}
})動態使用富文本編輯器
富文本編輯器使用的是tinymce，特點就是輕量、簡潔。具體使用教程可以看這里。
動態的富文本編輯器實現原理與上傳組件一樣，區別就是在獲取富文本編輯器中的內容的方式有所不同。
在vue3中富文本編輯器的組件需要設置ref屬性，在獲取編輯器的內容時需要通過ref獲取到編輯器的實例，然后再獲取內容。
<template><!-- 商詳 --><el-form-item v-for="(dynamicSku, dskuK) in state.auxiliaries.optional.attr.sku.dynamicItems":key="dskuK" label="商品詳情" label-width="120"><!-- 用tinymce富文本編輯器 --><Editor ref="skuDetailRef" :init="state.auxiliaries.configs.editor.configs" initial-value="Welcome to TinyMCE!"></Editor></el-form-item>
</template>
<script setup lang="ts">
import Editor from '@tinymce/tinymce-vue'
</script>在vue3中當頁面有多個Editor實例時，對應ref的值會是數組。
獲取多富文本編輯器的內容
<script setup lang="ts">import {ref} from 'vue'
const skuDetailRef = ref()
const submitForm = () => {// 將sku的詳情追加到formfor (let skuIdx = 0; skuIdx < skuDetailRef.value.length; skuIdx++) {skuDetailRef.value[skuIdx].getEditor().getContent()}
}
</script>相關的完整代碼
運行的依賴有Vue3、element-plus和tinymce
<template><el-row style="margin-top: 20px;"><el-col :span="22" :offset="1"><el-card><el-steps style="width: 100%" :active="state.auxiliaries.configs.step.active" finish-status="success"><el-step title="基礎信息" /><el-step title="設置規格" /><el-step title="設置SKU" /></el-steps><el-divider border-style="none"></el-divider><el-form v-model="state.form"><el-tabs v-model="state.auxiliaries.configs.step.stepTabActive" class="demo-tabs"@tab-change="handleTabChange"><el-tab-pane label="基礎信息" name="product-base"><el-form-item label="商品名稱"><el-input v-model="state.form.name"></el-input></el-form-item><el-form-item label="選擇品牌"><el-select v-model="state.form.brandId"><el-option :value=0 label="請選擇"></el-option><el-option v-for="(brand, bk) in state.auxiliaries.optional.brandList" :key="bk":label="brand.label" :value="brand.value"></el-option></el-select></el-form-item><el-form-item label="所屬分類"><el-cascader v-model="state.form.categoryId" clearable:props="state.auxiliaries.optional.categories.props":options="state.auxiliaries.optional.categories.list"></el-cascader></el-form-item><el-form-item><el-button type="primary" @click="nextStep">下一步</el-button></el-form-item></el-tab-pane><el-tab-pane label="設置規格" name="set-spu"><el-form-item label="選擇屬性"><el-select filterable v-model="state.auxiliaries.optional.attr.spu.dynamic"style="display: inline-block;width: 198px"><el-option label="請選擇" :value="0"></el-option><el-option v-for="(spuAttr, spuK) in state.auxiliaries.optional.attr.list":key="spuK" :label="spuAttr.name" :value="spuAttr.attrId"></el-option></el-select><el-divider direction="vertical" border-style="none" /><el-button type="primary" @click="addSpuItem">添加規格屬性</el-button></el-form-item><el-form-itemv-for="(dynamicSpu, dspuK) in state.auxiliaries.optional.attr.spu.dynamicItems":key="dspuK" :label="dynamicSpu.name"><el-input v-model="dynamicSpu.selectedValue" v-if="dynamicSpu.type === 'CUSTOM'"style="max-width: 40%"></el-input><el-radio-group v-model="dynamicSpu.selectedValue" v-else-if="dynamicSpu.type === 'SINGLE'"><el-radio v-for="(dspuAttr, dspuaK) in dynamicSpu.value" :key="dspuaK":label="dspuAttr">{{ dspuAttr }}</el-radio></el-radio-group><el-checkbox-group v-model="dynamicSpu.selectedValue" v-else-if="dynamicSpu.type === 'MULTIPLE'"><el-checkbox v-for="(dspumAttr, dspumK) in dynamicSpu.value" :key="dspumK":label="dspumAttr" :value="dspumAttr"></el-checkbox></el-checkbox-group><el-divider direction="vertical"></el-divider><el-button type="danger" @click="rmAttr('spu', dspuK)" size="small">刪除</el-button></el-form-item><el-form-item><el-button type="primary" @click="nextStep">下一步</el-button></el-form-item></el-tab-pane><el-tab-pane label="設置SKU" name="set-sku"><el-form-item label="選擇屬性"><el-select filterable v-model="state.auxiliaries.optional.attr.sku.dynamic"style="display: inline-block;width: 198px"><el-option label="請選擇" :value="0"></el-option><el-option v-for="(skuAttr, skuK) in state.auxiliaries.optional.attr.list":key="skuK" :label="skuAttr.name" :value="skuAttr.attrId"></el-option></el-select><el-divider direction="vertical" border-style="none" /><el-button type="primary" @click="addSkuItem">添加規格屬性</el-button><el-divider border-style="none" direction="vertical"></el-divider><el-button type="success" @click="genSkuItems">生成SKU條目</el-button></el-form-item><el-form-itemv-for="(dynamicSku, dskuK) in state.auxiliaries.optional.attr.sku.dynamicItems":key="dskuK" :label="dynamicSku.name"><el-checkbox-group v-model="dynamicSku.selectedValue"><el-checkbox v-for="(dskumAttr, dskumK) in dynamicSku.value" :key="dskumK":label="dskumAttr" :value="dskumAttr"></el-checkbox></el-checkbox-group><el-divider direction="vertical"></el-divider><el-button type="danger" @click="rmAttr('sku', dskuK)" size="small">刪除</el-button></el-form-item><el-form-item v-if="state.auxiliaries.optional.attr.sku.dynamicDetailItems.length > 0"><el-divider content-position="left">設置具體的SKU信息</el-divider><el-button-group style="margin-bottom: 15px"><el-button type="primary" @click="initSkuInfo('title')">初始化標題</el-button><el-button type="primary" @click="initSkuInfo('summary')">初始化簡介</el-button><el-button type="primary" @click="initSkuInfo('stock')">初始化庫存</el-button><el-button type="primary" @click="initSkuInfo('price')">初始化價格</el-button></el-button-group><!-- 用折疊面板顯示各種SKU的數據 --><el-collapse style="width: 100%"v-model="state.auxiliaries.optional.attr.sku.dynamicDetailCollapaseActiveNames"><el-collapse-item :title="genCollapseTitle(dDetailItemV)":name="genCollapseTitle(dDetailItemV)"v-for="(dDetailItemV, dDetailItemK) in state.auxiliaries.optional.attr.sku.dynamicDetailItems":key="dDetailItemK"><!-- 銷售標題 --><el-form-item label="銷售標題" label-width="120"><el-input v-model="state.form.skuDetails[dDetailItemK].title"></el-input></el-form-item><el-divider border-style="none"></el-divider><el-form-item label="SKU簡介" label-width="120"><el-input v-model="state.form.skuDetails[dDetailItemK].summary"></el-input></el-form-item><el-divider border-style="none"></el-divider><!-- 商品輪播圖 --><el-form-item label="商品輪播圖" label-width="120"><el-uploadv-model:file-list="state.auxiliaries.configs.upload.coversForm[dDetailItemK].covers"action="http://localhost:9900/upload/cover" multiple:headers="state.auxiliaries.configs.upload.headers":on-success="handleUploadCoverSuccess":on-error="handleUploadCoverFailed" method="post"list-type="picture-card" :on-preview="handlePictureCardPreview":on-remove="handleRemove"><el-icon><Plus /></el-icon></el-upload></el-form-item><el-divider border-style="none"></el-divider><!-- 價格 --><el-form-item label="價格" label-width="120"><el-input type="number"v-model="state.form.skuDetails[dDetailItemK].price"></el-input></el-form-item><el-divider border-style="none"></el-divider><!-- 庫存 --><el-form-item label="庫存" label-width="120"><el-input type="number"v-model="state.form.skuDetails[dDetailItemK].stock"></el-input></el-form-item><el-divider border-style="none"></el-divider><!-- 商詳 --><el-form-item label="商品詳情" label-width="120"><!-- 用tinymce富文本編輯器 --><Editor ref="skuDetailRef" :init="state.auxiliaries.configs.editor.configs"initial-value="Welcome to TinyMCE!"></Editor></el-form-item><el-divider border-style="none"></el-divider></el-collapse-item></el-collapse></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button><el-button>重置</el-button></el-form-item></el-tab-pane></el-tabs></el-form><el-dialog v-model="state.auxiliaries.optional.attr.sku.imgDialog.visiable"><img w-full :src="state.auxiliaries.optional.attr.sku.imgDialog.url" alt="Preview Image" /></el-dialog></el-card></el-col></el-row>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import Editor from '@tinymce/tinymce-vue'
import { Session } from '/@/utils/storage';
import { UploadAjaxError } from 'element-plus/es/components/upload/src/ajax'
import { useFiletApi } from '/@/api/file'const skuDetailRef = ref()
const fileApi = useFiletApi()const state = ref({form: {id: null,name: "",brandId: 0,categoryId: [],spu: [] as ProductAttrType[],sku: [] as ProductAttrType[],skuDetails: [] as ProductSkuFormType[],} as ProductFormType,rawForm: {id: null,name: "",brandId: 0,categoryId: [],spu: [] as ProductAttrType[],sku: [] as ProductAttrType[],skuDetails: [] as ProductSkuFormType[]} as ProductFormType,auxiliaries: {configs: {step: {active: 1, // 步驟條stepTab: [{ name: "product-base", step: 1 },{ name: "set-spu", step: 2 },{ name: "set-sku", step: 3 },],stepTabActive: "product-base",},editor: {configs: {width: '100%',resize: 'both',min_height: 300,plugins: "image fullscreen",// 實現上傳邏輯images_upload_handler: async (blobInfo: any, success: any) => {console.log("upload image ", blobInfo, success)const formData = new FormData();formData.append('file', blobInfo.blob());// 上傳const uploadRs = await uploadImg(formData)// success("https://cdn3-banquan.ituchong.com/weili/image/l/1517224685217251339.jpeg")success(uploadRs.data)}}},upload: {headers: {Authorization: "Bearer " + Session.get('token')},coversForm: [] as Array<any>}},optional: {brandList: [{ label: "華為", value: 1 }, { label: "蘋果", value: 2 },],categories: {list: [{label: "手機品類", value: 1, children: [{ label: "手機", value: 3 },{ label: "手機配件", value: 4 }]},{label: "電腦", value: 2, children: [{ label: "電腦配件", value: 5 },{label: "外設產品", value: 6, children: [{ label: "鼠標", value: 7 },{ label: "鍵盤", value: 8 }]}]}],props: {expandTrigger: 'hover' as const}},attr: {list: [{ attrId: 1, name: "顏色", value: ["雅川青", "雅丹黑", "南糯紫", "白沙銀", "red"], type: "SINGLE" },{ attrId: 2, name: "版本", value: ["12GB+512GB", "12GB+1TB", "16GB+1TB"], type: "SINGLE" },{ attrId: 3, name: "CPU型號", value: [], type: "CUSTOM" },{ attrId: 4, name: "操作系統", value: ["HarmonyOS", "IOS", "Android"], type: "SINGLE" },{ attrId: 5, name: "生物解鎖", value: ["指紋", "面部", "視網膜"], type: "MULTIPLE" },],spu: {dynamic: 0, // 動態選擇的SPU屬性組dynamicItems: [] as any[], // 動態選擇并生成的SPU屬性表單項},sku: {dynamic: 0, // 動態選擇的SPU屬性組dynamicItems: [] as any[], // 動態選擇并生成的SPU屬性表單項dynamicDetailItems: [] as any[], // 根據選擇的SKU屬性排列組合生成的SKU具體條目dynamicDetailCollapaseActiveNames: [], // 激活狀態的折疊面板imgDialog: {visiable: false,url: ""}}}}}
})const nextStep = () => {state.value.auxiliaries.configs.step.stepTabActive = state.value.auxiliaries.configs.step.stepTab[state.value.auxiliaries.configs.step.active].namestate.value.auxiliaries.configs.step.active += 1
}const handleTabChange = (currentTabName: string) => {for (let i = 0; i < state.value.auxiliaries.configs.step.stepTab.length; i++) {if (state.value.auxiliaries.configs.step.stepTab[i].name === currentTabName) {state.value.auxiliaries.configs.step.active = state.value.auxiliaries.configs.step.stepTab[i].step}}
}
// 動態生成SPU條目
const addSpuItem = () => {if (state.value.auxiliaries.optional.attr.spu.dynamic === 0) {ElMessage.error("請選擇一個屬性")return}// 已選擇的SPU屬性for (let i = 0; i < state.value.auxiliaries.optional.attr.list.length; i++) {if (state.value.auxiliaries.optional.attr.list[i].attrId === state.value.auxiliaries.optional.attr.spu.dynamic) {let dynamicItem = JSON.parse(JSON.stringify(state.value.auxiliaries.optional.attr.list[i]))dynamicItem.selectedValue = []state.value.auxiliaries.optional.attr.spu.dynamicItems.push(dynamicItem)}}
}const rmAttr = (type: string, idx: number) => {if (type === "spu") {// 刪除動態添加的SPU屬性state.value.auxiliaries.optional.attr.spu.dynamicItems.splice(idx, 1)return}if (type === "sku") {state.value.auxiliaries.optional.attr.sku.dynamicItems.splice(idx, 1)}
}// 動態生成SKU條目
const addSkuItem = () => {if (state.value.auxiliaries.optional.attr.sku.dynamic === 0) {ElMessage.error("請選擇一個屬性")return}// 已選擇的sku屬性for (let i = 0; i < state.value.auxiliaries.optional.attr.list.length; i++) {if (state.value.auxiliaries.optional.attr.list[i].attrId === state.value.auxiliaries.optional.attr.sku.dynamic) {let dynamicItem = JSON.parse(JSON.stringify(state.value.auxiliaries.optional.attr.list[i]))// SKU的值全部多選，然后做排列組合dynamicItem.selectedValue = []state.value.auxiliaries.optional.attr.sku.dynamicItems.push(dynamicItem)}}
}// 根據選擇的SKU屬性值，按排列組合生成SKU條目
// 遞歸比較適合處理這種問題
const genSkuItems = () => {// 清空已有的SKU信息state.value.form.skuDetails = [] as ProductSkuFormType[]state.value.auxiliaries.configs.upload.coversForm = [] as any[]// 獲取所有SKU屬性和選擇的值const skus = state.value.auxiliaries.optional.attr.sku.dynamicItems// 遍歷屬性數let tempSkuItems = [] // 排列組合臨時狀態for (let i = 0; i < skus.length; i++) {// 遍歷屬性選擇的值if (tempSkuItems.length <= 0) {for (let j = 0; j < skus[i].selectedValue.length; j++) {tempSkuItems.push([{attrId: skus[i].attrId,name: skus[i].name,selectedValue: [skus[i].selectedValue[j]]}])}} else {let iterTempSkuItems = []for (let j = 0; j < skus[i].selectedValue.length; j++) {// 判斷臨時組合是否存在for (let k = 0; k < tempSkuItems.length; k++) {let iterTempSkuItem = JSON.parse(JSON.stringify(tempSkuItems[k]))iterTempSkuItem.push({attrId: skus[i].attrId,name: skus[i].name,selectedValue: [skus[i].selectedValue[j]]})iterTempSkuItems.push(iterTempSkuItem)}}// 讓最終的排列組合臨時變量接管，遍歷中的臨時變量tempSkuItems = JSON.parse(JSON.stringify(iterTempSkuItems))}}// 為表單的SKU生成對應數量的SKU表單字段console.log("covers form ", state.value.auxiliaries.configs.upload.coversForm)for (let k = 0; k < tempSkuItems.length; k++) {state.value.form.skuDetails.push({id: null,sku: JSON.parse(JSON.stringify(tempSkuItems[k])),title: "",summary: "",price: 0,stock: 0,covers: [],detail: ""})state.value.auxiliaries.configs.upload.coversForm.push({covers: []})}state.value.auxiliaries.optional.attr.sku.dynamicDetailItems = JSON.parse(JSON.stringify(tempSkuItems))console.log("covers form ", state.value.auxiliaries.configs.upload.coversForm)console.log("sku detail form ", state.value.form.skuDetails)
}const initSkuInfo = (type: string) => {// 用確認框的方式進行交互let msgBoxTitle = ""switch (type) {case "title":msgBoxTitle = "初始化銷售標題"breakcase "summary":msgBoxTitle = "初始化SKU簡介"breakcase "stock":msgBoxTitle = "初始化庫存"breakcase "price":msgBoxTitle = "初始化價格"breakdefault:msgBoxTitle = "-"}ElMessageBox.prompt(msgBoxTitle, '初始化sku數據', {confirmButtonText: '提交',cancelButtonText: '取消',}).then(({ value }) => {// 將sku的對應信息初始化if (type === 'title') {initTitle(value)return}if (type === 'summary') {initSummary(value)return}if (type === 'stock') {initStock(parseInt(value))return}if (type === 'price') {initPrice(parseFloat(value))return}})
}
// 初始化sku的銷售標題
const initTitle = (titlePrefix: string) => {// 自定義的標題加設置的sku屬性名for (let i = 0; i < state.value.form.skuDetails.length; i++) {let skuTitle = ""for (let j = 0; j < state.value.form.skuDetails[i].sku.length; j++) {skuTitle += " " + state.value.form.skuDetails[i].sku[j].selectedValue.join("")}state.value.form.skuDetails[i].title = titlePrefix + skuTitle}
}const initSummary = (summary: string) => {for (let i = 0; i < state.value.form.skuDetails.length; i++) {state.value.form.skuDetails[i].summary = summary}
}const initStock = (stock: number) => {for (let i = 0; i < state.value.form.skuDetails.length; i++) {state.value.form.skuDetails[i].stock = stock}
}const initPrice = (price: number) => {for (let i = 0; i < state.value.form.skuDetails.length; i++) {state.value.form.skuDetails[i].price = price}
}const uploadImg = (uploadForm: FormData) => {console.log("調用上傳文件的接口", uploadForm.get('rawFilename'))return fileApi.uploadCover(uploadForm)
}const handleUploadCoverSuccess = (response: any) => {console.log("upload success ", response)
}const handleUploadCoverFailed = (error: UploadAjaxError) => {let rs = JSON.parse(error.message)ElMessage.error(rs.msg)
}const genCollapseTitle = (tempSkuItems: Array<any>): string => {let tempTitle = ""for (let n = 0; n < tempSkuItems.length; n++) {tempTitle += " " + tempSkuItems[n].selectedValue[0]}return tempTitle
}const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {console.log(uploadFile, uploadFiles)
}const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {state.value.auxiliaries.optional.attr.sku.imgDialog.url = uploadFile.url!state.value.auxiliaries.optional.attr.sku.imgDialog.visiable = true
}const submitForm = () => {console.log("upload covers: ", state.value.auxiliaries.configs.upload.coversForm)// 從臨時保存輪播圖數據的變量中提取輪播圖的url// 遍歷skufor (let i = 0; i < state.value.auxiliaries.configs.upload.coversForm.length; i++) {// 遍歷sku的輪播圖let skuCovers = []for (let j = 0; j < state.value.auxiliaries.configs.upload.coversForm[i].covers.length; j++) {// 提取輪播圖urllet coverRs = JSON.parse(JSON.stringify(state.value.auxiliaries.configs.upload.coversForm[i].covers[j].response))skuCovers.push(coverRs.data)}// 賦值到對應的sku的coversstate.value.form.skuDetails[i].covers = JSON.parse(JSON.stringify(skuCovers))}// 將sku的詳情追加到formfor (let skuIdx = 0; skuIdx < skuDetailRef.value.length; skuIdx++) {state.value.form.skuDetails[skuIdx].detail = skuDetailRef.value[skuIdx].getEditor().getContent()}// 將sku選擇的值追加到formstate.value.form.sku = JSON.parse(JSON.stringify(state.value.auxiliaries.optional.attr.sku.dynamicItems))// 將SPU選擇的值追加到formstate.value.form.spu = JSON.parse(JSON.stringify(state.value.auxiliaries.optional.attr.spu.dynamicItems))// 特殊處理spu的值，值都認為是多選的for (let b = 0; b < state.value.form.spu.length; b++) {if (!(state.value.form.spu[b].selectedValue instanceof Object)) {state.value.form.spu[b].selectedValue = [state.value.form.spu[b].selectedValue]}}console.log("submit form: ", state.value.form)afterSubmit()
}const afterSubmit = () => {// 重置表單state.value.form = JSON.parse(JSON.stringify(state.value.rawForm))// 重置sku、spu的動態數據state.value.auxiliaries.optional.attr.sku.dynamicItems = []state.value.auxiliaries.optional.attr.sku.dynamicDetailItems = []state.value.auxiliaries.optional.attr.spu.dynamicItems = []
}
</script>
![[微信小程序知識點]自定義組件-拓展-外部樣式類](http://pic.xiahunao.cn/[微信小程序知識點]自定義組件-拓展-外部樣式類)
