element-ui销毁子组件的方法

原文地址：https://blog.csdn.net/lisongyue123/article/details/104059406

方法一：在子组件中加v-if=“dialogCreateVisible”，添加完信息关闭弹出框之后，再次添加信息时弹出框中各组件的内容为空。

<el-dialog title="添加员工信息" :visible.sync="dialogCreateVisible">
      <Add ref="addInformation" v-if="dialogCreateVisible"></Add>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCreateVisible = false">取 消</el-button>
        <el-button type="primary" :loading="createLoading" @click="addClick">确 定        
        </el-button>
      </div>
</el-dialog>

方法二：在添加信息的方法中用“this.xxx = null”清空数据。

createStaff() {
      let isPhone = this.phone();
      console.log(this.create.sex);
     let addressTest = this.create.address[0] + '/' + this.create.address[1];
      console.log(addressTest);
    if(isPhone){
      this.$http({
        method: "post",
        url: "/api/addStaff",
        params: {
          department: this.create.department,
          office: this.create.office,
          id: this.create.id,
          staffName: this.create.staffName,
          sex: this.create.sex,
          entryDate: this.create.entryDate,
          address: addressTest,
          phoneNumber: this.create.phoneNumber
        }
      })
        .then(response => {
          console.log(response.data);
          this.dialogCreateVisible = false;
          this.createLoading = false;
          this.create.office = null;
          this.create.id = null;
          this.create.staffName = null;
          this.create.sex = null;
          this.create.entryDate = null;
          this.create.address = null;
          this.create.phoneNumber = null;
          this.getTablePage();
        })
        .catch(function(error) {
          console.log(error);
        });
    } else {console.log("error phone");}
 }