vue3 element-plus 级联选择器el-cascader实现省市区三级联动

最新推荐文章于 2024-05-07 17:14:34 发布

张张不慌

最新推荐文章于 2024-05-07 17:14:34 发布

阅读量1k

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/huahua9197/article/details/128654653

版权

<el-cascader
        v-model="card.bankCity"
        :options="options2"
        :disabled="isDetail"
        :props="props"
        placeholder="请选择开户城市"
        style="width:15rem;"
        @expand-change="handleItemChange"
      />

// 获取级联省市区
const cityIndex = ref<number>(0)
const assignment = ref('')
const getCity = async(id?:string, status?:any, resolve?:any) => {
  let param
  if (id) {
    param = {
      top_id: id
    }
  } else {
    param = ''
  }
  interface District{
    value:string
    label:string
    cities:District[]
  }
  await getDistrict(param).then((res) => {
    const dataCopy = res.data
    console.log('开户城市数据', dataCopy)

    if (id) {
      if (dataCopy.length && dataCopy[0].DistrictLevel === 2) {
        options2.value.map((item:any, index:number) => {
          if (item.value === id) {
            item.cities = dataCopy.map((it:any) => ({
              value: it.Id.toString(),
              label: it.District,
              cities: [],
              leaf: false
            }))
            cityIndex.value = index
          }
        })
      } else if (dataCopy.length && dataCopy[0].DistrictLevel === 3) {
        options2.value[cityIndex.value].cities.map((cityItem:District) => {
          if (cityItem.value === id) {
            cityItem.cities = dataCopy.map((item:any) => ({
              value: item.Id.toString(),
              label: item.District,
              leaf: true // 设置为true即可在第三层结束选择，不进行下一层的加载
            }))
          }
        })
      }
    } else {
      options2.value = []
      dataCopy.map((item:any) => {
        if (item.DistrictLevel === 1) {
          options2.value.push({
            value: item.Id.toString(),
            label: item.District,
            cities: [],
            leaf: false // 设置为false时则是选择加载下一层
          })
        }
      })
    }
    assignment.value = status
    if (status === 'assignment2') {
      card.value.bankCity = bankCityArr.value
    }
  })
}

// 选择的城市
const handleItemChange = (val:any) => {
  console.log('000', val)
  for (const i in val) {
    if (typeof val[i] === 'string') {
      getCity(val[i])
    }
  }
}