关于vue使用el-cascader获取值的问题-后续【超详细】

Lavandula angustifolia.

已于 2024-03-14 10:17:21 修改

阅读量664

点赞数 3

分类专栏： vue 文章标签： vue.js javascript elementui

于 2024-03-14 10:15:25 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45955391/article/details/136559122

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文解答了在Vue项目中使用el-cascader组件时遇到的三个问题：如何获取级联值，如何回显数据，以及在多选模式下如何限制最大选择数量。作者提供了相应的代码示例和解决方案。

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

要解决的3个问题

问题1. 通过vue 的el-cascader组件，如何获取到级联值的信息？
1.1 可以选则多个级联选项的情况【多选】
1.2 单选的情况

问题2. 如何回显信息？

问题3. 多选情况下，如何限制最大可选择的个数

问题1，2 的解决方案可以看上篇噢点这里直接跳转~

问题3的解决方案，话不多说直接上代码

<div class="my-form-row">
   <el-form-item class="profession" prop="speciality">
         <el-cascader ref="mycascader" @change="changeCasc"  v-model="form.speciality" :options="specialityList" :props="deptsProps" clearable style="width: 504px;"></el-cascader>
     </el-form-item>
 </div>

data(){
	// cascader 属性
	deptsProps: {
		value: "code",
		label: "name",
		children: 'children',    //子元素字段名
	    multiple: true,
	    expandTrigger: 'hover',
	},
	
	form:{
       speciality:[]
   },
   
   specialityList: [],         // 申请专业列表[从后端获取的数据，并处理成树形结构的列表]

}

我们这里就是直接简单粗暴，用watch监听el-cascader双向绑定的值
具体的如下

watch:{
            'form.speciality':{
                deep:true,
                handler(newValue,oldValue){
                    if(newValue.length>5){
                        this.$message.error("最多只支持选择5项")
                        this.$nextTick(()=>{
                            this.form.speciality=oldValue
                        })
                    }
                }
            }
        },