Application of clearable attribute of el-select

1. Description of the problem: I encountered a problem during the test today. When a new patient is admitted to the hospital, a form will pop up. You need to fill in everything on the form before submitting it. It includes departments and doctors. After selecting a department, select the doctor corresponding to the department. There is a problem in this way, because the department and the doctor are selected through the drop-down box. If the department is modified, the doctor needs to be cleared, but I directly write this in the method:

_this.Form.W_ID ='';

No, the doctor didn't clear it. Later, when I checked element-ui, I saw its clearable attribute. Then we can use this property to solve the problem. Here is the code for the form:

<el-form-item label="转入医生" prop="W_ID">
     <el-select v-model="Form.W_ID" :clearable="clearDoctor"@change="InDoctorSelectChange" size="small" style="width:100%;">
        <el-option v-for="(item, index) in InDoctorOptions" :key="item.ID":label="item.w_name" :value="(item.ID + '')"></el-option>
     </el-select>
 </el-form-item>

The following is the method of clearable binding:

const clearDoctor = function(){
	_this.Form.W_ID = '';
}

In this way, clearing is realized through the clearable binding method, as long as the method is called when the department is changed.