element使用Cascader进行省市 联动选择

道路千万条，安全第一条

在移动端常见的联动选择，vantUI里有封装好的组件，但是PC端并没有，该如何实现呢？

项目配置 : vue + element

经过尝试摸索，总结如下：

1.安装 element

npm i element

2.将省市文件拷贝到目录下
文件下载地址： 联动选择 文件下载

3.将文件引入 使用的组件内进行使用

<el-cascader
    :options="options"
    v-model="value"
    separator="  "
    @change="handleChange"
    @getCheckedNodes="getNodes"
    @expand-change="expandHandle"
></el-cascader>

import cityData from "../../city";
data(){
	return{
		options: cityData,
		value:[]
	}
}

注意：
页面此时显示的是正常的城市名，但绑定的数据是城市的编号。

若想将编号转换成城市名：

getCityName(value) {
      let options = JSON.parse(JSON.stringify(this.options));
      let cityName = [];
      for (let key in options) {
        if (options[key].value == value[0]) {
          cityName.push(options[key].label);
          for (let item in options[key].children) {
            if (options[key].children[item].value == value[1]) {
              cityName.push(options[key].children[item].label);
            }
          }
        }
      }
      return cityName;
    }

至此，over！