vue实现省市区三级联动

vue实现省市区三级联动

效果图 (通过element的Cascader 级联选择器实现的)

实现过程

npm install element-china-area-data -S

import { regionData } from 'element-china-area-data';;//先在需要显示省市区的页面

<template>
  <div>
    <el-cascader ref="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', value);//获取到所选省市区的编码
      let info = this.$refs.casCader.getCheckedNodes()[0].pathLabels;//获取到省市区的名称
      console.log('info', info);
    },
  },
};
</script>

官网详解

中国省市区级联数据官网（有更详细的说明）