Ant Cascader 级联选择三级

最新推荐文章于 2024-07-19 12:07:10 发布

三155

最新推荐文章于 2024-07-19 12:07:10 发布

阅读量1k

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Beloved_Jodie/article/details/124006266

版权

Cascader 级联选择动态加载数据

在这里插入图片描述

   <a-cascader
    :load-data="loadCityData"
    v-model:value="value"
    :options="Provinces"
    placeholder="Please select"
    change-on-select
    @change="changeProvinces"
   />
   
<script>
const Provinces = []
export default {
  data() {
    return {
      value: [],
      Provinces, // 省市区
    }
  },
  async created() {
    await this.CityData()
  },
  methods: {
    // 初始省市区数据
    async CityData() {
      const CityData = await this.ProvincesData(1)
      CityData.map((item) => {
        const { provinceName, regionalId } = item
        this.Provinces.push({
          value: regionalId,
          label: provinceName,
          isLeaf: false,
        })
      })
    },
    // 省市区数据请求
    async ProvincesData(Id) {
      let Dataresult
      await this.$http({
        url: this.$http.adornUrl('/task/getRegions'),
        method: 'post',
        params: this.$http.adornParams({
          parentId: Id,
        }),
      }).then(({ data }) => {
        console.log(data)
        if (data) {
          Dataresult = data.result
        }
      })
      console.log(Dataresult)
      return Dataresult
    },
    // 省市区数据动态加载
    async loadCityData(selectedOptions) {
      console.log(selectedOptions)
      const targetOption = selectedOptions[selectedOptions.length - 1]
      // 加载标识
      targetOption.loading = true
      const CityData = []
      const Provi = await this.ProvincesData(selectedOptions[selectedOptions.length - 1].value) //  用selectedOptions中最新的数据id 请求
      await Promise.all(
        Provi.map(async (item) => {
          CityData.push({
            value: item.regionalId, // ID
            label: item.regionalName, // name
            isLeaf: Object.keys(item.regionalId).length == 3 || Object.keys(item.regionalId).length == 5 ? false : true, // 判断ID的字符串长度 确定是否有下一级 此处有三级
          })
        })
      )
      targetOption.children = CityData // 将值赋给children
      console.log(targetOption.children)
      // console.log(this.Provinces)
      this.Provinces = [...this.Provinces]  // 集合在Provinces
      // 取消加载标识
      targetOption.loading = false 
    },
  },
}
</script>