基于element省市区级联组件

最新推荐文章于 2024-04-29 02:48:18 发布

原创

最新推荐文章于 2024-04-29 02:48:18 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue 省份三级级联

博客介绍了基于 element UI 的 3 个 select 选择器级联。利用 element 提供的省份数据结构，通过下载数据、引入数据等步骤实现。因数据结构良好，简单过滤即可渲染，还可制作成公用组件在项目多处使用。

基于 element UI 的 3 个 select 选择器级联

官网的是的一个select 选择器，一般的 UI 设计都是 3 个 select 选择器，因此使用 element 提供的省份数据结构，粗略的做了一个。

效果图：

在这里插入图片描述

1.下载数据

npm install element-china-area-data -S

2.引入数据

import {
   
    regionData } from 'element-china-area-data'

3.完整代码

<template>
  <div>
    <br>
    <!-- 省 -->
    <el-select
      size="small"
      style="width: 200px"
      v-model="selectProv"
      placeholder="请选择省份"
      filterable
      clearable
      @change="getProv"
    >
      <el-option
        v-for="item in provs"
        :label="item.label"