实现el-input, el-tree ,el-popover的结合

实现目标 : 实现el-input, el-tree ,el-popover的结合

 <el-form-item label="部门名称" prop="selectAreaName">
     <el-popover placement="bottom" width="200" trigger="click">
         <div class="treeNode">
             <el-tree 
                      :default-checked-keys="isNationwide ? [0] : []" 
                      :data="nationwideData" show-checkbox node-key="value" 
                      :props="defaultProps" @check="nationwide">
             </el-tree>
             <el-tree
                      style="height:300px;width: 180px;overflow:auto"
                      :default-checked-keys="defaultArr"
                      :data="regions"
                      check-strictly
                      :show-checkbox="!isNationwide"
                      node-key="value"
                      ref="tree"
                      :props="defaultProps"
                      @check="check">
             </el-tree>
         </div>
         <el-input 
                   clearable slot="reference" type="text" 
                   οninput="value=value.replace(/[^\s]/g,'')"  
                   class="selectAreaName" size="medium" style="width: 230px;"
                   v-model.trim="ruleForm.selectAreaName" placeholder="请选择区域"  
                   @clear="handleIptClear"></el-input>
     </el-popover>
</el-form-item>

思路: 在el-popover外定义一个输入框el-input，使用slot属性将其作为el-popover的触发源插槽，实现点击输入框即可弹出树形选择器的效果。使用v-model属性将输入框的值绑定到Vue实例的ruleForm.selectAreaName属性上，实现输入框内容的双向绑定。
rm.selectAreaName`属性上，实现输入框内容的双向绑定。