Vue（二十八）el-cascader 动态加载 - 省市区组件

最新推荐文章于 2025-06-29 09:04:23 发布

转载最新推荐文章于 2025-06-29 09:04:23 发布 · 529 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yulingjia/p/9789174.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用Vue.js和Element UI实现省市区级联选择器的方法，通过后台接口动态加载数据，实现了点击加载下一级的功能。文章详细展示了如何设置v-model、props属性以及监听active-item-change事件来更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.后台接口为点击加载下一级，传省市区id

<template>
  <el-cascader
    v-model="selectedOptions"
    placeholder="请选择省市区"
    :options="cascaderData"
    @active-item-change="handleItemChange"
    :props="{
      value: 'id',
      label: 'name',
      children: 'cities'
    }"
  ></el-cascader>
</template>

<script>
export default {
  name: 'my-provinces',
  data () {
    return {
      departmentOptions: [],
      cascaderData: [],
      selectedOptions: []
    }
  },
  methods: {
    getNodes (val) {
      let idArea
      let sizeArea
      if (!val) {
        idArea = null
        sizeArea = 0
      } else if (val.length === 1) {
        idArea = val[0]
        sizeArea = val.length // 3:一级 4:二级 6:三级
      } else if (val.length === 2) {
        idArea = val[1]
        sizeArea = val.length // 3:一级 4:二级 6:三级
      }
      this.$post('ibest/service/system/area/areaList', {
        'id': idArea
      }).then(response => {
        if (response.data && response.data.code === '00000000') {
          let Items = response.data.data
          if (sizeArea === 0) { // 初始化 加载一级 省
            this.cascaderData = Items.map((value, i) => {
              return {
                id: value.id,
                name: value.name,
                cities: []
              }
            })
          } else if (sizeArea === 1) { // 点击一级 加载二级 市
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {
                if (!value.cities.length) {
                  value.cities = Items.map((value, i) => {
                    return {
                      id: value.id,
                      name: value.name,
                      cities: []
                    }
                  })
                }
              }
            })
          } else if (sizeArea === 2) { // 点击二级 加载三级 区
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {
                value.cities.map((value, i) => {
                  if (value.id === val[1]) {
                    if (!value.cities.length) {
                      value.cities = Items.map((value, i) => {
                        return {
                          id: value.id,
                          name: value.name
                        }
                      })
                    }
                  }
                })
              }
            })
          }
        } else {
          console.log(response.data.msg)
        }
      }, error => {
        console.log(error)
      })
    },
    handleItemChange (val) {
      this.getNodes(val)
    }
  },
  mounted () {
    this.getNodes()
  }
}
</script>