element Cascader 级联选择器动态通过接口获取二级三级数据（设置v-model默认选中的值，使用before-filter搜索从接口中获取数据替换options中的值）需要注意的事项

直接上代码：

<template>
      <el-cascader
           ref="cascaderHandle"
           :props="props"
           :options="options"
           v-model="companyName"
           @change="cascaderChange"
           :before-filter="beforeFilter" 
           @blur="blurLoad"
      ></el-cascader>
</template>

<script>
export default {
    name: 'commomHeader',
    data() {
        return {
            options: [],
            companyName: [],
            props: {
                value: 'name',
                label: 'name',
                checkStrictly: true,
                lazy: true,
                lazyLoad: this.cascaderLazyLoad,
            }
        };
    },
    methods: {
        cascaderChange(value) {
		   if (value.length) {
                // 选中
                //获取所有的节点数据
                const obj = this.$refs['cascaderHandle'].getCheckedNodes()
                this.$refs.cascaderHandle.dropDownVisible = false;
                this.$emit('updateOranization2', obj[0].data);
            } else {
                // 清空
                if (this.newCompany.includes('智慧监督_管理员')) {
                    this.userRoleInfo.name = ''
                    this.userRoleInfo.orgName = ''
                    this.userRoleInfo.orgId = ''
                    this.$emit('updateOranization2', this.userRoleInfo);
                } else {
                    this.$emit('updateOranization2', this.userRoleInfo);
                }
            }
        },
        cascaderLazyLoad(node, resolve) {
            if (!node.root) {
                this.$createDataProvider({
                    action: vars => this.$axios.post('xxx接口地址', { ...vars }),
                    variables: {
                        current: '',
                        size: '',
                        queryParam: {
                            orgId: node.data.orgId,
                            orgType: 0,
                        },
                    },
                    onSuccess: state => {
                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                        // 注意注意注意: 千万不要在这里去重新对options赋值！！！赋值会导致在执行一次cascaderLazyLoad方法
                        // 博主理解的是，options变化了就会重新执行懒加载！！！
                        resolve(state.data);
                    },
                });
            }
        },
        // 相当于----搜索触发的回调函数（注意 需要转成同步函数，不然搜索出来的内容首次替换的时候数据换不上）
       async beforeFilter(val) {
            this.isSerach = true
            this.options = await this.$axios.post('supervise/public/searchOrganization', {
                current: '',
                size: '',
                queryParam: {
                    roleName: this.newCompany.toString(),
                    company: val,
                },
            });
            return false
        },
        //解决当用户搜索了之后 没有选择某条数据的时候 还原成默认的初始数据
        blurLoad() {
            this.$createDataProvider({
                action: vars => this.$axios.post('supervise/public/getSubOranization', { ...vars }),
                variables: {
                    current: '',
                    size: '',
                    queryParam: {
                        orgId: this.newCompany.includes('智慧监督_管理员') ? 1 : this.$store.state.userInfo.orgId,
                        orgType: 0,
                        roleName: this.newCompany.toString(),
                    },
                },
                onSuccess: state => {
                    // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                    this.options = state.data;
                },
            });
        }
    }
    beforeMount() {
        this.companyName = ["想要绑定的默认的数据的值"]
    },
};
</script>

<style lang="less" scoped>
</style>

1. 注意： checkStrictly: true >>实质意思表示的是单选，在 cascaderLazyLoad中去写接口请求函数，写处理逻辑
2. 绑定v-model默认值的时候需要注意：
注意 （1）： v-model的值必须是一个数组 即本文中的companyName必须是一个数组
注意 （2）： 设置默认值的时候设置的值得是label对应得value 例如: this.companyName = [‘测试公司’]
注意 （3）：请详细看代码注释

####问题SOS###： 使用 v-model="companyName"绑定值回显的时候，会再次执行cascaderLazyLoad方法 （可自测证明这个问题-暂时没找到解决办法）