国内做服装趋势的网站,兴力网站建设,可以定制衣服的软件,做单页网站价格前提 页面是个列表页#xff0c;需要实现增删改查#xff0c;新增和修改使用表单提交
关键代码如下
// html部分#xff0c;新增、修改的表单
el-dialogv-modeldialogVisible2:titleaddTitlewidth600classupdate-shujuji-d…前提 页面是个列表页需要实现增删改查新增和修改使用表单提交
关键代码如下
// html部分新增、修改的表单
el-dialogv-modeldialogVisible2:titleaddTitlewidth600classupdate-shujuji-dialogel-form :modeladdForm :rulesrules label-widthauto stylemax-width: 600px refformRefel-form-item label字典类型 propdictTypeel-select v-modeladdForm.dictType :disabledtrueel-option :labelitem.dictType:valueitem.dictType v-foritem in selectList :keyitem.dictType/el-option/el-select/el-form-itemel-form-item label数据标签 propdictLabelel-input v-modeladdForm.dictLabel placeholder数据标签//el-form-itemel-form-item label数据键值 propdictValueel-input v-modeladdForm.dictValue placeholder数据键值//el-form-itemel-form-item label样式属性 propcssClassel-input v-modeladdForm.cssClass placeholder样式属性//el-form-itemel-form-item label显示排序el-input-number v-modeladdForm.dictSort controls-positionright :min0 :max1000/el-input-number/el-form-itemel-form-item label回显样式el-select v-modeladdForm.listClassel-option :labelitem.label:valueitem.value v-foritem in huixianStyle :keyitem.value/el-option/el-select/el-form-itemel-form-item label备注el-input typetextarea v-modeladdForm.remark/el-input/el-form-item/el-formtemplate #footerdiv classdialog-footerel-button clickdialogVisible2 false取消/el-buttonel-button typeprimary clickaddDictionaryDataFn确定/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: 数据标签不能为空, trigger: blur }],dictValue: [{ required: true, message: 数据键值不能为空, 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 }// 修改时回显数据}}}遇到的问题 乍一看以上代码逻辑上没问题但是修改数据后刷新列表发现列表数据确实是修改后的了此时再次点击修改会发现修改弹框中的数据并没有更新还是以前的旧数据很费解。最后才发现问题所在修改时给表单赋值回显时需要写在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 }// 修改时回显数据proxy.$refs.formRef.resetFields();})}}
