vue中级联选择器回填_vue项目中的element-ui地区级联选择器

在项目开发过程中遇到了需要用到element-ui的el-cascader地区级联选择的问题，做个笔记记录下。

1.资源文件引入

src="/static/test/lib/js/vue/vue-resource.js"

>

2.新建选择器

placeholder="请点击选择地址"

:options="options"

v-model="selectedOptions"

@change="handleChange"

clearable

>

3.参数定义

data() {

return {

options: [],

selectedOptions: [],

cityArr: [], //城市列表

areaArr: [], //区县列表

province: "", //省

city: "", //市

area: "", // 区县,

provinceCityArea: "", //选择器选择的省市区

};

},

4.地区初始化(注：districts.json文件为全国区划编码的JSON对象)

initDistPicker() {

console.log("initDistrictsPicker");

let self = this;

this.$http.get("/static/js/districts.json").then(function(respones) {

console.log("respones==>", respones);

let distData = respones.data;

let options = [];

// 省

for (var provinceKy in distData["100000"]) {

let optProvinceItem = {

value: provinceKy,

label: distData["100000"][provinceKy]

};

if (distData[provinceKy]) {

// 市

for (var cityKy in distData[provinceKy]) {

optProvinceItem.children = optProvinceItem.children

? optProvinceItem.children

: [];

let optCityItem = {

value: cityKy,

label: distData[provinceKy][cityKy]

};

if (distData[cityKy]) {

// 区

for (var areaKy in distData[cityKy]) {

optCityItem.children = optCityItem.children

? optCityItem.children

: [];

let optAreaItem = {

value: areaKy,

label: distData[cityKy][areaKy]

};

optCityItem.children.push(optAreaItem);

}

}

optProvinceItem.children.push(optCityItem);

}

}

options.push(optProvinceItem);

}

self.distData = distData;

self.options = options;

});

}

5.选择器地区选择触发方法

//选择地区

handleChange(value) {

let self = this;

console.log("value=>", value);

//获取省名

self.options.map((item, index) => {

if (item.value == value[0]) {

self.cityArr = item.children; //存储城市列表

self.province = item.label;

}

});

//获取市名

self.cityArr.map((item, index) => {

if (item.value == value[1]) {

self.areaArr = item.children; //存储区县列表

self.city = item.label;

}

});

//获取区县名

self.areaArr.map((item, index) => {

if (item.value == value[2]) {

self.area = item.label;

}

});

self.provinceCityArea = self.province + self.city + self.area;

console.log("self.provinceCityArea", self.provinceCityArea);

},

6.districts.json文件下载链接