如何使用Vue+ElementUI制作三级联动

1.使用elementui级联选择器

<el-cascader
   v-model="address"
   :options="options"
   @change="handleChange"
></el-cascader>

2.安装element-china-area-data

npm install element-china-area-data -S

 3.在页面上引用

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

4.将regionData赋值给options

data() {
    return {
      options: regionData
    };
  },

效果图：

完整代码：

<template>
  <div>
     <el-cascader
        v-model="address"
        :options="options"
        @change="handleChange"
     ></el-cascader>
  </div>
</template>
<script>
import { regionData } from 'element-china-area-data'
export default {
  data() {
    return {
      address:[],
      options: regionData
    };
  },
  methods: {
    handleChange(val){
      console.log(val)
    }
  }
};
</script>
<style scoped>

</style>

element-china-area-data安装/实例/使用：

https://github.com/Plortinus/element-china-area-data

想使用其他技术或方法可以借阅：

JS 的省市区三级联动选择组件 - Javascript - 大象笔记