elementui级联选择器获取label
时间: 2024-10-12 13:13:02 浏览: 41
Vue+ElementUI 中级联选择器Bug问题的解决
5星 · 资源好评率100%
Element UI 的级联选择器(Cascader)组件允许用户通过下拉选项逐步选择数据。当你想获取选中的节点的标签(label),你可以通过监听`change`事件,并从返回的数据结构中提取所需信息。`change`事件会触发一次,每次用户完成一级选择后。
例如,假设你有如下的级联选择器实例:
```html
<el-cascader :options="options" @change="handleChange"></el-cascader>
```
在对应的 Vue 实例中:
```js
data() {
return {
options: [...], // 你的选项数组
};
},
methods: {
handleChange(value) {
const label = value.map(item => item.label).join(' > '); // 这里value是一个节点数组,item.label就是每个节点的标签
console.log(label); // 打印出所有层级的标签
},
}
```
在这个`handleChange`方法中,`value`包含了用户最终选择的所有节点,通过`map()`遍历并提取`label`属性,然后使用`join(' > ')`连接成一个多级的标签串。
阅读全文