级联选择器（el-cascader）动态加载（lazyLoad）实现省市区三级选择

后海 0_o

已于 2022-04-11 11:35:05 修改

阅读量1.9w

点赞数 50

分类专栏：工具库文章标签：前端

于 2022-03-18 20:50:48 首次发布

本文链接：https://blog.csdn.net/weixin_45137565/article/details/123583448

版权

工具库专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文介绍了如何在没有外部库的情况下，利用ElementUI的懒加载特性实现省市区级联选择，并针对特定需求进行了组件封装和优化。讨论了从依赖库到自定义组件的转变，以及在无数据情况下仍能实现选择的功能。此外，还提出了针对级联选择器的改进思路，包括自由选择和回显功能。

摘要由CSDN通过智能技术生成

开开心心工作，兢兢业业生活

一、实现省市区级联选择（插件）

1. 需求：实现一个省市区的级联选择器，点击一级，动态加载下一级

在这里插入图片描述

那好，我们找个轮子

2. 他山之石（找个轮子）

Element UI 中国省市区级联数据

安装：

npm install element-china-area-data -S

使用：

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

预览：
在这里插入图片描述

回复：

领导：不行，多余的包会影响加载速度，我们有自己的接口

二、实现行政区三级选择 - 自己封装

1. 需求：

请求接口，获取第一级内容（省份），点击省份项，请求数据，获取第二级内容（城市）并动态加载出来，点击城市，请求数据，动态加载第三级内容（区域）

2. 组件选择

Element UI 的 Demo：
在这里插入图片描述

<el-cascader :props="props"></el-cascader>

<script>
  let id = 0;

  export default {
    data() {
      return {
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
            const { level } = node;
            setTimeout(() => {
              const nodes = Array.from({ length: level + 1 })
                .map(item => ({
                  value: ++id,
                  label: `选项${id}`,
                  leaf: level >= 2
                }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes);
            }, 1000);
          }
        }
      };
    }
  };
</script>

核心：

// 理解 level 的目的和意义
const nodes = Array.from({ length: level + 1 })

3. 话不多说（直接组件封装）

组件：

<template>
  <div class="cascaderArea">
    <el-cascader
      :props="props"
      v-model="selectedOptions"
      placeholder="请选择行政区域"
      @change="handleChange"
      style="width: 270px"
    ></el-cascader>
  </div>
</template>
<script>
import { areaOption } from '@/assets/api'
export default {
  name: 'cascaderArea',
  data() {
    return {
      selectedOptions: [],
      props: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { level } = node // node 节点数据 
          const nodes = []  // 动态节点
          let type = level == 0 ? "0" : node.value  // 0 代表第一次请求
          this.provinceFn(type)
            .then((res) => {
              res.list.map((item) => {
                let area = {
                  value: item.id,
                  label: item.areaName,
                  leaf: node.level >= 2,
                };
                nodes.push(area)
              });
              resolve(nodes) // 回调
            })
            .catch((error) => {
              console.log(error)
            })
        },
      }
    }
  },
  methods: {
    provinceFn(id) { // 获取省市区街道
      return areaOption(id)
    },
    handleChange(value) { // 选择的行政区
      this.$emit('getSelectedOptions', value)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

父组件：

<template>
	<CascaderArea @getSelectedOptions='getSelectedOptions' />
</template>
<script>
	import CascaderArea from '@/components/cascaderArea.vue'
	...
	components: { CascaderArea },
	methods: {
        getSelectedOptions(val) {
            this.selectedOptions = val
        }
    }
</script>

4. 预览：

在这里插入图片描述

5. 反思：

这个级联选择器不仅仅可以用在省市区的级联选择上，更可以面对庞大数据，做一个多层级选择菜单，实现数据的分级渲染

三、实现行政区三级自由选择

1. 存在的问题：

上面这个级联选择器要求必须选定第三级，不能直接选择一级 / 二级
如果第三级无数据，会导致无法选择

2. 思路：

样式： 采用 select 来实现，进行下拉框一个个选择
动态显示： 监听上一个下拉框是否有内容，决定要不要显示下一个 select
动态加载： 获取上一个下拉框内容作为参数，请求下一个下拉框的数据，如果返回数据为空，也不显示该 select（解决第三级无数据导致无法选择的问题）
非空校验： 只校验第一个下拉框内容是否为空，只要第一个输入框不为空可以直接提交
回显： 需要后端返回行政区全名，传入第一个下拉框，获取焦点时重新选择

3. 代码实现：

HTML：

                    <el-form-item label="行政区域地址" prop="province" class="wholeLine">
                        <el-select
                            v-model="lineData.province"
                            placeholder="请选择省份"
                            @change="provinceSelect"
                        >
                            <el-option
                                v-for="item in provinceOptions"
                                :label="item.areaName"
                                :key="item.id"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                        <el-select
                            v-show="this.lineData.province && this.cityOptions.length != 0"
                            v-model="lineData.regionCity"
                            placeholder="请选择城市"
                            @change="citySelect"
                        >
                            <el-option
                                v-for="item in cityOptions"
                                :label="item.areaName"
                                :key="item.id"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                        <el-select
                            v-show="this.lineData.regionCity && this.countyOptions.length != 0"
                            v-model="lineData.regionCounty"
                            placeholder="请选择县/区"
                            @change="countySelect"
                        >
                            <el-option
                                v-for="item in countyOptions"
                                :label="item.areaName"
                                :key="item.id"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>

JS：

        provinceSelect(val) { // 省份 下拉框值改变时回调
            this.provinceFullName = this.getLabel(val, this.provinceOptions)
            if (this.lineData.regionCity) { // 千万要做一层判断，直接置空会导致 mode 绑定为 空
                this.lineData.regionCity = ''
            }
            if (this.lineData.regionCounty) {
                this.lineData.regionCounty = ''
            }
            area(val)
                .then(res => {
                    this.cityOptions = res.list
                })
        },
        citySelect(val) { // 城市 下拉框值改变时回调
            this.cityFullName = this.getLabel(val, this.cityOptions)
            if (this.lineData.regionCounty) { // 千万要做一层判断，直接置空会导致 mode 绑定为 空
                this.lineData.regionCounty = ''
            }
            area(val)
                .then(res => {
                    this.countyOptions = res.list
                })
        },
        countySelect(val) { // 区/县 下拉框值改变时回调
            this.countyFullName = this.getLabel(val, this.countyOptions)
        },