使用VUX中的Popup-picker组件中遇到的问题记录

新换了业务线，有移动端和web端的开发内容，移动端使用的是vux移动端组件，在使用Popup-picker时遇到了一些问题，特此记录

1、设置联级选择

官网demo链接https://doc.vux.li/zh-CN/components/popup-picker.html

官网的联级选择是地区，完整的都有三级数据，我的数据比较特殊，第一级都有，第二级只有一个选项有，第三级也只有一个选项有

下面这是官网demo的数据，可以正常显示三级联动

[{
        name: '中国',
        value: 'china',
        parent: 0
      }, {
        name: '美国',
        value: 'USA',
        parent: 0
      }, {
        name: '广东',
        value: 'china001',
        parent: 'china'
      }, {
        name: '广西',
        value: 'china002',
        parent: 'china'
      }, {
        name: '美国001',
        value: 'usa001',
        parent: 'USA'
      }, {
        name: '美国002',
        value: 'usa002',
        parent: 'USA'
      }, {
        name: '广州',
        value: 'gz',
        parent: 'china001'
      }, {
        name: '深圳',
        value: 'sz',
        parent: 'china001'
      }, {
        name: '广西001',
        value: 'gx001',
        parent: 'china002'
      }, {
        name: '广西002',
        value: 'gx002',
        parent: 'china002'
      }, {
        name: '美国001_001',
        value: '0003',
        parent: 'usa001'
      }, {
        name: '美国001_002',
        value: '0004',
        parent: 'usa001'
      }, {
        name: '美国002_001',
        value: '0005',
        parent: 'usa002'
      }, {
        name: '美国002_002',
        value: '0006',
        parent: 'usa002'
      }]

我的数据是，不能提供真实数据，所以修改了一下,即第一级只有一个有第二级，第二级只有一个有后几级，然后级联选择只显示了第一级

[
    {
        name: '中国',
        value: '1',
        parent: 0
      }, {
        name: '美国',
        value: '2',
        parent: 0
      }, 
      {
        name: '法国',
        value: '3',
        parent: 0
      }, {
        name: '英国',
        value: '4',
        parent: 0
      }, 
      {
        name: '伦敦1',
        value: '5',
        parent: '4'
      }, {
        name: '伦敦2',
        value: '6',
        parent: '4'
      }, {
        name: '伦敦3',
        value: '7',
        parent: '4'
      },
      {
        name: '测试菜单1',
        value: '8',
        parent: '7'
      },
      {
        name: '测试菜单2',
        value: '8',
        parent: '7'
      }
]

为了解决这个问题，找了个懒办法，没有去参与组件的下载和修复，我把数据拼接成了完整的，给缺少第二级和第三级的数据都补充了显示name为空的下级菜单，就显示出来了。

如下图

[
    {
        name: '中国',
        value: '1',
        parent: 0
      }, 
    {
        name: '',
        value: '1.1',
        parent: '1'
      }, 
        {
        name: '',
        value: '1.2',
        parent: '1.1'
      },{
        name: '美国',
        value: '2',
        parent: 0
      }, {
        name: '',
        value: '2.1',
        parent: '2'
      }, 
        {
        name: '',
        value: '2.2',
        parent: '2.1'
      },
      {
        name: '法国',
        value: '3',
        parent: 0
      }, 
       {
        name: '',
        value: '3.1',
        parent: '3'
      }, 
        {
        name: '',
        value: '3.2',
        parent: '3.1'
      },
    {
        name: '英国',
        value: '4',
        parent: 0
      }, 
      {
        name: '伦敦1',
        value: '5',
        parent: '4'
      }, {
        name: '伦敦2',
        value: '6',
        parent: '4'
      }, {
        name: '伦敦3',
        value: '7',
        parent: '4'
      },
      {
        name: '测试菜单1',
        value: '8',
        parent: '7'
      },
      {
        name: '测试菜单2',
        value: '8',
        parent: '7'
      }
]

ps: 我在第一补充时，只补充完整了第二级菜单，没有补充缺少的第三级，虽然三级级联菜单也可以显示出来，不过在给其赋值之后里面的内容在第二级和第三级上无法定位到所选项的位置，即不能正常回显联级选项，所以又给没有第三级菜单的补充了缺少的第三级，顺利回显，当然我这是个为了使用组件赶时间的笨办法，有精力和时间的小伙伴可以把源码下载下来然后自己修复一下这个问题

2、自动触发PopupPicker的点击事件

我用的是vue哈，给组件引用的地方加上ref="xxxx",然后再vue代码中使用this.$refs.xxx.onClick();即可自动弹出啦

自己总结记录下~