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

最新推荐文章于 2024-01-27 10:59:10 发布

原创最新推荐文章于 2024-01-27 10:59:10 发布 · 752 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

vue 同时被 2 个专栏收录

61 篇文章

订阅专栏

elementUI

19 篇文章

订阅专栏

在Vue项目中，移动端 vantUI 提供了联动选择组件，但PC端的 element UI 并未内置。本文介绍了如何在基于 Vue 和 Element 的PC端应用中实现联动选择功能，包括安装 Element，引入省市数据文件，以及在组件中使用和处理数据的方法，确保显示城市名称而非编号。

道路千万条，安全第一条

在移动端常见的联动选择，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;
    }