vue+element省市县的二级联动功能

项目中有选择省市县的需求,先选择省,再选择县

解决这个需求也不是很难,总体思路就是看后端接口,

一般后端接口都是请求参数为 0 返回省的数据,不为 0 的话返回相对应的市的数据

template代码:

<el-form-item label="所属地区: ">
          <el-select
            v-model="form.province"
            @change="getRegion(form.province)"
            placeholder="请选择省份"
            style=" 165px;"
          >
            <el-option
              :label="item1.region_name"
              :value="item1.region_id"
              v-for="(item1,i) in provinceList"
              :key="i"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.city"
            placeholder="请选择城市"
            style=" 165px;margin-left:10px;"
          >
            <el-option
              v-for="(item2,i) in cityList"
              :key="i"
              :label="item2.region_name"
              :value="item2.region_id"
            ></el-option>
          </el-select>
        </el-form-item>

script代码：

data数据声明：

 data() {
    return {
      form: {
        province: "",
        city: "",
      },
      // 省市县的信息
      provinceList: [], //获取的一级数组数据
      cityList: [] //获取的二级数组数据
    };
  },

通过判断  region_id 来发请求获取数据

methods代码:

async getRegion(id) {
      let _this = this;
      let data = {
        region_id: id
      };
      this.form.city = "";
      if (id == 0) {
        const res = await this.$axios.post("/region/list", { ...data });
        _this.provinceList = res.data;
      } else {
        const res = await this.$axios.post("/region/list", { ...data });
        _this.cityList = res.data;
      }
    },