vue3 el-cascader获取选中的label值
时间: 2023-08-18 15:34:23 浏览: 203
element-ui 关于获取select 的label值方法
要获取Vue3中el-cascader组件选中的`label`值,可以通过监听`change`事件,在事件处理函数中获取选中的`label`值。
例如:
```html
<template>
<el-cascader
v-model="selectedValue"
:options="options"
@change="handleChange"
placeholder="请选择"
clearable
></el-cascader>
</template>
<script>
export default {
data() {
return {
options: [{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}]
}]
}],
selectedValue: []
}
},
methods: {
handleChange(value, selectedOptions) {
const selectedLabels = selectedOptions.map(option => option.label)
console.log(selectedLabels)
}
}
}
</script>
```
在上面的代码中,我们在`el-cascader`组件上监听了`change`事件,并在事件处理函数中通过`selectedOptions`参数获取到了选中的所有`option`对象,然后通过`map`方法得到了所有选中`option`的`label`值,最后在控制台中输出了`selectedLabels`。
这样就可以获取到el-cascader组件当前选中的`label`值了。
阅读全文