表单中Cascader 级联选择器关于三级地址获取Label值--getCheckedNodes()

507 阅读1分钟

1.html

问题描述:三级选择器获得的值为一个数组,是value,而我们要获得label,传给后端

<div class="list_item flexed align-items-center">
                <el-form-item class="all_item">
                  <div class="item_label">居住城市:</div>
                  <el-cascader
                    ref="liveAddress"
                    :options="cityList"
                    clearable
                    placeholder="请选择现居住城市"
                    class="item_input updateInput"
                    v-model="userResume.liveCityInfo"
                    @change="changeLocationInfo"
                  />
                </el-form-item>
              </div>
//city.js
const cityList = [{
	"value": "110000",
	"label": "北京市",
	"children": [{
		"value": "110100",
		"label": "北京城区",
		"children": [{
			"value": "110101",
			"label": "东城区"
		},
                            }],
                    }],
                }]

2.js

解决: ref绑定liveAddress,options绑定三级地址, v-model绑定要传的值:userResume.liveCityInfo,使用liveAddress.value.getCheckedNodes()[0].pathLabels获取lebal值

const changeLocationInfo = (event) => {
  let code = event;
  let city = liveAddress.value.getCheckedNodes()[0].pathLabels;
  userResume.value["locationInfo"] = JSON.stringify({
    provinceCode: code[0],
    provinceName: city[0],
    cityCode: code[1],
    cityName: city[1],
    areaCode: code[2],
    areaName: city[2],
  });
};