级联选择框,怎样绑定最好

 

 

<!-- ontions指定数据源 -->

 <el-cascader size="large" :options="options" style=" 400px;" v-model="province" @change="handleAreaChange"></el-cascader>

import { regionData, CodeToText, TextToCode } from 'element-china-area-data'


这里给options就有了数据源,
在return {
   options: regionData,
   province :[]
}


// 这里改变级联框就会打印了code码
method : {
   handleAreaChange(val) {
      console.log(val)
    },
}


注意如果需要用级联框的每一项的字符串去发送请求直接是
province: CodeToText[this.province[0]], //省
city: CodeToText[this.province[1]], //市
district: CodeToText[this.province[2]], //区


如果是返回的字符库我们需要转换成code码并且赋值给级联选择器的数组,就可以在页面上回显了


this.province = []
this.province[0] = TextToCode[res.data[0].province].code
this.province[1] = TextToCode[res.data[0].province][res.data[0].city].code
this.province[2] = TextToCode[res.data[0].province][res.data[0].city][res.data[0].district].code