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>