背景：之前ruoyi生成的vue2代碼，
<el-form ref=“form”，后面我改成vue3的寫(xiě)法，沒(méi)有實(shí)例化form，
在vue3中是需要定義const form= ref();
導(dǎo)致點(diǎn)擊了修改后，頁(yè)面彈框顯示出來(lái)，數(shù)據(jù)沒(méi)有回顯。
一直在懷疑是reactive的響應(yīng)丟失了，還是toRefs的問(wèn)題。
找了好久，終于排除出問(wèn)題所在。

 <!-- 添加或修改商品管理對(duì)話(huà)框 --><el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body><el-form ref="goodsFormRef" :model="form" :rules="rules" label-width="80px"><el-form-item label="商品名稱(chēng)" prop="name"><el-input v-model="form.name" placeholder="請(qǐng)輸入商品名稱(chēng)" /></el-form-item><el-form-item label="商品圖片地址" prop="image"><image-upload v-model="form.image"/></el-form-item><el-form-item label="商品編號(hào)" prop="number"><el-input v-model="form.goodsNum" placeholder="請(qǐng)輸入商品編號(hào)" /></el-form-item><!--        <el-form-item label="單位名稱(chēng)" prop="unitName">--><!--          <el-input v-model="form.unitName" placeholder="請(qǐng)輸入單位名稱(chēng)" />--><!--        </el-form-item>--><el-form-item label="商品分類(lèi)" prop="categoryId"><!--          <el-input v-model="form.categoryId" placeholder="請(qǐng)輸入商品分類(lèi)ID" />--><treeselect :options="categoryTree" placeholder="請(qǐng)選擇上級(jí)菜單" v-model="form.categoryId" style="width: 230px;"/></el-form-item><!--        <el-form-item label="條碼" prop="barCode">--><!--          <el-input v-model="form.barCode" placeholder="請(qǐng)輸入條碼" />--><!--        </el-form-item>--><el-form-item label="備注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="請(qǐng)輸入內(nèi)容" /></el-form-item><!--        <el-form-item label="衣長(zhǎng)/裙長(zhǎng)/褲長(zhǎng)" prop="length">--><!--          <el-input v-model="form.length" placeholder="請(qǐng)輸入衣長(zhǎng)/裙長(zhǎng)/褲長(zhǎng)" />--><!--        </el-form-item>--><!--        <el-form-item label="高度/袖長(zhǎng)" prop="height">--><!--          <el-input v-model="form.height" placeholder="請(qǐng)輸入高度/袖長(zhǎng)" />--><!--        </el-form-item>--><!--        <el-form-item label="寬度/胸闊(圍)" prop="width">--><!--          <el-input v-model="form.width" placeholder="請(qǐng)輸入寬度/胸闊(圍)" />--><!--        </el-form-item>--><!--        <el-form-item label="肩闊" prop="width1">--><!--          <el-input v-model="form.width1" placeholder="請(qǐng)輸入肩闊" />--><!--        </el-form-item>--><!--        <el-form-item label="腰闊" prop="width2">--><!--          <el-input v-model="form.width2" placeholder="請(qǐng)輸入腰闊" />--><!--        </el-form-item>--><!--        <el-form-item label="臀闊" prop="width3">--><!--          <el-input v-model="form.width3" placeholder="請(qǐng)輸入臀闊" />--><!--        </el-form-item>--><!--        <el-form-item label="重量" prop="weight">--><!--          <el-input v-model="form.weight" placeholder="請(qǐng)輸入重量" />--><!--        </el-form-item>--><!--        <el-form-item label="0啟用   1禁用" prop="disable">--><!--          <el-input v-model="form.disable" placeholder="請(qǐng)輸入0啟用   1禁用" />--><!--        </el-form-item>--><!--        <el-form-item label="保質(zhì)期" prop="period">--><!--          <el-input v-model="form.period" placeholder="請(qǐng)輸入保質(zhì)期" />--><!--        </el-form-item>--><el-form-item label="預(yù)計(jì)采購(gòu)價(jià)格" prop="purPrice"><el-input v-model="form.purPrice" placeholder="請(qǐng)輸入預(yù)計(jì)采購(gòu)價(jià)格" /></el-form-item><el-form-item label="建議批發(fā)價(jià)" prop="wholePrice"><el-input v-model="form.wholePrice" placeholder="請(qǐng)輸入建議批發(fā)價(jià)" /></el-form-item><el-form-item label="建議零售價(jià)" prop="retailPrice"><el-input v-model="form.retailPrice" placeholder="請(qǐng)輸入建議零售價(jià)" /></el-form-item><!--        <el-form-item label="單位成本" prop="unitCost">--><!--          <el-input v-model="form.unitCost" placeholder="請(qǐng)輸入單位成本" />--><!--        </el-form-item>--><el-form-item label="供應(yīng)商" prop="supplierId"><!--          <el-input v-model="form.supplierId" placeholder="請(qǐng)輸入供應(yīng)商id" />--><el-select v-model="form.supplierId" filterable  placeholder="請(qǐng)選擇供應(yīng)商名稱(chēng)"><el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select></el-form-item><el-form-item label="狀態(tài)" prop="status"><el-select v-model="form.status"   placeholder="狀態(tài)"><el-option label="銷(xiāo)售中" :value="1"></el-option><el-option label="已下架" :value="2"></el-option></el-select></el-form-item><!--        <el-form-item label="品牌" prop="brandId">--><!--          <el-input v-model="form.brandId" placeholder="請(qǐng)輸入品牌id" />--><!--        </el-form-item>--><!--        <el-form-item label="屬性1：季節(jié)" prop="attr1">--><!--          <el-input v-model="form.attr1" placeholder="請(qǐng)輸入屬性1：季節(jié)" />--><!--        </el-form-item>--><!--        <el-form-item label="屬性2：分類(lèi)" prop="attr2">--><!--          <el-input v-model="form.attr2" placeholder="請(qǐng)輸入屬性2：分類(lèi)" />--><!--        </el-form-item>--><!--        <el-form-item label="屬性3：風(fēng)格" prop="attr3">--><!--          <el-input v-model="form.attr3" placeholder="請(qǐng)輸入屬性3：風(fēng)格" />--><!--        </el-form-item>--><!--        <el-form-item label="屬性4：年份" prop="attr4">--><!--          <el-input v-model="form.attr4" placeholder="請(qǐng)輸入屬性4：年份" />--><!--        </el-form-item>--><!--        <el-form-item label="屬性5：面料" prop="attr5">--><!--          <el-input v-model="form.attr5" placeholder="請(qǐng)輸入屬性5：面料" />--><!--        </el-form-item>--><!--        <el-form-item label="外鏈url" prop="linkUrl">--><!--          <el-input v-model="form.linkUrl" type="textarea" placeholder="請(qǐng)輸入內(nèi)容" />--><!--        </el-form-item>--><!--        <el-form-item label="最低庫(kù)存" prop="lowQty">--><!--          <el-input v-model="form.lowQty" placeholder="請(qǐng)輸入最低庫(kù)存" />--><!--        </el-form-item>--><!--        <el-form-item label="最高庫(kù)存" prop="highQty">--><!--          <el-input v-model="form.highQty" placeholder="請(qǐng)輸入最高庫(kù)存" />--><!--        </el-form-item>--></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">確 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>

