饿了吗的级联选择器如何获取点击的label值
时间: 2024-02-27 13:58:49 浏览: 22
饿了么的级联选择器可以通过以下代码获取点击的 label 值:
```javascript
// 获取级联选择器实例
const cascader = this.$refs.cascader;
// 监听选项变化事件
cascader.$on('change', (value, selectedData) => {
// 获取选中的 label 值
const labels = selectedData.map(item => item.label);
const selectedLabel = labels.join('/');
console.log(selectedLabel);
})
```
在 `change` 事件中,可以通过 `selectedData` 参数获取所有选中的数据,然后通过遍历获取每个选中数据的 `label` 值,最后将它们拼接起来即可得到选中的 label 值。
相关问题
饿了吗级联选择器如何获取label值
饿了么级联选择器(Cascader)可以通过 `change` 事件来获取选中的 label 值。在 `change` 事件中,会返回两个参数,一个是选中的值(value),另一个是选中的数据(selectedData)。
其中,选中的数据(selectedData)是一个数组,包含了所有选中的节点数据,每个节点数据包含了 label、value、children 等属性,可以根据需要来获取 label 值。
以下是一个简单的示例:
```html
<template>
<el-cascader
:options="options"
@change="handleChange"
placeholder="请选择"
clearable
filterable
v-model="selectedValues"
></el-cascader>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致"
},
{
value: "fankui",
label: "反馈"
}
]
}
]
}
],
selectedValues: []
};
},
methods: {
handleChange(value, selectedData) {
// 获取选中的 label 值
const labels = selectedData.map(item => item.label);
const selectedLabel = labels.join("/");
console.log(selectedLabel);
}
}
};
</script>
```
在上面的示例中,我们通过 `map` 函数获取了每个选中节点的 label 值,并使用 `join` 函数将它们拼接成了一个字符串。最终的结果就是选中的 label 值。
饿了吗plus级联选择器如何获取label值
饿了么 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 值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)