动态加载区划-CSDN博客

本文链接：https://blog.csdn.net/qq_43195831/article/details/145882832

运用的组件是element plus 的级联选择器，点击上级动态加载下级数据（首次数据要自行先加载一次，否则初始数据是空的）
在这里插入图片描述

 <el-cascader
   v-model="areaCode"
   :options="options"
   :props="props"
   @change="handleChange"
   :show-all-levels="false"
   placeholder="请选择"
   style="width:164px;"
 />
 
<script setup>
  const queryForm = ref({
    districtCode: ''
  })
  const areaCode = ref([])
  const level = ref(0)
  const options = ref([])
  const props = {
    checkStrictly: true,
    label: 'districtName',
    value: 'districtCode',
    lazy: true,
    lazyLoad(node, resolve) {
      const { level } = node
      console.log('🚀 ~ lazyLoad ~ node:', queryForm.value.districtCode)
      if (level > 4) {
        resolve([])
        return
      }
      // 这是接口，自行改成自己的后端接口请求
      apiMonitorApiImsApiDistrictGetSubdivisionByDistrict({   
        districtCode: node.data.districtCode
      }).then((res) => {
        resolve(res.data)
      })
    }
  }
  
  const handleChange = (value) => {
    console.log(value, 'handleChange')
    areaCode.value = value
    queryForm.value.districtCode = areaCode.value[value.length - 1]
  }

</script>