<el-cascader :options="options" // 存放省市县数据的变量v-model="selectedOptions" // 存放被选择数据的变量expand-trigger="hover" // 实现鼠标悬停时调用下方绑定的函数handleItemChangeplaceholder="请选择省市区":props="{ //去改变默认数据格式的key值value: 'id',label: 'name',children: 'cities'}"@active-item-change="handleItemChange" // 点击选中省/市/县时触发>
</el-cascader>
handleItemChange(val: any) { // val默认是被选中的id值this.getNodes(val)}async getNodes(val?: any) {let idArea;let sizeArea: any;if (!val) {idArea = nullsizeArea = 0} else if (val.length === 1) {idArea = val[0]sizeArea = val.length // 二级} else if (val.length === 2) {idArea = val[1]sizeArea = val.length // 三级}if (sizeArea === 0) { // 初始化 加载一级 省let response = await getAllProvinceList({})console.log(response, this.options);let ItemsProvince = response.data.result[0]this.options = ItemsProvince.map((value: any, i: number) => {return {id: value.id,name: value.name,cities: []}})// console.log(this.options);} else if (sizeArea === 1) { // 点击一级 加载二级 市let data = {id: val[0]}let response = await getSomeCityList(data)let ItemsCity = response.data.result[0]console.log(response);this.options.map((value: any, i: number) => {if (value.id === val[0]) {if (!value.cities.length) {value.cities = ItemsCity.map((value: any, i: number) => {return {id: value.id,name: value.name,cities: []}})}}})} else if (sizeArea === 2) { // 点击二级 加载三级 区let data = {id: val[1]}let response = await getSomeCityList(data)let ItemsCity = response.data.result[0]this.options.map((value: any, i: number) => {if (value.id === val[0]) {value.cities.map((valueOne: any, i: number) => {if (valueOne.id === val[1]) {if (!valueOne.cities.length) {valueOne.cities = ItemsCity.map((value: any, i: number) => {return {id: value.id,name: value.fullname}})}}})}})// console.log(this.options);}};