级联选择懒加载 更改element-ui级联选择可选项

 需求：

先选类型  再级联选择内容

改变类型 会改变级联选择的可选内容

有 食品 家居用品  衣服  三个类型

选择不同的类型后  级联选择内容选某一公司  然后懒加载出来该公司 不同的商品 选中某个商品结束

关键点在于  更改不同类型后  级联选择的可选公司会变动 并且选中公司后 懒加载商品也会更新

此处我们只做二层级联选择

 Element-ui的级联选择器 

<el-cascader :props="props"></el-cascader>

<script>
  let id = 0;

  export default {
    data() {
      return {
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

 在此基础上 增加了 不同类型会替换级联选择的内容  所以会有一定的更改

关键点在于 灵活运用了 resove 回调 

<el-select v-model="type"
           placeholder="请选择类别"
           @change="changeType">
       <el-option v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
       </el-option>
</el-select>

 <!--    :key="isResouceShow" 必须加入key 用来切换类别的时候 清除上次级联选择内容的缓存-->

<el-cascader  :key="isResouceShow"
              v-model="company"
              placeholder="请选择内容"
              :props="sourceProps" >
</el-cascader>

 
<script>
 
  export default {
data(){
 return {
    type:'',
    typeOption:[{label:'A',value:'A'},{label:'B',value:'B'}],
    company:'',
    companyOptions:[],
    goodsList：[],
      //处理级联选择
      resolve: null,
      //为了级联选择项可以清空缓存 非常重要
         isResouceShow: 0,
   }
},
    computed: {
        sourceProps() {
            let _this = this;
            return {
                lazy: true,
                lazyLoad(node, resolve) {
                    // 赋值给vue的resove  在后续函数中可以调用
                    _this.resolve = resolve;
                    const { level } = node;
                    let nodes = [];
                    if (level === 0) {
                        if (_this.companyOptions.length === 0) {
                            resolve(nodes);
                        }
                      //当level=0的时候 加载的是公司的内容
                        nodes = _this.companyOptions.map((e) => {
                            return {
                                value: e.value,
                                label: e.label,
                                leaf: level >= 1
                            };
                        });
                        resolve(nodes);
                    } else {
                  //level不等于0 的时候 加载的是公司下面的商品
                        _this.getProps(node);
                    }
                    // 通过调用resolve将子节点数据返回，通知组件数据加载完成

                }
            };
        },
    },
methods:{
     /**
         * 补全级联选项数据
         * 选择某公司后 去加载该公司下面的商品
         * @param node
         * @returns {Promise<Array>}
         */
        async getProps(node) {
            let { value } = node.data;
            this.goodsList= await this.initGoodsOptions(this.company, value);
            if (this.goodsList.length === 0) {
                this.resolve([]);
            }
            const { level } = node;
            //二级目录商品请求数据后补充在下拉选择中
            const nodes = this.goodsList.map((e) => {
                return {
                    value: e.value,
                    label: e.label,
                    leaf: level >= 1
                };
            });
             // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            this.resolve(nodes);
        },

    /**
     * 更改类别后 重新获取级联选择内容
     **/
    async changeType() {
           //清楚级联选择器缓存
                this.cleanCache();
           //重新获取数据
                this.companyOptions = await this.initCompanyOptions(this.type);
          //重新设置数据 调用sourceProps 的.lazyLoad属性
                this.sourceProps.lazyLoad({ level: 0 }, this.resolve);
           
        },
        /**
         *  清除级联选择器缓存
         *  必要！！ 否则切换类型 的时候 option内容会被累加起来
         **/
        cleanCache() {
            ++this.isResouceShow;
        },
  },
    
  };
</script>