vue element ui 省市区联动

Vue Element UI 提供了一些组件和方法来实现省市区联动选择。以下是一种实现方式：

1. 安装 Element UI：首先确保你的项目中已经安装了 Vue 和 Element UI。如果没有安装，可以使用 npm 或者 yarn 进行安装：

npm install element-ui --save
# 或者
yarn add element-ui

2. 引入需要的组件：在你的 Vue 项目入口文件（一般是 main.js）中，引入 Element UI 的样式和需要的组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 创建组件：创建一个包含省市区选择的组件，可以使用 `el-cascader` 组件来实现：

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="selectedValues"
      :props="props"
      @change="handleCascaderChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'province1',
          label: '省份1',
          children: [
            {
              value: 'city1',
              label: '城市1',
              children: [
                {
                  value: 'district1',
                  label: '区域1'
                },
                {
                  value: 'district2',
                  label: '区域2'
                }
              ]
            },
            {
              value: 'city2',
              label: '城市2',
              children: [
                {
                  value: 'district3',
                  label: '区域3'
                },
                {
                  value: 'district4',
                  label: '区域4'
                }
              ]
            }
          ]
        },
        // 其他省市区数据
      ],
      selectedValues: []
    };
  },
  computed: {
    props() {
      return {
        value: 'value',
        label: 'label',
        children: 'children'
      };
    }
  },
  methods: {
    handleCascaderChange(selectedValues) {
      // 处理省市区选择变化的逻辑
      console.log(selectedValues);
    }
  }
};
</script>

在上面的代码中，通过 `options` 数组来定义省市区的数据结构，然后使用 `el-cascader` 组件来展示选择框。`v-model` 指令绑定选中的值，`@change` 事件监听选择变化。

这样就实现了一个简单的省市区联动选择。你可以根据实际需求自定义数据结构和样式。