Cascader---[Vue warn]: Invalid prop: custom validator check failed for prop “options“.Vue解绑

背景：VUE+antdesign(级联选择器)；

1. 控制台警告：[Vue warn]: Invalid prop: custom validator check failed for prop “options”
2. Cascader-children孩子为空，显示有空白项

官方代码

<template>
  <a-cascader :options="options" placeholder="Please select" @change="onChange" />
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    onChange(value) {
      console.log(value);
    },
  },
};
</script>

后台接口返回的数据直接塞进来的，发现怎么有个空，后来用官方实例测试发现，children为[]的时候就会出现这样的情况，那么就递归解决下子

// 格式化数据，递归将空的children置为undefined
  formatData(data: any) {
    const that = this
    data.forEach((element: any) => {
      if (element.children && element.children.length > 0) {
        that.formatData(element.children)
      } else {
        element.children = undefined
      }
    })
    return data
  }

这时候页面页面已经显示出来了，但是为啥控制台有个警告？？？对于强迫症来说不能忍，一番操作以后发现因为
双向绑定导致数据类型不一致，所以要解绑：
把数据外面再套一层就行了
JSON.parse(JSON.stringify(this.formatData(转换的数据-数组))) || []
为什么不一致？自己百度下observe和object；写的急，有时间我再详述~