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' }"