在网上查找说是加this.$forceUpdate()
<el-form-item :label="$t('table.password')" prop="password"><el-input v-model="userData.password" :disabled="updateStatus" @input="change($even)" /></el-form-item><el-form-item :label="$t('table.validPwd')" prop="validPwd"><el-input v-model="userData.validPwd" :disabled="updateStatus" /></el-form-item>// 写方法change(e){this.$forceUpdate()}
但是加完以后输入框校验出问题。问题肯定出在传值：
原始代码：
<template><el-formref="editFormRef":model="userData":rules="editFormRules"><el-form-item :label="$t('table.username')"><el-input v-model="userData.login" disabled /></el-form-item><el-form-item :label="$t('table.email')" prop="email"><el-input v-model="userData.email" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.firstName')"><el-input v-model="userData.firstName" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.lastName')"><el-input v-model="userData.lastName" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.password')" prop="password"><el-input v-model="userData.password" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.validPwd')" prop="validPwd"><el-input v-model="userData.validPwd" :disabled="updateStatus" /></el-form-item><el-form-item><el-button v-if="updateStatus" type="primary" @click="changeUpdateStatus">{{ $t('table.edit') }}</el-button><el-button v-if="!updateStatus" @click="editDialogCancle">{{ $t('table.cancel') }}</el-button><el-button v-if="!updateStatus" type="primary" @click="editUserInfo">{{ $t('table.submit') }}</el-button></el-form-item></el-form></template><script>import { passwordValid, emailValid, notNullValid } from '@/utils/validate'import { updateUser, getUserByName } from '@/api/user'export default {props: {user: {type: Object,default: () => {return {name: '',avatar: '',role: ''}}}},data() {const validatePass = (rule, value, callback) => {if (this.userData.validPwd !== this.userData.password) {callback(new Error('两次输入密码不一致!'))} else {callback()}}return {userData: {password: '',validPwd: ''},updateStatus: true,editFormRules: {email: emailValid,password: passwordValid,validPwd: [{ validator: validatePass, trigger: 'blur' }],role: notNullValid}}},mounted() {this.getUser()},methods: {async getUser() {this.userData = await getUserByName(this.user.name)this.userData.password = ''this.userData.validPwd = ''},changeUpdateStatus() {this.updateStatus = false},editDialogCancle() {this.getUser().then(() => {this.$refs.editFormRef.validate(async valid => {if (!valid) return})})this.updateStatus = true},// 修改用户信息并提交editUserInfo() {this.$refs.editFormRef.validate(async valid => {if (!valid) returnlet pwd = ''if (this.userData.password === '' || this.userData.password === undefined) {pwd = '@ad@cc@123$!@'} else {pwd = this.userData.password}delete this.userData.passworddelete this.userData.validPwdupdateUser(this.userData, pwd).then(() => {this.getUser()this.updateStatus = truethis.$message.success('Update Success')})})}}}</script>
将上述代码的pwssword 和validPwd 的初始传入的值删除后解决了此问题：将红色圈的地方删除
修改后代码如下：
<template><el-formref="editFormRef":model="userData":rules="editFormRules"><el-form-item :label="$t('table.username')"><el-input v-model="userData.login" disabled /></el-form-item><el-form-item :label="$t('table.email')" prop="email"><el-input v-model="userData.email" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.firstName')"><el-input v-model="userData.firstName" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.lastName')"><el-input v-model="userData.lastName" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.password')" prop="password"><el-input v-model="userData.password" :disabled="updateStatus" /></el-form-item><el-form-item :label="$t('table.validPwd')" prop="validPwd"><el-input v-model="userData.validPwd" :disabled="updateStatus" /></el-form-item><el-form-item><el-button v-if="updateStatus" type="primary" @click="changeUpdateStatus">{{ $t('table.edit') }}</el-button><el-button v-if="!updateStatus" @click="editDialogCancle">{{ $t('table.cancel') }}</el-button><el-button v-if="!updateStatus" type="primary" @click="editUserInfo">{{ $t('table.submit') }}</el-button></el-form-item></el-form></template><script>import { passwordValid, emailValid, notNullValid } from '@/utils/validate'import { updateUser, getUserByName } from '@/api/user'export default {props: {user: {type: Object,default: () => {return {name: '',avatar: '',role: ''}}}},data() {const validatePass = (rule, value, callback) => {if (this.userData.validPwd !== this.userData.password) {callback(new Error('两次输入密码不一致!'))} else {callback()}}return {userData: {},updateStatus: true,editFormRules: {email: emailValid,password: passwordValid,validPwd: [{ validator: validatePass, trigger: 'blur' }],role: notNullValid}}},mounted() {this.getUser()},methods: {async getUser() {this.userData = await getUserByName(this.user.name)},changeUpdateStatus() {this.updateStatus = false},editDialogCancle() {this.getUser().then(() => {this.$refs.editFormRef.validate(async valid => {if (!valid) return})})this.updateStatus = true},// 修改用户信息并提交editUserInfo() {this.$refs.editFormRef.validate(async valid => {if (!valid) returnlet pwd = ''if (this.userData.password === '' || this.userData.password === undefined) {pwd = '@ad@cc@123$!@'} else {pwd = this.userData.password}delete this.userData.passworddelete this.userData.validPwdupdateUser(this.userData, pwd).then(() => {this.getUser()this.updateStatus = truethis.$message.success('Update Success')})})}}}</script>
