el-formフォームで注意すべき問題(フォームのリフレッシュ、ルールの設定、空でないコミット)
1955 ワード
フォームの提出が完了すると、問題が発生します.
フォームがコミットされた後もデータはリフレッシュされず、前回コミットされたデータは保持されます.
初めてクリックして新しいデータを記入したり、データを修正したりした後、もう一度このdialogを開くと、前回のデータを携帯していることがわかります.これは実際にel-formコンポーネントで定義されています.
フォーム発行のルール
つまり
の
フォームのpropプロパティに特定のルールが表示されます.
次に、いくつかの属性をカスタマイズすることができます.ほとんどが空ではありません.また、数字の記入を完了する必要がありますか、記入できませんか.ここで規定し、propで設定することができます.
空でないコミット
そして提出する方法の中で
このうち
フォームがコミットされた後もデータはリフレッシュされず、前回コミットされたデータは保持されます.
初めてクリックして新しいデータを記入したり、データを修正したりした後、もう一度このdialogを開くと、前回のデータを携帯していることがわかります.これは実際にel-formコンポーネントで定義されています.
this.$refs['dataForm'].resetFields()
のresetFieldsメソッドで完成しています.この方法が使用できるのは前提があります.フォームごとにデータを作成するルールが必要ですフォーム発行のルール
つまり
の
:rules="dataRule"
、具体的にはdata()return{}のreturnの中で、dataRule: {
taskId: [{
required: true,
message: ' ',
trigger: 'blur'
}],
...
}
フォームのpropプロパティに特定のルールが表示されます.
次に、いくつかの属性をカスタマイズすることができます.ほとんどが空ではありません.また、数字の記入を完了する必要がありますか、記入できませんか.ここで規定し、propで設定することができます.
空でないコミット
そして提出する方法の中で
async dataFormSubmit(num) {
let valid = await this.$refs.dataForm.validate().catch(() => {
return util.$message.showInfo2(' ')
})
if (!valid) return
let data = {
taskType:num,
id: this.dataForm.id,
taskId: this.dataForm.taskId,
...
};
this.$axios.post('/pc/modeldefecrectificationnotice/save', data).then(res => {
this.dialogFormVisible = false;
this.$emit('refreshDataList')
}).catch((error) => {})
},
このうち
let valid = await this.$refs.dataForm.validate().catch(() => { return util.$message.showInfo2(' ') }) if (!valid) return
これらのコードはフォームの非空のコミットを完了したものですが、上記のコードを書き終わった後、メソッドヘッダにasync
修飾子を追加する必要があります.そうしないと、エラーが発生します.