Vue+elementUI实现省市区三级联动select

今天实现了省市区三级联动select,网上有很多乱糟糟的教程,其实很简单,这里做一下简单记录
使用elementUI数据

1、获取elementUI的省市区级联数据

npm install element-china-area-data -S

2、引入数据

import { regionData } from 'element-china-area-data'

3、在vue页面中使用

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

你可能感兴趣的:(Vue)