ElementUI中checkbox和select同时使用，选中状态冒泡问题，以及select相关

最新推荐文章于 2025-04-21 14:42:07 发布

enmmmm

最新推荐文章于 2025-04-21 14:42:07 发布

阅读量3.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：散知识文章标签： vue.js

本文链接：https://blog.csdn.net/enmmmm/article/details/107159546

散知识专栏收录该内容

2 篇文章

订阅专栏

在Vue.js项目中，使用ElementUI时遇到checkbox内嵌select的问题，当点击select选择值时会误触checkbox的选中状态。原因是事件冒泡导致，通过在select上使用事件修饰符.prevent阻止冒泡解决了此问题。此外，还介绍了如何实现可输入的select框，包括在输入不存在的值时保持输入状态和避免显示无匹配数据的选项。

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

checkbox中嵌套select

在项目中有需求是需要在checkbox中包含select下拉框，

//例如：
<el-checkbox label="time">
  <span class="mr5">超过</span>
    <el-form-item prop="fileMonth">
      <el-select v-model="autoClear.fileMonth">
        <el-option v-for="item in month" :key="item" :label="item" :value="item">
         </el-option>
       </el-select>
     </el-form-item>个月
 </el-checkbox>

以上就是checkbox中包含一个select的结构，虽然实现了，但会有一个问题：在点击select下拉框选值时，会触发checkbox的选中与取消选中。这是因为select的点击事件冒泡到checkbox，因此，需要在select上阻止冒泡。

//在select上定义点击事件，并加上.prevent事件修饰符
//因为这个点击事件主要是利用.prevent组织冒泡，因此preventSuffix这个方法是个空函数，没有其他操作
<el-select v-model="autoClear.fileMonth" @click.native.prevent="preventSuffix">
  <el-option v-for="item in month" :key="item" :label="item" :value="item"></el-option>
</el-select>

注意：在这里只能使用事件修饰符.prevent来阻止冒泡。

因为开始在preventSuffix中使用e.stopPropagation()来阻止冒泡没有生效（不知道原因，如有了解，请指教）

可输入的select框

实现上述需要可以使用elementUI中可搜索的select框

<el-select v-model="value" filterable placeholder="请选择">
  <el-option v-for="item in options" :key="item.value" :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

如果直接使用的话，输入一个在option中不存在的值，会有两个问题：

1、失去焦点后，输入框中输入的值丢失，即没有实现可以输入的select

解决：定义失去焦点blur事件，失去焦点后给输入框赋值

2、options会展示无匹配数据。

解决：利用filter-method（使用其他的搜索逻辑）方法

<el-select v-model="item.threshold" filterable placeholder="请选择">
  <el-option v-for="item in options" :key="item.value" :label="item.label"
    :value="item.value" @blur="selectBlur(id,$event)" :filter-method="selectVisible">
  </el-option>
</el-select>

/**
  * @description 失焦时赋值
  * @param {Object} e 事件
  */
selectBlur(id,e) {
  let num = e.target.value.match(/\d/ig);
  if(num && num.join('') > 1 && num.join('') <= 90) {
    this.editData.conditionList.forEach(item => {
      if(item.id === id){
       item.threshold = num.join('');
      }
    });
  }
}
/**
  * @description 输入一个不在option的选项时，不展示'无匹配数据'
  */
selectVisible() {
}