element ui使用级联选择器el-cascader封装下拉框

最新推荐文章于 2025-03-27 15:33:54 发布

昵称已存在lxttttt

最新推荐文章于 2025-03-27 15:33:54 发布

阅读量2.4k

点赞数

分类专栏： vue element-ui 文章标签： ui vue.js elementui

本文链接：https://blog.youkuaiyun.com/weixin_43238931/article/details/121938980

版权

本文介绍如何使用Element UI的el-cascader组件封装下拉框，并解决用户体验问题。通过添加自定义指令处理外部点击事件，调整CSS使整个行可点击，并配置props以适应现有数据结构。

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

之前项目中使用drownmenu封装下拉框，后面出现了一系列问题，用户体验感很不好。现在重新使用cascader重新封装下拉框组件。

整体下拉框效果：

在这里插入图片描述

使用说明

menu - Array - 必选参数
  menu: [{
   
    id: '', 可选，每个选项的唯一标识，建议加上
    title: '', 必选，选项文本内容
    constant: Any Type, 可选，当需要传递单个参数时直接传入，需要传入多个参数时通过对象的形式传入
    type: 'file', 可选，当type的值为'file'时为导入功能，方法自动传入三个参数，分别为response, file, fileList（参考el-upload文件上传成功时的钩子on-success）
    accept: '', 可选，导入功能文件类型限制
    child: [] 可选，子选项
  }]
text - String - 可选参数（按钮文字）
iconClass - String - 可选参数（按钮图标）

使用范例

<cascader :menu="menu" icon-class="wheel" text="批量" />

menu: [{
   
  title: 'test1',
  methods: this.func1,
  constant: true
}, {
   
  title: 'test2',
  methods: this.func2,
  constant: {
    param1: 'param1', param2: 'param2' }
}, {
   
  title: 'test3',
  methods: this.func3

最低0.47元/天解锁文章