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

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

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

直接看demo

<template>
  <div>
    <el-cascader
      v-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' }"