用element ui的el-select实现省市区三级联动

好的，下面是一个简单的例子：

<template>
  <el-form>
    <el-form-item label="省份">
      <el-select v-model="province" placeholder="请选择" @change="handleProvinceChange">
        <el-option v-for="item in provinceList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="城市">
      <el-select v-model="city" placeholder="请选择" @change="handleCityChange">
        <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="区县">
      <el-select v-model="area" placeholder="请选择">
        <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      province: '',
      city: '',
      area: '',
      provinceList: [
        { label: '北京', value: '110000' },
        { label: '上海', value: '310000' },
        { label: '广东', value: '440000' },
      ],
      cityList: [],
      areaList: [],
    };
  },
  methods: {
    handleProvinceChange(value) {
      // 省份改变，清空城市和区县
      this.city = '';
      this.area = '';

      // 根据省份获取城市列表
      this.cityList = [
        { label: '深圳', value: '440300' },
        { label: '广州', value: '440100' },
        { label: '珠海', value: '440400' },
      ];
    },
    handleCityChange(value) {
      // 城市改变，清空区县
      this.area = '';

      // 根据城市获取区县列表
      this.areaList = [
        { label: '罗湖区', value: '440303' },
        { label: '福田区', value: '440304' },
        { label: '南山区', value: '440305' },
      ];
    },
  },
}
</script>

这里的数据是写死的，实际开发中可能需要通过接口获取，这里只是为了演示实现的思路。根据省份获取城市列表和根据城市获取区县列表的逻辑可以根据实际需求进行调整。