使用 el-dialog 的最佳实践是什么？

Z时代
2024-02-27
分类：IT

直接用 v-if 去控制 el-dialog 的显示会不会更好？
这样就不用在每次关闭的时候去重置表单和相关数据了，也不用考虑回显数据的赋值时机。

props:{
    visible: {
      type: Boolean,
      require: true,
      default: false,
    },
    id: {
      type: Number,
      require: true,
      default: 0,
    },
    defaultData:{
      type: Object,
      require: true,
      default: ()=>({}),
    }
}
watch:{
    visible(newVal){
        if(newVal && this.id){
            this.$nextTick(this.initForm(this.defaultData));
        }
    }
},
methods:{
    initForm(data){
        this.form.id=data.id
        this.form.name=data.name
        this.form.age=data.age
        this.form.gender=data.gender
    },
     closeDialog(update = false) {
      if (!this.visible) return;
      this.resetForm();
      this.$emit("close", update);
    },
    resetForm() {
      this.$refs.form.resetFields();
      // resetFields() 只能重置表单数据，其他数据还需要手动重置
      // 且由于要使用 resetFields()，表单数据回显也需要延后
      this.isIndeterminate = false;
      this.checkAllCity = false;
      this.form.id = 0;
    },}