饿了吗plus级联选择器如何获取label值
时间: 2024-02-27 13:59:03 浏览: 117
详解关于element级联选择器数据回显问题
饿了么 Plus 版的级联选择器(Cascader)可以通过 `change` 事件来获取选中的 label 值。在 `change` 事件中,会返回两个参数,一个是选中的值(value),另一个是选中的数据(selectedItems)。
其中,选中的数据(selectedItems)是一个数组,包含了所有选中的节点数据,每个节点数据包含了 label、value、children 等属性,可以根据需要来获取 label 值。
以下是一个简单的示例:
```html
<template>
<el-cascader-panel
:options="options"
@change="handleChange"
placeholder="请选择"
clearable
filterable
v-model="selectedValues"
></el-cascader-panel>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致"
},
{
value: "fankui",
label: "反馈"
}
]
}
]
}
],
selectedValues: []
};
},
methods: {
handleChange(selectedValues, selectedItems) {
// 获取选中的 label 值
const labels = selectedItems.map(item => item.label);
const selectedLabel = labels.join("/");
console.log(selectedLabel);
}
}
};
</script>
```
在上面的示例中,我们通过 `map` 函数获取了每个选中节点的 label 值,并使用 `join` 函数将它们拼接成了一个字符串。最终的结果就是选中的 label 值。
阅读全文