el-select四级联动

el-select 可以通过嵌套使用来实现四级联动。具体来说，你可以在第一级 el-select 的 change 事件中根据选中的值，动态生成第二级 el-select，并在第二级的 change 事件中生成第三级 el-select，以此类推。下面是一个简单的示例代码：

<template>
  <div>
    <el-select v-model="selectedProvince" placeholder="请选择省份" @change="handleProvinceChange">
      <el-option v-for="province in provinces" :key="province.code" :label="province.name" :value="province.code"></el-option>
    </el-select>
    <el-select v-model="selectedCity" placeholder="请选择城市" @change="handleCityChange" :disabled="!cities.length">
      <el-option v-for="city in cities" :key="city.code" :label="city.name" :value="city.code"></el-option>
    </el-select>
    <el-select v-model="selectedDistrict" placeholder="请选择区县" @change="handleDistrictChange" :disabled="!districts.length">
      <el-option v-for="district in districts" :key="district.code" :label="district.name" :value="district.code"></el-option>
    </el-select>
    <el-select v-model="selectedTown" placeholder="请选择乡镇街道" :disabled="!towns.length">
      <el-option v-for="town in towns" :key="town.code" :label="town.name" :value="town.code"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinces: [], // 省份列表
      cities: [], // 城市列表
      districts: [], // 区县列表
      towns: [], // 乡镇街道列表
      selectedProvince: '', // 当前选中的省份
      selectedCity: '', // 当前选中的城市
      selectedDistrict: '', // 当前选中的区县
      selectedTown: '', // 当前选中的乡镇街道
    };
  },
  mounted() {
    // 初始化省份列表
    this.loadProvinces();
  },
  methods: {
    // 加载省份列表
    loadProvinces() {
      // TODO: 获取省份列表数据
      // 假设数据格式为：
      // [
      //   {
      //     code: '110000',
      //     name: '北京市',
      //   },
      //   ...
      // ]
      this.provinces = [
        {
          code: '110000',
          name: '北京市',
        },
        {
          code: '120000',
          name: '天津市',
        },
        {
          code: '130000',
          name: '河北省',
        },
        // ...
      ];
    },
    // 加载城市列表
    loadCities(provinceCode) {
      // TODO: 根据省份代码获取城市列表数据
      // 假设数据格式为：
      // [
      //   {
      //     code: '110100',
      //     name: '市辖区',
      //     provinceCode: '110000',
      //   },
      //   ...
      // ]
      this.cities = [
        {
          code: '110100',
          name: '市辖区',
          provinceCode: '110000',
        },
        {
          code: '110200',
          name: '县',
          provinceCode: '110000',
        },
        // ...
      ].filter(city => city.provinceCode === provinceCode);
      // 清空选中的城市、区县、乡镇街道
      this.selectedCity = '';
      this.selectedDistrict = '';
      this.selectedTown = '';
    },
    // 加载区县列表
    loadDistricts(cityCode) {
      // TODO: 根据城市代码获取区县列表数据
      // 假设数据格式为：
      // [
      //   {
      //     code: '110101',
      //     name: '东城区',
      //     cityCode: '110100',
      //   },
      //   ...
      // ]
      this.districts = [
        {
          code: '110101',
          name: '东城区',
          cityCode: '110100',
        },
        {
          code: '110102',
          name: '西城区',
          cityCode: '110100',
        },
        // ...
      ].filter(district => district.cityCode === cityCode);
      // 清空选中的区县、乡镇街道
      this.selectedDistrict = '';
      this.selectedTown = '';
    },
    // 加载乡镇街道列表
    loadTowns(districtCode) {
      // TODO: 根据区县代码获取乡镇街道列表数据
      // 假设数据格式为：
      // [
      //   {
      //     code: '110101001',
      //     name: '东华门街道办事处',
      //     districtCode: '110101',
      //   },
      //   ...
      // ]
      this.towns = [
        {
          code: '110101001',
          name: '东华门街道办事处',
          districtCode: '110101',
        },
        {
          code: '110101002',
          name: '景山街道办事处',
          districtCode: '110101',
        },
        // ...
      ].filter(town => town.districtCode === districtCode);
      // 清空选中的乡镇街道
      this.selectedTown = '';
    },
    // 省份变更事件处理函数
    handleProvinceChange(value) {
      // 加载城市列表
      this.loadCities(value);
    },
    // 城市变更事件处理函数
    handleCityChange(value) {
      // 加载区县列表
      this.loadDistricts(value);
    },
    // 区县变更事件处理函数
    handleDistrictChange(value) {
      // 加载乡镇街道列表
      this.loadTowns(value);
    },
  },
};

在上述代码中，我们通过四个 el-select 组件实现了省份、城市、区县和乡镇街道的四级联动。当用户选择省份时，会触发第一个 el-select 的 change 事件，在事件处理函数中动态生成第二个 el-select，并加载城市列表。当用户选择城市时，会触发第二个 el-select 的 change 事件，在事件处理函数中动态生成第三个 el-select，并加载区县列表。当用户选择区县时，会触发第三个 el-select 的 change 事件，在事件处理函数中动态生成第四个 el-select，并加载乡镇街道列表。最终，用户可以通过四个 el-select 组件选择到具体的乡镇街道。