Element UI's el-cascader cmoponent returns selected value by default. To retrieve the corresponding display label text, use the getCheckedNodes() instance method.

For region selection with three hierarchical levels (province → city → district), the cascader is configured with lazy loading to fetch options dynamically:

<el-cascader
  v-model="regionCodeList"
  ref="regionCascader"
  placeholder="Select production region"
  clearable
  :props="cascaderProps"
  @change="onRegionChange"
/>

The cascaderProps object enables strict single-selection and lazy loading:

cascaderProps: {
  checkStrictly: true,
  expandTrigger: 'hover',
  lazy: true,
  leafOnly: true,
  lazyLoad: (node, resolve) => {
    const parentId = node.level === 0 ? 0 : node.value;
    
    if (node.level < 3) {
      cityApi.getCityInfo(parentId)
        .then(res => {
          const formatted = res.data.map(item => ({
            value: item.id,
            label: item.name,
            leaf: item.level === 3 // mark final level as leaf
          }));
          resolve(formatted);
        })
        .catch(err => {
          console.warn('Failed to load region data:', err);
          resolve([]);
        });
    } else {
      resolve([]);
    }
  }
}

In the handler for selection changes, labels are extracted and concatenated into a flat string:

onRegionChange() {
  const checked = this.$refs.regionCascader.getCheckedNodes();
  if (checked.length > 0) {
    const fullPathLabels = checked[0].pathLabels;
    this.productForm.proplace = fullPathLabels.join('');
  }
},

To obtain only the label of the deepest selected node (e.g., "丛台区" instead of the full path), replace pathLabels with label:

const lastLabel = checked[0]?.label;

This approach avoids hardcoding index access and safely handles edge cases where no node is selected.