element ui Cascader 级联选择器 多选获得选中的id

该文章展示了一个Vue组件`el-cascader`的使用示例,用于实现组织结构的选择。组件配置包括宽度设置、可清除、类名、绑定值、数据源、属性设置以及多选和严格模式。`OrganizatioChoose`方法处理选择变化,将选中的节点值转换为后端需要的分隔字符串格式。

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

       <el-cascader
                style="width: 100%"
                clearable
                class="selectWidth"
                ref="cascaderRef"
                v-model="OrganizatioChooseList"
                //数据
                :options="standardDocOrganizationData"
                :props="cascader"
                multiple
                @change="OrganizatioChoose"
              ></el-cascader>

           data{
              return{
		            OrganizatioChooseList:[],
		            value :'',
,		            //改变label
			        cascader: {
			        value: "id",
			        label: "label",
			        multiple: true,
			        checkStrictly: true,
			      },
              }},
		  methods: {
			 OrganizatioChoose(val) {
			      this.$nextTick(() => {
			      	//获取选中的node
			        const checkList = this.$refs.cascaderRef
			          ? this.$refs.cascaderRef.getCheckedNodes()
			          : [];
			          //转换成"1;2;3" 后端需要的数据
			          this.value = checkList.length > 0 ? checkList.map((x) => x.data.id).join(";") : ""
			      });
	    		},
		  }
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值