element el-cascader 级联选择器多选限制个数

最新推荐文章于 2025-05-08 18:25:05 发布

ur home

最新推荐文章于 2025-05-08 18:25:05 发布

阅读量7.2k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： elementUI 文章标签： elementui

本文链接：https://blog.youkuaiyun.com/wz_coming/article/details/117219900

elementUI 专栏收录该内容

7 篇文章

订阅专栏

博客内容涉及前端UI组件的使用，特别是`el-cascader`组件的配置，用于实现级联选择并限制最多选择5项的功能。当用户尝试超过限制时，会显示警告消息并回滚选择至之前的值。此部分代码主要关注前端表单验证和用户体验。

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

<el-cascader
 v-model="formModelData.address"
 :show-all-levels="false"
 :collapse-tags="true"
 :options="options"
 :props="{ multiple: true, checkStrictly: true }"
 :size="size"
 :clearable="true"
>
</el-cascader>

@Watch('formModelData.address')
    private addressWatch(newVal: any, oldVal: any) {
      if (newVal.length > 5) {
        this.$message({
          message: '最多只支持选择5项',
          duration: 1500,
          type: 'warning'
        })
        this.$nextTick(() => {
          this.formModelData.address= oldVal;
        })
      }
    }