解決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>