element-ui级联选择器控制下拉

最新推荐文章于 2025-09-24 12:41:25 发布

原创最新推荐文章于 2025-09-24 12:41:25 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

个人笔记专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种在级联选择器中实现选中项后自动隐藏下拉框的方法。通过修改级联选择器的显示状态，可以提升用户体验，特别是在单选场景下。使用 Vue.js 的 Element UI 组件库进行实现。

需求是控制可以多级选中的级联选择器选中单选框后自动隐藏下拉框。

<el-cascader
    ref="safeTypes"
    :disabled="isView"
    :options="securityType"
    v-model="safeTypes"
    @change="getSafeType"
    :props="{
    label: 'dictName',
    value: 'dictValue',
    checkStrictly: true
    }"
    placeholder="请选择"
></el-cascader>


// js部分
getSafeType(arr: string[]) {
    (this.$refs.safeTypes as any).dropDownVisible = false;
}