element-china-area-data 自定义

ElementUI 的 `el-cascader` 组件提供了一个 `options` 属性，可以接收一个数组来渲染级联选择器的选项。因此，我们可以通过自定义这个数组来实现自定义级联选择器的数据源。

`element-china-area-data` 是一个开源的中国省市区级联选择器数据源，我们可以通过引入这个数据源来快速实现中国地区选择功能。具体实现步骤如下：

1. 安装 `element-china-area-data`：可以通过 npm 或 yarn 安装，例如：

   npm install element-china-area-data --save

2. 在需要使用级联选择器的组件中引入 `element-china-area-data`

   import chinaAreaData from 'element-china-area-data';

3. 自定义级联选择器的 options 数组，示例代码如下：

   // 省份数据
   const provinceOptions = chinaAreaData['86'];
   // 城市数据
   const cityOptions = chinaAreaData[provinceValue];
   // 区县数据
   const districtOptions = cityOptions.find(item => item.value === cityValue).children;

   // 定义 options 数组
   const options = [
     {
       value: '86',
       label: '中国',
       children: provinceOptions.map(province => ({
         value: province.value,
         label: province.label,
         children: province.children.map(city => ({
           value: city.value,
           label: city.label,
           children: city.children.map(district => ({
             value: district.value,
             label: district.label,
           })),
         })),
       })),
     },
   ];

注：`provinceValue` 和 `cityValue` 是当前省份和城市的值，可以通过 `el-cascader` 组件的 `v-model` 双向绑定获取。

4. 在 `el-cascader` 组件中使用自定义的 options 数组：

   <el-cascader
     v-model="selected"
     :options="options"
     :props="{ value: 'value', label: 'label', children: 'children' }"
   ></el-cascader>

注：`:props` 属性用于指定级联选择器的 value、label 和 children 属性名，与 options 数组的数据结构对应。

通过以上步骤，我们就可以快速实现一个中国省市区级联选择器，并可自定义数据源。