vue3中使用el-cascader三级联动（动态获取数据）

复制代码

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="280px"
    class="demo-ruleForm"
    size="large"
  >
    <el-form-item label="工作地址" prop="shengId">
      <el-cascader
        style="width: 100%"
        v-model="ruleForm.shengId"
        :options="shengfenList"
        :props="cascaderProps"
        clearable
        placeholder="请选择地区"
        ref="cascaderRef"
        @change="handleChange"
      />
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { FormRules } from '@hc/element-plus'
import { getRegionList } from '@/api'

let shengfenList = ref([])
const cascaderRef = ref()
let ruleForm = ref({
  shengId: [],
})
const cascaderProps = {
  value: 'id', // 指定 value 字段为 id
  label: 'name', // 指定 label 字段为 name
  children: 'children',
  leaf: 'leaf',
  lazy: true,
  async lazyLoad(node, resolve) {
    const { level, value } = node
    try {
      const data = await fetchData(level, value)
      resolve(data)
    } catch (error) {
      resolve([])
    }
  },
}
const rules = reactive<FormRules>({
  shengId: [
    { required: true, message: '请选择省份', trigger: 'blur' },
    {
      required: true,
      message: '请选择省份',
      trigger: 'change',
    },
  ],
})

const handleChange = async (value) => {
  console.log('选中的值:', value)
  // // 手动关闭下拉框(这块没用到)
  // if (cascaderRef.value) {
  //   cascaderRef.value.dropDownVisible = false
  // }
}
const fetchData = (level, value) => {
  return new Promise((resolve) => {
    setTimeout(async () => {
      let data = []
      if (level == 0) {
        let data1 = await getRegionList({ pid: 0 })
        if (data1.returnCode == 200) {
          data = data1.returnData
        }
      } else if (level == 1) {
        let data1 = await getRegionList({ pid: value })
        if (data1.returnCode == 200) {
          data = data1.returnData
        }
      } else if (level == 2) {
        let data1 = await getRegionList({ pid: value })
        if (data1.returnCode == 200) {
          data = data1.returnData
        }
      }
      // 如果不循环这个第三层要点两（问题）
      data.forEach((item) => {
        if (level === 2) {
          item.leaf = true
        } else {
          item.leaf = false
        }
      })
      resolve(data)
    }, 300)
  })
}
// 初始化
onMounted(() => {})
</script>
<style lang="scss" scoped></style>

问题：每一层都是动态通过接口获取

接口数据转换，通过配置props进行转换

获取之后最后一层要点击两次才能触发change事件，需要循环数据添加level属性为false解决