element ui 三级联动

### 使用Element UI实现省市区三级联动选择器

为了在Vue项目中创建一个省市区三级联动选择器，需先引入必要的库和样式文件[^1]：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 注册ElementUI插件
Vue.use(ElementUI);

接着导入用于处理地区数据的辅助工具包`element-china-area-data`[^3]：

import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

定义组件模板部分，这里采用的是ElCascader组件来构建级联选择框结构[^2]：

<template>
  <div class="address-selector">
    <!-- 级联选择器 -->
    <el-cascader
      :options="regionOptions"
      v-model="selectedRegion"
      @change="handleAddressChange"
      placeholder="请选择所在区域"></el-cascader>

    <!-- 显示选中的地址信息 -->
    <p>已选地址：<span>{{ displayAddress }}</span></p>
  </div>
</template>

编写脚本逻辑以完成交互功能[^4]：

export default {
  data() {
    return {
      selectedRegion: [], // 存储用户选择的结果
      regionOptions: regionData, // 地区选项列表
      form: {
        province: '',
        city: '',
        town: ''
      }
    };
  },
  computed: {
    displayAddress() {
      let addressParts = [];
      
      if (this.selectedRegion && this.selectedRegion.length === 3) {
        const [provinceCode, cityCode, districtCode] = this.selectedRegion;
        
        addressParts.push(CodeToText[provinceCode]);
        addressParts.push(CodeToText[cityCode]);
        addressParts.push(CodeToText[districtCode]);

        Object.assign(this.form, {
          province: CodeToText[provinceCode],
          city: CodeToText[cityCode],
          town: CodeToText[districtCode]
        });
      }

      return addressParts.join(' ');
    }
  },
  methods: {
    handleAddressChange(value) {
      console.log(`选择了新的地址：${value}`);
    }
  }
};

上述代码展示了如何利用Element UI框架下的ElCascader组件配合第三方地理编码转换函数（来自`element-china-area-data`），从而轻松搭建起一套完整的省市级联菜单系统。