vue-elementui省市区三级选择器

在Vue中使用ElementUI的省市区三级联动选择器，可以按照以下步骤进行：

1. 首先，需要引入ElementUI组件库和相关样式文件。可以在入口文件中引入，例如在main.js中添加以下代码：

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

2. 在需要使用省市区选择器的组件中，定义三个变量分别用来存储省、市、区的数据。例如：

data() {
  return {
    provinceList: [],  // 省份列表
    cityList: [],  // 城市列表
    areaList: [],  // 区县列表
  }
}

3. 在组件的模板中，使用ElementUI提供的Cascader组件来实现三级联动选择器。在Cascader组件中，需要绑定选项列表数据、绑定选中值、定义选项的展示方式等。例如：

<el-cascader
  :options="provinceList"
  :props="{ value: 'value', label: 'label', children: 'children' }"
  v-model="selectedAddress"
  @change="handleAddressChange"
></el-cascader>

其中，`:options`绑定省份列表数据，`:props`定义选项的展示方式，`v-model`绑定选中值，`@change`监听选中值的变化。

4. 在组件的methods中，定义方法来获取省、市、区的数据，并根据选中的省、市的值来更新市、区的数据。例如：

methods: {
  // 获取省份列表数据
  getProvinceList() {
    axios.get('/api/province').then(res => {
      this.provinceList = res.data;
    });
  },
  // 获取城市列表数据
  getCityList(provinceId) {
    axios.get('/api/city', { params: { provinceId } }).then(res => {
      this.cityList = res.data;
    });
  },
  // 获取区县列表数据
  getAreaList(cityId) {
    axios.get('/api/area', { params: { cityId } }).then(res => {
      this.areaList = res.data;
    });
  },
  // 选中省市区时触发
  handleAddressChange(value) {
    if (value.length === 1) {
      // 选中省份时，获取对应城市列表数据
      this.getCityList(value[0]);
      this.areaList = [];
    } else if (value.length === 2) {
      // 选中城市时，获取对应区县列表数据
      this.getAreaList(value[1]);
    }
  },
},

其中，`getProvinceList`方法用来获取省份列表数据，`getCityList`方法用来获取城市列表数据，`getAreaList`方法用来获取区县列表数据，`handleAddressChange`方法用来根据选中的省、市的值来更新市、区的数据。

以上就是使用ElementUI的省市区三级联动选择器的基本步骤。