ant-design-vue/components/cascader/demo/custom-render.md

<cn>
#### 自定义已选项
例如给最后一项加上邮编链接。
</cn>

<us>
#### Custom render
For instance, add an external link after the selected value.
</us>

```html
<template>
  <a-cascader :options="options" :defaultValue="['zhejiang', 'hangzhou', 'xihu']" style="width: 100%">
    <template slot="displayRender" slot-scope="props">
      <span v-for="(label, index) in props.labels" :key="props.selectedOptions[index].value">
        <span v-if="index === props.labels.length - 1">
        {{label}} (<a @click="e => handleAreaClick(e, label, props.selectedOptions[index])">{{props.selectedOptions[index].code}}</a>)
        </span>
        <span v-else @click="onChange">
          {{label}} / 
        </span>
      </span>
    </template>
  </a-cascader>
</template>
<script>
export default {
  data() {
    return {
      options: [{
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [{
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [{
            value: 'xihu',
            label: 'West Lake',
            code: 752100,
          }],
        }],
      }, {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [{
          value: 'nanjing',
          label: 'Nanjing',
          children: [{
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
            code: 453400,
          }],
        }],
      }]
    }
  },
  methods: {
    onChange(value) {
      console.log(value);
    },
    handleAreaClick(e, label, option) {
      e.stopPropagation();
      console.log('clicked', label, option);
    },
  }
}
</script>
```