vue + elementUI实现省市县三级联动的方法示例

下面我将为您详细讲解“vue + elementUI实现省市县三级联动的方法示例”的完整攻略。

1. 确定数据来源

实现省市县三级联动功能，首先需要确定数据来源，可以在后端中获取，也可以使用前端数据。本文以前端数据为例，数据格式如下：

const regionData = [
  {
    value: '110000',
    label: '北京市',
    children: [
      {
        value: '110100',
        label: '市辖区',
        children: [
          {
            value: '110101',
            label: '东城区'
          },
          {
            value: '110102',
            label: '西城区'
          },
          // 省略部分数据
        ]
      }
    ]
  },
  // 省略部分数据
]

2. 创建三个级联选择器

使用Element UI的el-cascader组件创建三个级联选择器，分别对应省、市、县：

<el-cascader
  :options="provinceList"
  placeholder="请选择省份"
  v-model="selectedProvince"
  clearable
  @change="provinceChange"
></el-cascader>
<el-cascader
  :options="cityList"
  placeholder="请选择城市"
  :disabled="!selectedProvince"
  v-model="selectedCity"
  clearable
  @change="cityChange"
></el-cascader>
<el-cascader
  :options="countyList"
  placeholder="请选择区县"
  :disabled="!selectedCity"
  v-model="selectedCounty"
  clearable
></el-cascader>

3. 加载省份数据

在组件的created()生命周期中加载省份数据，代码如下：

created() {
  this.provinceList = regionData.map(item => ({
    value: item.value,
    label: item.label
  }));
}

4. 加载城市数据

省份选择完成时，根据选中的省份value获取对应的城市数据，动态更新城市选择器。代码如下：

provinceChange(val) {
  this.selectedCity = '';
  this.selectedCounty = '';
  if (val.length > 0) {
    const province = this.getRegionByValue(val[val.length - 1]);
    this.cityList = province.children ? province.children.map(item => ({
      value: item.value,
      label: item.label
    })) : [];
  } else {
    this.cityList = [];
    this.countyList = [];
  }
}

5. 加载区县数据

城市选择完成时，根据选中的省份value和城市value获取对应的区县数据，动态更新区县选择器。代码如下：

cityChange(val) {
  this.selectedCounty = '';
  if (val.length > 0) {
    const province = this.getRegionByValue(this.selectedProvince[this.selectedProvince.length - 1]);
    const city = province.children ? province.children.find(item => item.value === val[val.length - 1]) : null;
    this.countyList = city && city.children ? city.children.map(item => ({
      value: item.value,
      label: item.label
    })) : [];
  } else {
    this.countyList = [];
  }
}

6. 辅助方法

在上面的代码中，获取对应value的地区信息使用了getRegionByValue方法，代码如下：

getRegionByValue(value) {
  let result = null;
  function findRegion(data) {
    for (let i = 0; i < data.length; i++) {
      if (data[i].value === value) {
        result = data[i];
        return true;
      } else if (data[i].children) {
        if (findRegion(data[i].children)) {
          return true;
        }
      }
    }
    return false;
  }
  findRegion(regionData);
  return result;
}

这个方法是采用递归方式遍历数据，查找对应value的地区信息。

示例说明

示例一

假设我们已经初始化完省份数据，现在需要根据用户选中的省份，动态加载城市数据。

第一步需要在data中定义三个变量：

data() {
  return {
    // 省份选中值
    selectedProvince: '',
    // 省份列表
    provinceList: [],
    // 城市列表
    cityList: []
  }
}

第二步在created()生命周期中加载省份数据：

created() {
  this.provinceList = regionData.map(item => ({
    value: item.value,
    label: item.label
  }));
}

第三步在省份选择器中绑定selectedProvince变量，并监听change事件：

<el-cascader
  :options="provinceList"
  placeholder="请选择省份"
  v-model="selectedProvince"
  clearable
  @change="provinceChange"
></el-cascader>

第四步在provinceChange方法中根据选中的省份value获取对应的城市数据：

provinceChange(val) {
  this.selectedCity = '';
  this.selectedCounty = '';
  if (val.length > 0) {
    const province = this.getRegionByValue(val[val.length - 1]);
    this.cityList = province.children ? province.children.map(item => ({
      value: item.value,
      label: item.label
    })) : [];
  } else {
    this.cityList = [];
    this.countyList = [];
  }
}

示例二

假设省份和城市数据已经加载完成，现在需要根据用户选择的城市，动态加载区县数据。

第一步需要在data中新增一个变量：

data() {
  return {
    // 城市选中值
    selectedCity: '',
    // 区县列表
    countyList: []
  }
}

第二步在cityChange方法中根据选中的省份value和城市value获取对应的区县数据：

cityChange(val) {
  this.selectedCounty = '';
  if (val.length > 0) {
    const province = this.getRegionByValue(this.selectedProvince[this.selectedProvince.length - 1]);
    const city = province.children ? province.children.find(item => item.value === val[val.length - 1]) : null;
    this.countyList = city && city.children ? city.children.map(item => ({
      value: item.value,
      label: item.label
    })) : [];
  } else {
    this.countyList = [];
  }
}

第三步在城市选择器中绑定selectedCity变量，并监听change事件：

<el-cascader
  :options="cityList"
  placeholder="请选择城市"
  :disabled="!selectedProvince"
  v-model="selectedCity"
  clearable
  @change="cityChange"
></el-cascader>

以上就是“vue + elementUI实现省市县三级联动的方法示例”的完整攻略。