element-UI级联选择器(Cascader)获取label值

最新推荐文章于 2024-07-21 19:19:15 发布

原创

最新推荐文章于 2024-07-21 19:19:15 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #javascript

本文介绍如何在Element-UI的Cascader组件中获取选中节点的label值，特别是最后一级节点的label。通过监听选中节点的变化，可以定制化获取所需信息。注意emitPath参数的使用，当其为false时，返回的将是单个节点的值。

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

<!--组件-->
<el-cascader
                            ref="cascaderDay"
                            @change = "changeDayValue"
                            v-model="dayWorkerLocation"
                            :options="allPersonTree"
                            clearable
                            :props="{ expandTrigger: 'hover',multiple: true,emitPath: false}"
                            :show-all-levels="false"></el-cascader>

//方法
 changeDayValue: function(nowData) {
                    var labelList = [];
                    var checkLabels = this.$refs['cascaderDay'].getCheckedNodes();
                    checkLabels.forEach(function(item) {
                        if(!item.hasChildren) {
                            labelList.push(item.label);
                        }
                    })
                    this.form.dayWorkerLocation = nowData.join(",");
                    this.form.dayWorker = labelList.join(",");