el-cascader级联选择器手动赋值，input框不回显

接世界毁灭

已于 2023-07-20 11:38:51 修改

阅读量4.4k

点赞数 7

文章标签： vue.js 前端 elementui

于 2023-07-18 14:18:14 首次发布

本文链接：https://blog.csdn.net/weixin_44569565/article/details/131783147

版权

文章描述了一种在Vue项目中使用el-cascader组件时，结合el-input实现既可以选择已有地区，又支持手动输入自定义或不存在地区的解决方案。通过级联选择器的filterable属性配合自定义事件和CSS调整，创建了一个既能过滤已有选项，又能保存输入的新值的输入体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到一个需求，使用级联选择器选择已有地区，也支持手动输入（自定义或者没有的地区）。在网上搜索了好久没有相关文章，只有el-select相关的使用，可是又不能通用，只好自己摸索，最终实现啦！

el-cascader的filterable属性是可搜索，但是只能输入:options="regionOptions" 里存在的值。

比如我的"regionOptions" 里是省市区，我输入‘北京’，就可以显示相关数据，但是如果输入‘aaa’，就会显示无匹配数据⬇

并且失去焦点后，‘aaa’也会丢失。

那么又想使用级联panel里的值，又想输入之外的值并保存下来该怎么做呢？

大致思路：

1.在与级联组件同级的位置放置一个el-input标签，v-model与级联选择的绑定的变量相同，这样级联选择选什么都会赋给ei-input；

2.在外面用一个标签把他俩都包起来，我这里用的是li标签，给li标签绑定一个点击事件。

点击li标签，就触发级联选择的click事件，这样级联的panel就会弹出来；

3.用样式把级联的input框隐藏掉，把弹出的panel位置调整一下，使它对准在el-input的正上方就ok！

html

<li @click="showPanel('startPointId')">
  <el-input
    v-model="startPoint"
    placeholder="请输入"
  ></el-input>
  <el-cascader
    id="startPointId"
    :options="regionOptions"
    v-model="startPoint"
    @change="handleRegionChange"
    filterable
    :props="{value:'label'}"
  >
  </el-cascader>
</li>

showPanel(val){
   document.getElementById(val).click()
},

handleRegionChange(value){
   this.$emit('provincesValueChang',value)
}，

css

#startPointId {
  left: -190px;
  opacity: 0;
}

ps：可能会遇到只能点击不能输入的情况，是因为el-input被压到低下了，调整一下层级关系就可以，像这样。

最终效果：

升级！ （新增行id不重复，级联面板跟随el-input的位置走）

最后可以美化一下字符串的样式，从这样变到这样


    handleRegionChange(value){
       let val = value.toString().split(',').join('')
       this.startPoint = val
       this.$emit('provincesValueChang',value)
    }，