ElementUI實現一個省市區cascader

介紹

​ 近期有使用到 ElementUI 框架，為此基於其中 cascader 組件做了一個省市區級聯選擇功能。

Git地址：https://gitee.com/ychizzz/element-ui-city-selector

ElementUI-cascader組件：https://element.eleme.cn/2.0/#/zh-CN/component/cascader#cascader-ji-lian-xuan-ze-qi

代碼實現

<!-- CitySelector.vue -->
<template>
  <div class="city_selector">
    <el-cascader
      :options="regionData"
      v-model="selectedOptions"
      @change="handleChange"
      :clearable="true"
      :placeholder="'請選擇省/市/區縣'"
    >
    </el-cascader>
  </div>
</template>

<script>
import regionData from "../js/index";

export default {
  name: "CitySelector",
  data() {
    return {
      regionData,
      selectedOptions: [],
    };
  },
  methods: {
    handleChange() {

    },
  }
}
</script>

<style scoped>
</style>

// index.js
import DATA from './pro_city_dis'  // 省市區縣數據源

const provinceData = DATA[100000] // provinceData拿到數據源中的全部的省份
const regionData = [] // 用於存放格式正確的省/市/區縣數據，最終需要export出去

// 省
for (const provinceCode in provinceData) { // provinceCode拿到省份編碼
    regionData.push({
        value: provinceCode,
        label: provinceData[provinceCode]
    })
}

// 市
for (const provinceObj of regionData) { // provinceObj拿到regionData中的省份對象
    // 需要給provinceObj添加children屬性，以激活市級select框
    let city = []
    for (const cityCode in DATA[provinceObj.value]) { // DATA[provinceObj.value]拿到數據源所有的市，cityCode拿到所有市的編碼
        city.push({
            value: cityCode,
            label: DATA[provinceObj.value][cityCode]
        })
        if (city.length) { // 排除掉不存在市的省份
            provinceObj.children = city // 添加children屬性，激活市級select框
        }
    }
}

// 區縣
for (const provinceObj of regionData) { // provinceObj拿到regionData中的省份對象
    let cityObj = provinceObj.children // cityObj拿到每個省份下的所有市
    if (cityObj) { // 因為“海外”選項沒有市級，所有需要排除
        for (const city of cityObj) { // city拿到每個市
            // 給city添加children屬性，以激活區/縣select框
            let district = []
            for (const districtCode in DATA[city.value]) { // districtCode拿到對應市下所有區縣
                district.push({
                    value: districtCode,
                    label: DATA[city.value][districtCode]
                })
            }
            if (district.length) {
                city.children = district
            }
        }
    }
}

export default regionData

數據源查看：https://gitee.com/ychizzz/element-ui-city-selector/blob/master/src/js/pro_city_dis.js

實現效果

以上就是全部內容，希望對大家學習有幫助！