elementui级联选择器的回显

今天在做项目的时候遇到了一个棘手的问题，使用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;
    },

这样数据就可以正常的回显出来了