省市区三级联动回显问题,

html部分:

<el-form-item label="发货地址">
        <el-cascader
          ref="myCascader"
          v-model="params.shippingAddress"
          :props="cityProps"
          :options="options"
          clearable
          @change="addressChange"
        ></el-cascader>
      </el-form-item>
daa部分:
 params: {
        logisticsName: "",
        chargeType: 1,
        distributionType: "", //配送方式
        shippingAddress:[],
        // distributionTypeName: "",
        charges: [
          {
            weight: "",
            price: "",
            secondWeight: "",
            secondPrice: "",
            regions: [],
          },
        ],
      },

按钮方法部分:
 // 查看详情
    async getDetails() {
      const res = await logisticsGetById({ logisticsId: this.checkId });
      console.log(res.data);
      if (res.code === "200") {
        let city;
      city =  res.data.shippingAddressArray.join('/')
      console.log(city);
      this.params.shippingAddress = city
      console.log(this.params.shippingAddress);
        this.params = res.data;
        
      }
    },

打印部分:

img

让后端给你返回最后一级的ID,或者你试试只写最后一级的中文能不能回显出来,两种都是字符串格式,不是数组

我也发现了,数据格式必须又层级结构,就是示例那样,有children那样

数据结构应该是:this.params.shippingAddress = [省, 市, 区];this.params = res.data这个你应该是写在this.params.shippingAddress = city前面

你现在的数据结构不太对,级联选择器的数据结构为树形数据结构,比如你现在这个

options:[
  {
    value:'hebei',
    label:'河北省',
    children:[
      {
        value:'qinhuangdao',
        label:'秦皇岛',
        children:[
          ......
        ]
      }
    ]
  }
]