el-cascader三级选择,选择的数据源来自定义的字典
时间: 2023-08-18 18:19:02 浏览: 53
要实现 el-cascader 三级选择,选择的数据源来自自定义的字典,可以先将字典转换成级联选择器的数据格式,然后将转换后的数据源绑定到 el-cascader 组件上即可。以下是一个示例:
```javascript
data() {
return {
options: [],
props: {
value: 'value',
label: 'label',
children: 'children'
},
selectedOptions: []
}
},
mounted() {
this.options = this.convertDictToCascaderOptions(dict);
},
methods: {
convertDictToCascaderOptions(dict) {
const options = [];
for (const key in dict) {
const item = {
value: key,
label: dict[key].label,
children: []
};
if (dict[key].children) {
item.children = this.convertDictToCascaderOptions(dict[key].children);
}
options.push(item);
}
return options;
},
handleChange(value) {
console.log(value); // 获取选择的值
}
}
```
这里的 `convertDictToCascaderOptions` 方法是将自定义的字典转换成级联选择器的数据格式。具体来说,对于字典中的每一个键值对,将其转换为一个包含 `value`、`label` 和 `children` 三个属性的对象,其中 `value` 是键名,`label` 是键值对应的文本,`children` 是该键值对应的子字典,如果没有子字典则为空数组。最后将所有转换后的对象放在一个数组中返回即可。
然后在 `mounted` 钩子中调用 `convertDictToCascaderOptions` 方法将字典转换成级联选择器的数据格式,并将转换后的数据源绑定到 `options` 上。最后在 el-cascader 组件中将 `options` 绑定到 `:options` 上即可。
总的来说,要实现 el-cascader 的三级选择,选择的数据源来自自定义的字典,需要将字典转换成级联选择器的数据格式,然后将转换后的数据源绑定到 el-cascader 组件上即可。