Elemntui's select+tree implements the search function

demand ：
1, Click drop down , The tree structure appears , Check echo in select In the box
2, You can click Cancel , To choose ,
3, Support in select Match the input words in


The front-end code ：

<el-col :span="12">
  <el-form-item label=" department " prop="deptName">
    <el-select id="deptNameId" 
       v-model="certificateValue.deptName"
       placeholder=" Please select " 
       filterable
      :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>

data：

data(){
    
	return{
    
		certificateValue: {
    
		        deptName: '',
		        deptId: ''
		}
	}
}

methods:

methods:{
    
	// This method is a custom search method ,api In the introduction ,
	// It should be noted that , Also set filterable attribute , This attribute means that the search function is enabled 
	filterTreeDate(val) {
    
	      this.certificateValue.dept = val
	      this.$refs.treeForm.filter(val)
	    },
	/** *  The method for  Tree  Node filtering method ,  When you need to filter nodes , call  Tree  Example of filter Method ,  The parameter is keyword . It should be noted that , You need to set filter-node-method, Value is required   Filtered value , It can be understood as the value passed by the page . * @param value * @param data * @returns {boolean} */
    filterNode(value, data) {
    
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
     /** *  The method for select The method triggered when the drop-down box of appears or hides ,  It appears as true, Hidden as false,  This is to solve the problem when there are filter conditions , Click the drop-down again ,  The problem is that the data filtered last time is not all the data ,  So when I was hiding , Empty the filter conditions ,  This can avoid the problem that the data is still the data filtered last time   When we click the drop-down again , What appears is all the data  * @param val */ 
    changeValue(val) {
    
      if (!val) {
    
        this.$refs.treeForm.filter('')
      }
    },
     /** *  Triggered when the check box is clicked , Passed two objects  *  In turn ： *  Pass to  data  The object corresponding to the node in the array of property 、 Tree currently selected objects , *  The currently selected state object of the tree contains checkedNodes、checkedKeys、 halfCheckedNodes、halfCheckedKeys  Four properties  * @param data * @param checked */
    handleCheckChange(data, checked) {
    
      this.certificateValue.deptName = data.label
      this.certificateValue.deptId = data.id
      if (checked.checkedKeys !== '') {
    
        this.checkedId = data.id
        /** *  adopt  keys  Set the currently selected node , *  It should be noted that the method must be set  node-key  attribute  *  This method takes two parameters , * 1.  Check the... Of the node  key  Array of  * 2. boolean  Parameters of type , *  If the parameter is  true  Then only the selected state of the leaf node is set , *  The default value is  false */
        this.$refs.treeForm.setCheckedKeys([data.id], true)
      } else {
    
        this.$refs.treeForm.setCheckedKeys([])
      }
    },
}