实现 ＜el-cascader＞ 组件的回显功能

本文主要是介绍实现 ＜el-cascader＞ 组件的回显功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue A页面，用户填写了el-cascader多层级数据，层级list数据从接口获取；

vue B页面，多层级数据要进行回显，接口给到的数据是value值；

直接看demo

<template><div><el-cascaderv-model="ruleForm.addProtocol":options="protocolListData":props="cascaderProps"></el-cascader></div>
</template><script>
export default {data() {return {// 表单数据绑定ruleForm: {addProtocol: ['zhejiang', 'hangzhou'], // 用户选择的级联值，示例中为浙江 -> 杭州},// 级联选择器的选项数据protocolListData: [{value: 'zhejiang',label: '浙江',children: [{value: 'hangzhou',label: '杭州',},// 可以添加更多的子选项],},// 可以添加更多的顶级选项],// 级联选择器的属性配置cascaderProps: {expandTrigger: 'hover', // 展开触发方式value: 'value', // 指定 value 的字段label: 'label', // 指定 label 的字段children: 'children', // 指定子菜单的字段},};},
};
</script>
:props="{ expandTrigger: 'hover' }"

这篇关于实现 ＜el-cascader＞ 组件的回显功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---