Elemtnui select control combined with tree control to realize user-defined search method

Business needs : You can select data from the drop-down box , You can also customize your search .
Front end effect ：
1： Select... From the drop-down box

2： Custom search

Code implementation ：
1. First of all, we need to use select Controls and tree Control , stay select Control tree Control .
2. Turn on select Control , That is to say filterable, Then you need to customize the search method , That is to say filter-method This method .
3. Listen for the appearance and hiding of the drop-down box , That is, whether to pull down ,visible-change Method can be implemented .
4：tree Control filter method , That is, filter tree nodes through keywords ,elementui Of tree Control has instances ,filter-node-method Is the method of filtering .
Specific code ：

<el-col :span="12">
 <el-form-item label=" department " prop="deptName">
   <el-select id="deptNameId" 
	   v-model="certificateValue.deptName"
	   filterable placeholder=" Please select "
	   :filter-method="filterTreeDate" 
	   @visible-change="changeValue($event)">
       <el-option style="height: auto" value="deptName">
          <el-tree
            ref="treeForm"
            :data="treeDatalist"
            :props="defaultProps"
            default-expand-all
            node-key="id"
            show-checkbox
            check-strictly
            :filter-node-method="filterNode"
            @check="handleCheckChange"
           />
       </el-option>
    </el-select>
  </el-form-item>
</el-col>

methods in ：

	//  Custom filter method 
	filterTreeDate(val) {
    
	 this.certificateValue.deptName = val
	 this.$refs.treeForm.filter(val)
	},
	//  The drop-down box appears / Trigger when hidden 
	changeValue(val) {
    
	if (!val) {
    
	    this.$refs.treeForm.filter('')
	  }
	},
	// Filter 
	filterNode(value, data) {
    
	   if (!value) return true
	   return data.label.indexOf(value) !== -1
	 },
	//  Single selection and assignment 
	handleCheckChange(data, checked) {
    
	  this.certificateValue.deptName = data.label
	  this.certificateValue.deptId = data.id
	  if (checked.checkedKeys !== '') {
    
	    this.checkedId = data.id
	    this.$refs.treeForm.setCheckedKeys([data.id], true)
	  } else {
    
	    this.$refs.treeForm.setCheckedKeys([])
	  }
	}