Vue element-UI级联选择器动态加载

官网API先看一下

我这个是地区的三级联动，撸代码拉

HTML

<el-form-item label="所属地区" prop="stAgentCode" ref="stAgentCode" style="width: 100%;">
      <el-col :span="18">
          <el-cascader @change='changeStAgentCode' v-model="ruleForm.stAgentCode" style="width: 100%;"
              :props="props"></el-cascader>
          <!-- <el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader> -->
      </el-col>
   </el-form-item>
           

js

<script>
    import { selectAddrByLevel } from "@/api/service";
    export default {
        data() {
            return {
                Indexs: '',
                isShow: true,
                loading: false,
                ruleForm: {                   
                    stAgentCode: '', // 所属地区  
                },
                 props: {
                    lazy: true,
                    // checkStrictly: true,
                    lazyLoad(node, resolve) {
                        const { level } = node;
                        //请求地区的接口
                        selectAddrByLevel({ addrLevel: level + 1, addrParentCode: node.value }).then(res => {
                            const nodes = res.data.map(item => ({
                                value: item.addrCode,
                                label: item.addrName,
                                leaf: level >= 2  //控制有几层节点
                            }));
                            resolve(nodes);
                        })
                    }
                },
            }
        },
        methods: {
         changeStAgentCode(e) {
               //其他的一些处理，比如联动其他的表单元素
          },
        }
</script>