打造最简洁vue3省市区三级联动options，轻松搞定地址选择！

2022-12-28 12:56:29

告别繁杂库：实现Vue3省市区三级联动的简洁之道

导言

作为一名前端开发者，构建表单时经常需要集成省市区三级联动的选择框。虽然网络上充斥着各种教程，但它们往往依赖于外部库，既增加了项目复杂性，又带来了性能隐患。本文将提供一种最简洁的Vue3省市区三级联动实现方式，无需借助任何库，轻松实现地址选择功能。

痛点

教程冗长：网上教程鱼龙混杂，需要借助库来实现，对追求简洁性的开发者造成困扰。
依赖库：使用库固然简便，但引入额外依赖，增加项目体积和维护成本。
性能损耗：库的使用可能会带来性能开销，尤其是在项目中有多个三级联动选择框时。

解决方案

为了解决这些痛点，我们将在本文中介绍一种无需库即可实现省市区三级联动的Vue3写法。

步骤

导入省市区数据

首先，导入省市区数据。本文使用省市区json 作为数据源。

import provinceCityData from 'province-city-china'

定义ref

接下来，定义三个ref变量来存储选中的省份、城市和地区。

const selectedProvince = ref('')
const selectedCity = ref('')
const selectedArea = ref('')

定义计算属性

定义一个计算属性来获取当前选中的省市区。

const selectedRegion = computed(() => {
  return {
    province: selectedProvince.value,
    city: selectedCity.value,
    area: selectedArea.value
  }
})

定义选项数组

定义三个选项数组来存储省份、城市和地区的选项。

const provinceOptions = provinceCityData.map(province => {
  return {
    value: province.code,
    label: province.name
  }
})

const cityOptions = []
const areaOptions = []

监听省份选择

监听省份选择变化，更新城市和地区的选项。

watch(selectedProvince, (newValue, oldValue) => {
  const province = provinceCityData.find(province => province.code === newValue)
  if (province) {
    cityOptions.splice(0, cityOptions.length)
    areaOptions.splice(0, areaOptions.length)
    province.children.forEach(city => {
      cityOptions.push({
        value: city.code,
        label: city.name
      })
    })
  }
})

监听城市选择

监听城市选择变化，更新地区的选项。

watch(selectedCity, (newValue, oldValue) => {
  const city = provinceCityData.find(province => province.code === selectedProvince.value).children.find(city => city.code === newValue)
  if (city) {
    areaOptions.splice(0, areaOptions.length)
    city.children.forEach(area => {
      areaOptions.push({
        value: area.code,
        label: area.name
      })
    })
  }
})

渲染三级联动选择框

最后，使用 el-cascader 组件渲染三级联动选择框。

<template>
  <el-cascader
    v-model="selectedRegion"
    :options="provinceOptions"
    :props="cascadeProps"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedProvince,
      selectedCity,
      selectedArea,
      provinceOptions,
      cityOptions,
      areaOptions,
      cascadeProps: {
        children: 'children',
        value: 'code',
        label: 'name'
      }
    }
  },
  watch: {
    selectedProvince,
    selectedCity
  }
}
</script>