Vue+elementUI实现省市区级联选择

本文中的数据是从后台接口调出的，如果要用前端数据需要用import导入json数据

效果图

代码

①：级联选择器

<el-cascader
          v-model="queryParams.districtId"
          :options="options"
          clearable
          filterable
          @change="handlequeryParamsCascaderChange"
        ></el-cascader>

②：调用后端接口获取数据

import { listAreaData } from '@/api/area/areaData'
/**查询地区数据*/
    getAreaData() {
      listAreaData().then(response => {
        this.areaDataList = response
        if (response && response.data && Array.isArray(response.data)) {
          //后端传过来的对象数组，所以将data赋值
          this.areaDataList = response.data
          //处理数据 包装渲染列表的数据格式
          this.areaDataList = this.areaDataList.map(v => ({
            id: v.id,
            pid: v.pid,
            value: v.id,
            label: v.name,
            level: v.level
          }))
           //过滤数据将各级别的数据过滤出来用于拼凑渲染数据
          this.economize = this.areaDataList.filter(v => v.level === 0)
          this.market = this.areaDataList.filter(v => v.level === 1)
          this.region = this.areaDataList.filter(v => v.level === 2)
          //在市下追加区级信息存在在children中
          this.market.forEach(item => {
            item.children = this.region.filter(v => v.pid == item.id)
          })
          this.economize.forEach(item => {
            item.children = this.market.filter(v => v.pid == item.id)
          })
          this.options = this.economize
        } else {
          console.error('listAreaData返回的数据不是数组类型，请检查接口返回内容')
          this.areaDataList = []
        }
      })

 设置提交数据，提交最低级地区id，用与渲染前端表格（不需要可以不用）

handleCascaderChange(value) {
      console.log(value)
      this.form.districtId = value[value.length - 1];
      console.log(this.form.districtId)
    },
handlequeryParamsCascaderChange(value) {
      this.queryParams.districtId = value[value.length - 1];
    },
  }