html5表单省份级联,element-ui中的中国省市区级联选择器

element-ui中的中国省市区级联选择器

安装

执行以下语句安装城市数据：

npm install element-china-area-data -S

导入

以vue-cli创建的项目为例，在vue文件中的scrit标签内导入数据：

import { regionData, CodeToText } from "element-china-area-data";

使用

如下代码所示：

size="large"

:options="options"

v-model="selectedOptions"

@change="handleChange"

>

import { regionData, CodeToText } from "element-china-area-data";

export default {

name: "app",

data() {

return {

options: regionData,

selectedOptions: []

};

},

methods: {

handleChange() {

var loc = "";

for (let i = 0; i < this.selectedOptions.length; i++) {

loc += CodeToText[this.selectedOptions[i]];

}

alert(loc);

}

}

};

效果

如下图所示：

看门猫

发布了56 篇原创文章 · 获赞 12 · 访问量 1万+

私信

关注

标签：area,CodeToText,element,ui,china,data,选择器,selectedOptions

来源： https://blog.csdn.net/qq_36272282/article/details/104060683