el-cascader组件限制选择

最新推荐文章于 2025-09-25 00:02:33 发布

原创最新推荐文章于 2025-09-25 00:02:33 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#element #vue

框架与工程化专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何在Vue项目中使用watch监听el-cascader组件的用户选择变化，并通过flat、set等方法处理数组，确保选项数量不超过限制，同时展示错误提示并恢复原值。

//卸载watch里面，去监听el-cascader绑定数组的长度
watch: {
        'paint.paintFrom.format'(newValue, oldValue) {
            let _list = "el-cascader绑定的:options数组";
            //得到用户选择的最新options
            //然后使用set，flat，Array函数去转换
            /*
			el-cascader会帮你返回一个二维数组：[[16,19],[16,20],[16,21]]
			flat()  - 数组偏平化
			set  数组去重
			Array.from 转数组
			*/
            let _new = Array.from(new Set(newValue.flat())); // [16,19,20,21]
            let arr = [];
            _list.forEach(cItem => {
                _new.includes(cItem.id) && arr.push(cItem);//判断是否存在，存在就push
            });
            if (arr.length > 2) {
                this.$message.warning(this.watcher_rules.format.title);
                this.$nextTick(() => {
                    this.paint.paintFrom.format = oldValue;
                })
            }
        }
    },