前端代码

  <template>  
  <el-tree :props="data.treeProps" :load="loadNode" lazy style="width: 300px" show-checkbox
    @check-change="handleCheckChange" node-key="id" ref="treeForm" />
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { region, regions } from '../../utils/http/home'
import { ElMessage } from 'element-plus'
const treeForm = ref(null)
const data = reactive({
  treeProps: {
    label: 'name',
    children: 'zones',
    isLeaf: 'leaf',
  },
})
const loadNode = (node, resolve) => {
  const nodes = [];
  if (node.level === 0) {
    regions({ id: 0 }, {}).then((res) => {
      if (res.code == 0) {
        res.data.list.map((item) => {
          let obj = {
            name: item.name,
            id: item.id,
            leaf: node.level >= 1,
            disabled: true
          };
          nodes.push(obj);
        });
        resolve(nodes);
      } else {
        ElMessage.error(res.msg)
      }
    });
  } else if (node.level == 1) {
    regions({ id: node.id }, {}).then((res) => {
      if (res.code == 0) {
        res.data.list.map((item) => {
          let obj = {
            name: item.name,
            id: item.id,
            leaf: node.level >= 1,
            isChange: false
          };
          nodes.push(obj);
        });
        resolve(nodes);
      } else {
        ElMessage.error(res.msg)
      }
    });
  }
}

const handleCheckChange = (data, checked, indeterminate) => {
  if (checked) {
    treeForm.value.setCheckedKeys([data.id])
  }
}
</script>
<style lang="scss" scoped>
/* 隐藏掉el-tree中有disabled属性的框框 */
::v-deep .el-checkbox.is-disabled {
  display: none !important;

}
</style>

后端接口 与vue3 elementPlus el-cascader动态加载数据_m0_75025344的博客-CSDN博客记录一下----------------https://blog.csdn.net/m0_75025344/article/details/130880782?spm=1001.2014.3001.5501

中返回一致