基于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"
        :value="item.value"
        :key="item.value"
      >
      </el-option>
    </el-select>
    <!-- 市 -->
    <el-select
      size="small"
      style="width: 200px"
      v-model="selectCity"
      placeholder="请选择城市"
      filterable
      clearable
      @change="getCity"
    >
      <el-option
        v-for="item in citys"
        :label="item.label"
        :value="item.value"
        :key="item.value"
      >
      </el-option>
    </el-select>
    <!-- 区 -->
    <el-select
      size="small"
      style="width: 200px"
      v-model="selectArea"
      placeholder="请选择城市"
      filterable
      clearable
    >
      <el-option
        v-for="item in area"
        :label="item.label"
        :value="item.value"
        :key="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>
 
<script>
import { regionData } from "element-china-area-data";
export default {
  data() {
    return {
      provs: regionData,
      citys: [],
      area: [],
      selectProv: "",
      selectCity: "",
      selectArea: "",
    };
  },
  methods: {
    // 选择省
    getProv: function () {
      this.citys = [];
      this.area = [];
      this.selectCity = "";
      this.selectArea = "";
      let cityItem = this.provs.filter(item => item.value === this.selectProv);
      if (cityItem[0]) {
        this.citys = cityItem[0].children;
      }
    },
    // 选择城市
    getCity: function () {
      this.area = [];
      this.selectArea = "";
      let areaItem = this.citys.filter((item) => item.value === this.selectCity);
      if (areaItem[0]) {
        this.area = areaItem[0].children;
      }
    },
  },
};
</script>

主要是数据结构好，简单过滤就能渲染，不需要复杂的处理数据结构。再把它制作成一个公用组件就可以在项目中多处使用啦。