elementui级联选择器获取当前选中的值
要获取Element UI级联选择器当前选中的值,可以使用v-model来绑定一个变量,然后通过访问这个变量来获取选中的值。
以下是一个示例代码:
<template>
<div>
<el-cascader
v-model="selectedOptions"
:options="options"
@change="handleCascaderChange"
></el-cascader>
<p>当前选中的值: {{ selectedOptions }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [], // 用于存储选中的值
options: [
{
value: '1',
label: '选项1',
children: [
{
value: '1-1',
label: '选项1-1'
},
{
value: '1-2',
label: '选项1-2'
}
]
},
{
value: '2',
label: '选项2',
children: [
{
value: '2-1',
label: '选项2-1'
},
{
value: '2-2',
label: '选项2-2'
}
]
}
]
}
},
methods: {
handleCascaderChange(value) {
console.log('选中的值:', value);
}
}
}
</script>
在上面的代码中,我们使用v-model将selectedOptions绑定到级联选择器上。在handleCascaderChange方法中,我们可以通过访问selectedOptions来获取选中的值。同时,我们在模板中显示了当前选中的值。
当用户选择级联选择器的选项时,selectedOptions会自动更新为选中的值,因此我们可以通过访问selectedOptions来获取当前选中的值
原文地址: https://www.cveoy.top/t/topic/it1h 著作权归作者所有。请勿转载和采集!