el-cascader label拼接
时间: 2023-08-20 19:06:58 浏览: 64
el-cascader可以通过v-model绑定一个数组来获取选中的值,数组中每个元素代表一级或多级选中的选项。如果想要获取选中的label值,可以通过以下方式:
1. 在el-cascader组件上添加ref属性,例如:ref="myCascader"
2. 在需要获取label值的地方,通过this.$refs.myCascader.getLabel()方法获取选中的label值
示例代码:
```
<template>
<div>
<el-cascader
ref="myCascader"
v-model="selectedOptions"
:options="options"
@change="handleChange"
clearable
expand-trigger="hover"
placeholder="请选择"
/>
<p>选中的label值:{{ selectedLabel }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [],
options: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'shejiyuanze',
label: '设计原则',
children: [
{
value: 'yizhi',
label: '一致'
},
{
value: 'fankui',
label: '反馈'
}
]
},
{
value: 'daohang',
label: '导航',
children: [
{
value: 'cexiangdaohang',
label: '侧向导航'
},
{
value: 'dingbudaohang',
label: '顶部导航'
}
]
}
]
}
]
}
},
methods: {
handleChange(value) {
console.log(value);
}
},
computed: {
selectedLabel() {
return this.$refs.myCascader.getLabel();
}
}
}
</script>
```