el-cascader得到数据和数据回显——基于中国省市区地址三级联动

1.得到数据(从el-cascader选择,得到数据)

<el-cascader size="medium" 
:options="options" v-model="selectOptions"(回显就是显示selectOption的值) 
@change="handleChange"></el-cascader>
data() {
  return {
	selectOptions: [],
	editForm:{}
	}
}
 //地址选择器
 handleChange(value) {
   console.log(CodeToText[value[0]], CodeToText[value[1]], CodeToText[value[2]])
   //我在本次中使用需要把省市区代码转化为文字
   this.editForm.province = CodeToText[value[0]] //得到省份
   this.editForm.area = CodeToText[value[1]] //得到市
   this.editForm.city = CodeToText[value[2]] //得到县
 },

2.回显数据(把已有数据重新显示在cascader)

 //地址选择器回显
 //把省市区文字重新转化为代码
 let selected = TextToCode[row.province][row.area][row.city].code
 let selected1 = JSON.stringify(selected).slice(1, 3)
 let selected2 = JSON.stringify(selected).slice(3, 5)
 let selected3 = JSON.stringify(selected).slice(5, -1)
 console.log(selected1, selected2, selected3)
 let arr = []
 arr.push(selected1+"0000")
 arr.push(selected1+selected2+"00")
 arr.push(selected1+selected2+selected3)
 console.log(arr)
 this.selectOptions = arr //重要,把处理后的数据重新赋值给selectOptions,让其显示

在这里插入图片描述
回显成功

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值