el-formフォームで注意すべき問題(フォームのリフレッシュ、ルールの設定、空でないコミット)

1955 ワード

フォームの提出が完了すると、問題が発生します.
フォームがコミットされた後もデータはリフレッシュされず、前回コミットされたデータは保持されます.
初めてクリックして新しいデータを記入したり、データを修正したりした後、もう一度この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修飾子を追加する必要があります.そうしないと、エラーが発生します.