前提
頁面是個列表頁，需要實(shí)現(xiàn)增刪改查，新增和修改使用表單提交

關(guān)鍵代碼如下

// html部分，新增、修改的表單
<el-dialogv-model="dialogVisible2":title="addTitle"width="600"class="update-shujuji-dialog"><el-form :model="addForm" :rules="rules" label-width="auto" style="max-width: 600px" ref="formRef"><el-form-item label="字典類型" prop="dictType"><el-select v-model="addForm.dictType" :disabled="true"><el-option :label="item.dictType":value="item.dictType" v-for="item in selectList" :key="item.dictType"></el-option></el-select></el-form-item><el-form-item label="數(shù)據(jù)標(biāo)簽" prop="dictLabel"><el-input v-model="addForm.dictLabel" placeholder="數(shù)據(jù)標(biāo)簽"/></el-form-item><el-form-item label="數(shù)據(jù)鍵值" prop="dictValue"><el-input v-model="addForm.dictValue" placeholder="數(shù)據(jù)鍵值"/></el-form-item><el-form-item label="樣式屬性" prop="cssClass"><el-input v-model="addForm.cssClass" placeholder="樣式屬性"/></el-form-item><el-form-item label="顯示排序"><el-input-number v-model="addForm.dictSort" controls-position="right" :min="0" :max="1000"></el-input-number></el-form-item><el-form-item label="回顯樣式"><el-select v-model="addForm.listClass"><el-option :label="item.label":value="item.value" v-for="item in huixianStyle" :key="item.value"></el-option></el-select></el-form-item><el-form-item label="備注"><el-input type="textarea" v-model="addForm.remark"></el-input></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogVisible2 = false">取消</el-button><el-button type="primary" @click="addDictionaryDataFn">確定</el-button></div></template></el-dialog>// js部分import {onMounted, reactive, toRefs, ref, getCurrentInstance, watch, nextTick } from "vue";export default {name: "autoLabel",components: {},setup(props) {const formRef = ref(null);const state = reactive({dialogVisible2: false,addForm: {},addTitle: '新增字典類型',rules: {dictLabel: [{ required: true, message: '數(shù)據(jù)標(biāo)簽不能為空', trigger: 'blur' }],dictValue: [{ required: true, message: '數(shù)據(jù)鍵值不能為空', trigger: 'blur' }]}})// 修改const update = (row) => {state.addTitle = '修改字典類型';state.dialogVisible2 = true;nextTick(() => {proxy.$refs.formRef.resetFields();})let { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass } = row;state.addForm = { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass }// 修改時回顯數(shù)據(jù)}}}

遇到的問題
乍一看以上代碼，邏輯上沒問題，但是修改數(shù)據(jù)后，刷新列表，發(fā)現(xiàn)，列表數(shù)據(jù)確實(shí)是修改后的了，此時再次點(diǎn)擊修改，會發(fā)現(xiàn)修改彈框中的數(shù)據(jù)并沒有更新，還是以前的舊數(shù)據(jù)，很費(fèi)解。最后才發(fā)現(xiàn)問題所在，修改時給表單賦值回顯時需要寫在nextTick里，如下

// 修改const update = (row) => {state.addTitle = '修改字典類型';state.dialogVisible2 = true;nextTick(() => {let { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass } = row;state.addForm = { dictCode, dictLabel, dictType, dictValue, cssClass, dictSort, remark, listClass }// 修改時回顯數(shù)據(jù)proxy.$refs.formRef.resetFields();})}}