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

WKK_

已于 2023-11-30 17:37:49 修改

阅读量558

点赞数

文章标签： vue.js elementui javascript

于 2023-11-30 17:37:12 首次发布

本文链接：https://blog.csdn.net/weixin_53812239/article/details/134717957

版权

文章描述了如何在Vue中实现el-input与el-popover的交互，通过slot属性将el-input作为el-popover的触发源，同时利用v-model实现输入框与el-tree的选择内容双向绑定，以实现实时选择区域的动态效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述
实现目标 : 实现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`属性上，实现输入框内容的双向绑定。