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="{labels, selectedOptions}">
      <span v-for="(label, index) in labels" :key="selectedOptions[index].value">
        <span v-if="index === labels.length - 1">
          {{label}} (<a @click="e => handleAreaClick(e, label, selectedOptions[index])"
            >{{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>
```