el-cascader根据json文件取值,如何获取el-cascader的值
时间: 2023-10-13 14:26:23 浏览: 113
使用element中el-cascader级联选择器:实现省市区街道筛选、动态懒加载以及回显
您可以使用 `v-model` 绑定来获取 `el-cascader` 组件的值。同时,可以使用 `change` 事件监听选项的变化,并获取选中的值。
下面是一个示例代码:
```html
<template>
<div>
<el-cascader
v-model="selectedOptions"
:options="options"
@change="handleCascaderChange"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [], // 存储选中的值
options: [ // el-cascader 的选项
{
value: '1',
label: 'Option 1',
children: [
{
value: '1-1',
label: 'Option 1-1',
},
{
value: '1-2',
label: 'Option 1-2',
},
],
},
{
value: '2',
label: 'Option 2',
children: [
{
value: '2-1',
label: 'Option 2-1',
},
{
value: '2-2',
label: 'Option 2-2',
},
],
},
],
};
},
methods: {
handleCascaderChange(value) {
console.log(value); // 打印选中的值
},
},
};
</script>
```
在上述示例中,`selectedOptions` 存储了 `el-cascader` 组件选中的值。`options` 是 `el-cascader` 组件的选项数据。当选项发生变化时,会触发 `change` 事件,调用 `handleCascaderChange` 方法来获取选中的值并打印出来。您可以根据自己的需求对获取到的值进行处理。
阅读全文