<template> <div class="appAddressSelection"> <el-cascader style="width:100%" :disabled="disabled" size ="medium" v-model="CurrentVal" :options="city"> </el-cascader> </div> </template> <script lang='ts'> import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator'; import { Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import axios from 'axios'; import { cityCode } from './city_code' @Component({}) export default class AppAddressSelection extends Vue { /** * 传入值 * @type {any} * @memberof AppAddressSelection */ @Prop() public value?:any; /** * 是否禁用 * @type {boolean} * @memberof AppAddressSelection */ @Prop() public disabled?: boolean; /** * 当前值 * * @memberof AppAddressSelection */ get CurrentVal() { return this.value; } /** * 值变化 * * @memberof AppAddressSelection */ set CurrentVal(val: any) { this.$emit("change", val); } /** * 城市数据 * * @memberof AppAddressSelection */ public city :any = []; /** * 获取城市数据 * * @memberof AppAddressSelection */ public getcity() { this.format(cityCode); } /** * 生命周期 * * @memberof AppAddressSelection */ public created() { this.getcity(); } /** * 数据格式化 * * @memberof AppAddressSelection */ public format(data :any) { let town = JSON.parse(JSON.stringify(data).replace(/city/g, 'children')) let county = JSON.parse(JSON.stringify(town).replace(/name/g, 'label')) let city = JSON.parse(JSON.stringify(county).replace(/area/g, 'children')) let province = JSON.parse(JSON.stringify(city).replace(/code/g, 'value')) this.city = province; } } </script> <style lang='less'> @import './app-address-selection.less'; </style>