今天在做项目的时候遇到了一个棘手的问题，使用elementui的级联选择器做省市区层级回显时老是有问题，后来百度了一大圈才找到解决方案，记录一下:
代码结构如下:
<el-cascader
v-model="gdjzdSelectedOptions"
style="width: 100%"
placeholder="请选择"
:props="defaultProps"
:options="provincescitiesoptions"
filterable
@change="handleChange"
></el-cascader>
data中的数据如下:
provincescitiesoptions: [],
defaultProps: {
label: "codeName",
value: "code",
children: "children",
},
// 固定居住地选择器绑定的数据
gdjzdSelectedOptions: [],
其中provincescitiesoptions是一个数组，保存的是选中地区对应的id值，思路是监听级联选择器的change事件，在该事件中，把保存选中的值的数组通过事件发送给父组件，在负组件中监听所发射的事件，拿到值以后对数据进行简单处理，处理成请求接口所需要的格式，我这里的格式是这样的:
handleSelectChange(val) {
this.addForm.provinceCode = val[0];//省份对应的id
this.addForm.cityCode = val[1];//城市对应的id
this.addForm.areaCode = val[2];//区对应的id
this.addForm.townCode = val[3];//乡镇对应的id
this.levelArr = val;
},
在编辑的时候再把从接口拿到的数据处理成数组的格式给到组件，如下所示:
handleEdit(row) {
getlawdevicedetail(row.deviceId).then((res) => {
if (res.code != 200) return;
this.levelArr = [
res.data.provinceCode,
res.data.cityCode,
res.data.areaCode,
];
Object.keys(res.data).forEach((key) => {
this.addForm[key] = row[key];
});
});
this.addDialogVisible = true;
this.addForm.deviceId = row.deviceId;
},
这样数据就可以正常的回显出来了