<script setup name="Goods" lang="ts">
import { ref, onMounted } from 'vue'
const goodsFormRef = ref<ElFormInstance>();
const initFormData: GoodsForm = {id: undefined,name: undefined,image: undefined,outerErpGoodsId: undefined,goodsNum: undefined,unitName: undefined,categoryId: undefined,barCode: undefined,remark: undefined,status: undefined,length: undefined,height: undefined,width: undefined,width1: undefined,width2: undefined,width3: undefined,weight: undefined,disable: undefined,period: undefined,purPrice: undefined,wholePrice: undefined,retailPrice: undefined,unitCost: undefined,supplierId: undefined,brandId: undefined,attr1: undefined,attr2: undefined,attr3: undefined,attr4: undefined,attr5: undefined,linkUrl: undefined,lowQty: undefined,highQty: undefined,province: undefined,city: undefined,town: undefined,synchronousId: undefined,declareCnName: undefined,declareEnName: undefined,declarePrice: undefined,declarePriceUnit: undefined,productBrand: undefined,manufacturer: undefined,customsCode: undefined,specificationModel: undefined,productAttribute: undefined,productLength: undefined,productWidth: undefined,productHeight: undefined,productWeight: undefined,purLink: undefined,purLink2: undefined,supplierId2: undefined,purPrice2: undefined
}
const data = reactive<PageData<GoodsForm, GoodsQuery>>({form: {...initFormData},queryParams: {pageNum: 1,pageSize: 10,name: undefined,image: undefined,outerErpGoodsId: undefined,goodsNum: undefined,unitName: undefined,categoryId: undefined,barCode: undefined,status: undefined,length: undefined,height: undefined,width: undefined,width1: undefined,width2: undefined,width3: undefined,weight: undefined,disable: undefined,period: undefined,purPrice: undefined,wholePrice: undefined,retailPrice: undefined,unitCost: undefined,supplierId: undefined,brandId: undefined,attr1: undefined,attr2: undefined,attr3: undefined,attr4: undefined,attr5: undefined,linkUrl: undefined,lowQty: undefined,highQty: undefined,province: undefined,city: undefined,town: undefined,synchronousId: undefined,declareCnName: undefined,declareEnName: undefined,declarePrice: undefined,declarePriceUnit: undefined,productBrand: undefined,manufacturer: undefined,customsCode: undefined,specificationModel: undefined,productAttribute: undefined,productLength: undefined,productWidth: undefined,productHeight: undefined,productWeight: undefined,purLink: undefined,purLink2: undefined,supplierId2: undefined,purPrice2: undefined,params: {}},rules: {id: [{ required: true, message: "主鍵id不能為空", trigger: "blur" }],name: [{ required: true, message: "商品名稱(chēng)不能為空", trigger: "blur" }],image: [{ required: true, message: "商品圖片地址不能為空", trigger: "blur" }],outerErpGoodsId: [{ required: true, message: "商品唯一ID不能為空", trigger: "blur" }],goodsNum: [{ required: true, message: "商品編號(hào)不能為空", trigger: "blur" }],unitName: [{ required: true, message: "申報(bào)單位不能為空", trigger: "blur" }],categoryId: [{ required: true, message: "商品分類(lèi)ID不能為空", trigger: "blur" }],barCode: [{ required: true, message: "條碼不能為空", trigger: "blur" }],remark: [{ required: true, message: "備注不能為空", trigger: "blur" }],status: [{ required: true, message: "狀態(tài)1銷(xiāo)售中2已下架不能為空", trigger: "change" }],length: [{ required: true, message: "衣長(zhǎng)/裙長(zhǎng)/褲長(zhǎng)不能為空", trigger: "blur" }],height: [{ required: true, message: "高度/袖長(zhǎng)不能為空", trigger: "blur" }],width: [{ required: true, message: "寬度/胸闊(圍)不能為空", trigger: "blur" }],width1: [{ required: true, message: "肩闊不能為空", trigger: "blur" }],width2: [{ required: true, message: "腰闊不能為空", trigger: "blur" }],width3: [{ required: true, message: "臀闊不能為空", trigger: "blur" }],weight: [{ required: true, message: "重量不能為空", trigger: "blur" }],disable: [{ required: true, message: "0啟用   1禁用不能為空", trigger: "blur" }],period: [{ required: true, message: "保質(zhì)期不能為空", trigger: "blur" }],purPrice: [{ required: true, message: "預(yù)計(jì)采購(gòu)價(jià)格不能為空", trigger: "blur" }],wholePrice: [{ required: true, message: "建議批發(fā)價(jià)不能為空", trigger: "blur" }],retailPrice: [{ required: true, message: "建議零售價(jià)不能為空", trigger: "blur" }],unitCost: [{ required: true, message: "單位成本不能為空", trigger: "blur" }],supplierId: [{ required: true, message: "供應(yīng)商id不能為空", trigger: "blur" }],brandId: [{ required: true, message: "品牌id不能為空", trigger: "blur" }],attr1: [{ required: true, message: "屬性1：季節(jié)不能為空", trigger: "blur" }],attr2: [{ required: true, message: "屬性2：分類(lèi)不能為空", trigger: "blur" }],attr3: [{ required: true, message: "屬性3：風(fēng)格不能為空", trigger: "blur" }],attr4: [{ required: true, message: "屬性4：年份不能為空", trigger: "blur" }],attr5: [{ required: true, message: "屬性5：面料不能為空", trigger: "blur" }],linkUrl: [{ required: true, message: "外鏈url不能為空", trigger: "blur" }],lowQty: [{ required: true, message: "最低庫(kù)存不能為空", trigger: "blur" }],highQty: [{ required: true, message: "最高庫(kù)存不能為空", trigger: "blur" }],province: [{ required: true, message: "發(fā)貨地省不能為空", trigger: "blur" }],city: [{ required: true, message: "發(fā)貨地市不能為空", trigger: "blur" }],town: [{ required: true, message: "發(fā)貨地區(qū)不能為空", trigger: "blur" }],synchronousId: [{ required: true, message: "同步編號(hào)不能為空", trigger: "blur" }],declareCnName: [{ required: true, message: "申報(bào)中文名不能為空", trigger: "blur" }],declareEnName: [{ required: true, message: "申報(bào)英文名不能為空", trigger: "blur" }],declarePrice: [{ required: true, message: "申報(bào)價(jià)格不能為空", trigger: "blur" }],declarePriceUnit: [{ required: true, message: "申報(bào)價(jià)格單位：日元，美元不能為空", trigger: "blur" }],productBrand: [{ required: true, message: "產(chǎn)品品牌不能為空", trigger: "blur" }],manufacturer: [{ required: true, message: "制造商不能為空", trigger: "blur" }],customsCode: [{ required: true, message: "海關(guān)編碼不能為空", trigger: "blur" }],specificationModel: [{ required: true, message: "規(guī)格型號(hào)不能為空", trigger: "blur" }],productAttribute: [{ required: true, message: "產(chǎn)品屬性：如普貨，含電池不能為空", trigger: "blur" }],productLength: [{ required: true, message: "產(chǎn)品尺寸：長(zhǎng)不能為空", trigger: "blur" }],productWidth: [{ required: true, message: "產(chǎn)品尺寸：寬不能為空", trigger: "blur" }],productHeight: [{ required: true, message: "產(chǎn)品尺寸：高不能為空", trigger: "blur" }],productWeight: [{ required: true, message: "產(chǎn)品重量不能為空", trigger: "blur" }],purLink: [{ required: true, message: "采購(gòu)鏈接不能為空", trigger: "blur" }],purLink2: [{ required: true, message: "采購(gòu)鏈接2不能為空", trigger: "blur" }],supplierId2: [{ required: true, message: "備選供應(yīng)商不能為空", trigger: "blur" }],purPrice2: [{ required: true, message: "采購(gòu)價(jià)2不能為空", trigger: "blur" }]}
});const { queryParams, form, rules } = toRefs(data);/** 表單重置 */
const reset = () => {form.value = {...initFormData};goodsFormRef.value?.resetFields();
}/** 修改按鈕操作 */
const handleUpdate = async (row?: GoodsVO) => {reset();const _id = row?.id || ids.value[0]const res = await getGoods(_id);Object.assign(form.value, res.data);dialog.visible = true;dialog.title = "修改OMS商品";}

數(shù)據(jù)就回顯出來(lái)了