快速实现ElementPlus + Vue3 + JS的极简省市区组件

前端

2023-10-22 10:48:23

ElementPlus 省市区组件指南：Vue 3 中轻松实现省市区选择和展示

在前端开发中，省市区选择器组件是不可或缺的元素，它可以帮助用户快速准确地选择地址信息。然而，开发一个从头开始的省市区组件可能是一项艰巨的任务，需要花费大量时间和精力。

ElementPlus 闪耀登场：省市区组件开发的福音

ElementPlus 是一个强大的 Vue UI 组件库，以其简洁直观的设计和丰富的组件集而著称。借助 ElementPlus，我们可以轻松构建一个省市区选择器组件，同时节省大量时间和精力。

打造 ElementPlus 省市区组件：深入解析

准备阶段：

在 Vue 3 项目中安装 ElementPlus：npm install element-plus

核心组件：

Option 类： 封装省市区信息，包括唯一值、显示值和子项。
组件模板： 定义组件外观，使用嵌套结构呈现省市区数据。
计算属性： 负责数据绑定和计算。

数据获取：

根据实际业务需求获取省市区数据。
本文演示使用 AJAX 从服务端获取数据。

展示逻辑：

使用 v-model 绑定选中的省市区信息。
onChange 事件处理选择变化，触发自定义事件。

在应用中使用组件：

在模板中引入组件。
定义组件使用的省市区数据。
在组件挂载后加载数据。

示例代码：

<template>
  <el-select v-model="provinceId" placeholder="省/市/区">
    <ProvinceCityArea :provinces="provinces" :cities="cities" :areas="areas" />
  </el-select>
</template>

<script>
import { ref } from 'vue';
import ProvinceCityArea from './ProvinceCityArea.vue';

export default {
  components: { ProvinceCityArea },
  setup() {
    const provinces = ref([]);
    const cities = ref([]);
    const areas = ref([]);

    const fetchProvinces = async () => {
      const response = await fetch('/api/provinces');
      const data = await response.json();
      provinces.value = data;
    };

    return {
      provinces,
      cities,
      areas,
      fetchProvinces,
    };
  },
};
</script>