el-cascader点击文字可选中去掉单选按钮选中后菜单收起自定义数据显示在选项中（已测有用）

原创

于 2021-10-29 15:56:08 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #elcascader #vue

这篇博客介绍了如何在Vue.js应用中使用Element UI的级联选择器组件，并解决样式生效问题。重点在于全局设置CSS样式以确保效果正确，同时展示了数据转换和事件监听的方法。在代码示例中，通过设置popper-class避免了样式冲突，并在选中后自动关闭菜单。此外，还涉及到了如何处理非标准的数据结构。

效果图
在这里插入图片描述
直接上代码：
注意：css样式一定要全局设置，不要写在scoped下（否则没效果）

<el-cascader
            v-model="form.classify"
            ref="cascader"
            :options="dataList"
            :props="defaultProps"
            clearable
            popper-class="cascader"
             @change="onSubmit"
          ></el-casc