elemtnui select控件结合树形控件 实现自定义搜索方法

业务需求: 可以从下拉框中选择数据，也可以自定义搜索。
前端效果：
1：从下拉框中选择

2：自定义搜索

3：单选并赋值：也就是选中那个就回显那个

代码实现：
1.首先需要用到select控件和tree控件，在select控件中嵌套tree控件。
2.开启select控件的搜索功能，也就是filterable，然后需要自定义搜索方法，也就是filter-method这个方法。
3.监听下拉框的出现与隐藏，也就是是否下拉，visible-change方法就可以实现。
4：tree控件的过滤方法，也就是通过关键字过滤树节点，elementui的tree控件中有实例，filter-node-method就是过滤的方法。
5：单选并赋值的实现是使用了tree控件check方法，当复选框被点击的时候触发，这个方法会传递两个参数，具体的可以参考elementui官网tree控件的api。
具体代码：

<el-col :span="12">
 <el-form-item label="部门" prop="deptName">
   <el-select id="deptNameId" 
	   v-model="certificateValue.deptName"
	   filterable placeholder="请选择"
	   :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中：

	// 自定义过滤方法
	filterTreeDate(val) {
	 this.certificateValue.deptName = val
	 this.$refs.treeForm.filter(val)
	},
	// 下拉框出现/隐藏时触发
	changeValue(val) {
	if (!val) {
	    this.$refs.treeForm.filter('')
	  }
	},
	//过滤
	filterNode(value, data) {
	   if (!value) return true
	   return data.label.indexOf(value) !== -1
	 },
	// 单选并赋值
	 /**
     * 当复选框被点击的时候触发,传递了两个对象
     * 依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，
     * 树目前的选中状态对象包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
     * @param data
     * @param checked
     */
	handleCheckChange(data, checked) {
	  this.certificateValue.deptName = data.label
	  this.certificateValue.deptId = data.id
	  if (checked.checkedKeys !== '') {
	  /**
         * 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
         * 该方法接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，
         * 参数若为 true 则仅设置叶子节点的选中状态，
         * 默认值为 false
         */
	    this.checkedId = data.id
	    this.$refs.treeForm.setCheckedKeys([data.id], true)
	  } else {
	    this.$refs.treeForm.setCheckedKeys([])
	  }
	}

描述有误的地方欢迎大家指正，大家有问题可加qq 876942434。一起进步~