饿了吗 Cascader 级联选择器多选的数据回显问题

最近在做后台项目中，有一个联级选择器的回显，找了很多博客都没有说的很明了，自己也花了很多时间去解决这个回显的问题。

html代码：

    你可以在这里写demo
    

      折叠展示Tag
      
      
    
  

数据格式如下：

data() {
    return {
      // prop: { multiple: true },
      show: true,
      options:[
        {
          id: "1",
          name: "水果",
          level: "1",
          pid: "0",
          status: "1",
          sub: [
            {
              id: "4",
              name: "苹果",
              level: "2",
              pid: "1",
              status: "1",
            },
            {
              id: "8",
              name: "香蕉",
              level: "2",
              pid: "1",
              status: "1",
            },
          ],
        },
        {
          id: "2",
          name: "食品",
          level: "1",
          pid: "0",
          status: "1",
          sub: [
            {
              id: "5",
              name: "馒头",
              level: "2",
              pid: "2",
              status: "1",
            },
            {
              id: "6",
              name: "大米",
              level: "2",
              pid: "2",
              status: "1",
            },
          ],
        },
      ],
      selectedOptions: [[1,4],[2,5]],
      defaultParams: {
        label: "name",
        value: "id",
        children: "sub",
        multiple: true 
      },
    };
  },

在数据回显的过程中，Cascader组件绑定的值必须是完整位置的数组 selectedOptions: [[1,4],[2,5]],才会有数据的回显。