点击编辑按钮后,实现数据回显方法
这里是解决问题的关键!!!
处理方法:将表单中的值先转化为字符串,然后转化为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>