vue三级联动加编码

最新推荐文章于 2023-08-14 10:15:56 发布

什么也不在说

最新推荐文章于 2023-08-14 10:15:56 发布

阅读量187

点赞数

分类专栏： vue三级联动文章标签： vue

本文链接：https://blog.csdn.net/weixin_45854395/article/details/107740696

版权

vue三级联动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

废话不说，直接上代码：

                              <div class="edit_box_item">
                                  <label>所在地区</label>
                                  <el-select
                                    v-model="province_code"
                                    @change="changeProvince(province_code)"
                                    placeholder="省">
                                    <el-option
                                        v-for="item in provinceList"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value">
                                    </el-option>
                                  </el-select>
                                  <el-select
                                      v-model="city_code"
                                      @change="changeCity(city_code)"
                                      placeholder="市">
                                      <el-option
                                          v-for="item in cityOptions"
                                          :key="item.value"
                                          :label="item.name"
                                          :value="item.value">
                                      </el-option>
                                  </el-select>
                                  <el-select
                                      v-model="country_code"
                                      @change="changeOrigin"
                                      placeholder="区/县">
                                      <el-option
                                          v-for="item in originOptions"
                                          :key="item.value"
                                          :label="item.name"
                                          :value="item.value">
                                      </el-option>
                                  </el-select>
                                </div>

先引入js三级联动
import { mapdata } from "../../assets/js/map";



data(){
    return {
      provinceList: [], // 省列表
      cityOptions: [], // 市列表
      originOptions: [], // 区列表
    }
},
mounted(){
this._getJsonData();
},
methods: {
// 选择省
    changeProvince(val) {
      this.cityOptions = [];
      this.getAllList.forEach(data => {
        if (val == data.parent) {
          this.cityOptions.push(data);
        }
      });
      this.city_code = this.cityOptions[0].value;
      this.changeCity(this.city_code);
    },
    // 选择市
    changeCity(val) {
      this.originOptions = [];
      this.getAllList.forEach(data => {
        if (val == data.parent) {
          this.originOptions.push(data);
        }
      });
      this.country_code = this.originOptions[0].value;
      this.changeOrigin(this.country_code);
    },
    // 选择区
    changeOrigin(val) {},
    _getJsonData() {

          this.getAllList = mapdata;
          this.getAllList.forEach(data => {
            if (!data.parent) {
              this.provinceList.push(data);
            }
          });

          if (this.$route.query.editData) {
            this.editData = this.$route.query.editData;
            this.linkman = this.editData.linkman;
            this.contact = this.editData.contact;
            this.address_detail = this.editData.address_detail;
            this.default = this.editData.default;
            if (this.default == 1) {
              this.switchvalue = true;
            } else {
              this.switchvalue = false;
            }
            this.province_code = String(this.editData.province_code);
            this.city_code = String(this.editData.city_code);
            this.getAllList.forEach(data => {
              if (this.province_code == data.parent) {
                this.cityOptions.push(data);
              }
              if (this.city_code == data.parent) {
                this.originOptions.push(data);
              }
            });
            this.country_code = String(this.editData.country_code);
            this.add_lat = this.editData.add_lat;
            this.add_lon = this.editData.add_lon;
            this.tolnglat = [this.add_lon, this.add_lat];
          }
        

     
    },
}

export const mapdata = [{

"name": "北京市",

"value": "110000"

{

"name": "天津市",

"value": "120000"

}

]