解决vue表单回显数据无法修改的问题

 参考：https://blog.csdn.net/weixin_44615754/article/details/106675852?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242

　　点击编辑按钮后，实现数据回显方法

这里是解决问题的关键！！！

处理方法：将表单中的值先转化为字符串，然后转化为json对象

JSON.stringify()：将值转换为 JSON 字符串。

JSON.parse() ：将一个 JSON 字符串转换为对象。

editCustomer(index, row, tableData) {
    this.ruleForm.updateData = JSON.parse(JSON.stringify(this.ruleForm));
    this.ruleForm.updateData.custId = tableData[index].custId
    this.ruleForm.updateData.custName = tableData[index].custName
    this.ruleForm.updateData.custSource = tableData[index].custSource
    this.ruleForm.updateData.custSex = tableData[index].custSex
    this.ruleForm.updateData.custTel = tableData[index].custTel
    this.ruleForm.updateData.custEmail = tableData[index].custEmail
    this.ruleForm.updateData.custAddress = tableData[index].custAddress
}

修改表单

<el-dialog title="修改客户" :visible.sync="updateWindow">
    <el-form label-width="100px" class="demo-ruleForm"
        size="mini">
        <el-form-item label="客户ID" prop="custId">
        <el-input v-model="ruleForm.updateData.custId" readonly></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="custName">
        <el-input v-model="ruleForm.updateData.custName"></el-input>
        </el-form-item>
        <el-form-item label="客户来源" prop="custSource">
        <el-input v-model="ruleForm.updateData.custSource"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="custSex">
        <el-input v-model="ruleForm.updateData.custSex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="custTel">
        <el-input v-model="ruleForm.updateData.custTel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="custEmail">
        <el-input v-model="ruleForm.updateData.custEmail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="custAddress">
        <el-input v-model="ruleForm.updateData.custAddress"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="updateForm('ruleForm')">确认修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="updateWindow = false">取 消</el-button>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            </div>
            </el-dialog>

 

标签：index,vue,回显,表单,ruleForm,updateData,JSON,tableData
来源： https://www.cnblogs.com/hahahakc/p/13706363.html