如何使用vue 城市选择器的 element-china-area-data插件来实现省市县三级联动
时间: 2023-08-08 13:09:30 浏览: 99
使用 `element-china-area-data` 插件可以非常方便地实现省市县三级联动选择器。下面是具体的实现步骤:
1. 安装 `element-china-area-data` 插件
使用 npm 安装 `element-china-area-data` 插件:
```bash
npm install element-china-area-data --save
```
2. 引入 `element-china-area-data` 插件
可以在 `main.js` 文件中引入 `element-china-area-data` 插件:
```javascript
import Vue from 'vue'
import Element from 'element-ui'
import chinaAreaData from 'element-china-area-data'
Vue.use(Element)
Vue.prototype.$chinaAreaData = chinaAreaData
```
3. 创建省市县三级联动选择器
使用 `el-cascader` 组件创建省市县三级联动选择器,同时使用 `element-china-area-data` 插件提供的数据源:
```html
<template>
<el-cascader
v-model="selected"
:options="options"
:props="{ value: 'name', label: 'name', children: 'children' }"
change-on-select
></el-cascader>
</template>
<script>
export default {
data() {
return {
selected: [],
options: this.$chinaAreaData
}
}
}
</script>
```
其中,`options` 属性绑定了 `$chinaAreaData` 对象,`props` 属性设置了数据源的字段名,`change-on-select` 属性表示选择任意一级选项后立即显示结果。
这样就可以创建一个简单的省市县三级联动选择器了。