element-ui 省市区联动组件 el-cascader

<el-form-item label="省市 :" prop="description">
                            <el-cascader size="large" clearable class="customized_input_340" change-on-select :options="provinceOptions" v-model="selectedOptions" @change="handleChange">
                            </el-cascader>
                        </el-form-item>
import 
{ 
    provinceAndCityData, 
    regionData, 
    provinceAndCityDataPlus, 
    regionDataPlus, 
    CodeToText, 
    TextToCode 
} 
from 'element-china-area-data'
data() {
        return {
            provinceOptions: provinceAndCityData,
            selectedOptions: [],
        }
}
//省市级联
        handleChange(val) {
            console.log(val)
            this.ruleForm.province = CodeToText[val[0]] 
            this.ruleForm.city = CodeToText[val[1]] 
        },
//回显

//根据接口数据找到对应code用于回显
                    let sameProvince = provinceAndCityData.find((province)=>{
                        return province.label == data.province
                    })
                    let sameCity = sameProvince.children.find((city)=>{
                        return city.label == data.city
                    })
                    this.selectedOptions = [sameProvince.value,sameCity.value]

 

posted @ 2019-10-28 15:50  abcByme  阅读(3049)  评论(0编辑  收藏  举报