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

2023年5月25日12:05:46

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，让其显示

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

  • 作者：理想001
  • 原文链接：https://blog.csdn.net/L_s_h_123456/article/details/120637651
    更新时间：2023年5月25日12:05:46 ，共 942 字。