省市区级联选择器在element中的应用

1.在 src/assets 下添加pca.json

省市区级联选择器在element中的应用_第1张图片
链接: pca.json.

2.导入并引用pca.json
import pca from '@assets/pca.json'

省市区级联选择器在element中的应用_第2张图片

3.使用级联选择器
<el-cascader v-model="form.addresses" :props="addressProps" :options="pca" clearable></el-cascader>

在这里插入图片描述

4.将pca数组中获到的值,赋给province,city,area

省市区级联选择器在element中的应用_第3张图片
此时这样写,保存以后,再次点击修改,如果不修改省市区,就不会报错
省市区级联选择器在element中的应用_第4张图片
原因:当点击修改的时候,没有获到this.form.addresses为空,没有获到值,
处理方法:将province,city,area的值再次赋给pca
省市区级联选择器在element中的应用_第5张图片
省市区级联选择器在element中的应用_第6张图片

你可能感兴趣的:(vue)