Vue + ElementUI 实现全国各个省份相对应城市的联动选择_vue+elementui 省市区联动

在Vue中使用ElementUI实现省市区的联动选择器，可以通过el-cascader组件来实现。首先，你需要有一个包含省市区信息的数据结构。以下是一个简单的例子：

<template>
  <el-cascader
    :options="options"
    v-model="selectedOptions"
    @change="handleChange">
  </el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          label: '北京市',
          value: '北京市',
          children: [
            {
              label: '市辖区',
              value: '市辖区'
            },
            {
              label: '县',
              value: '县',
              children: [
                {
                  label: '朝阳区',
                  value: '朝阳区'
                },
                // ... 其他区县
              ]
            }
            // ... 其他城乡 township
          ]
        },
        // ... 其他省份
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
      // 处理选择结果
    }
  }
};
</script>

在这个例子中，options 是一个包含了中国各省市区的层级数据结构，每个省份下面可以有城市，城市下面可以有区县或者乡镇。v-model 绑定了一个selectedOptions数组，它将会保存当前选中的值。handleChange 方法用于处理选择器的变化，你可以在这里实现你的业务逻辑。

请确保你已经在项目中安装并配置了ElementUI，因为el-cascader是ElementUI提供的一个级联选择器组件。