Cascader: Fix the tagRender option and add Demo 🐛 📝

components/cascader/demo/index.vue

@@ -12,6 +12,7 @@
     <fields-name />
     <suffix />
     <multipleVue />
+    <tagRender />
   </demo-sort>
 </template>
 <script>
@@ -27,6 +28,7 @@ import Size from './size.vue';
 import FieldsName from './fields-name.vue';
 import Suffix from './suffix.vue';
 import multipleVue from './multiple.vue';
+import tagRender from './tagRender.vue';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -47,6 +49,7 @@ export default defineComponent({
     FieldsName,
     Suffix,
     multipleVue,
+    tagRender,
   },
 });
 </script>

components/cascader/demo/tagRender.vue

@@ -0,0 +1,91 @@
+<docs>
+---
+order: 10
+title:
+  zh-CN: 自定义 tag 内容
+  en-US: The custom tag
+---
+
+</docs>
+
+<template>
+  <a-cascader
+    v-model:value="value"
+    multiple
+    :options="options"
+    placeholder="Please select"
+    suffix-icon="Shopping Around"
+  >
+    <template #tagRender="data">
+      <a-tag :key="data.value" color="blue">{{ data.label }}</a-tag>
+    </template>
+  </a-cascader>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import type { CascaderProps } from 'ant-design-vue';
+const options: CascaderProps['options'] = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'freezeKey',
+        label: 'freeze',
+        children: [
+          {
+            value: 'key1',
+            label: 'salmon',
+          },
+          {
+            value: 'key2',
+            label: 'beef',
+          },
+        ],
+      },
+      {
+        value: 'fruitsKey',
+        label: 'fruits',
+        children: [
+          {
+            value: 'key11',
+            label: 'apple',
+          },
+          {
+            value: 'key22',
+            label: 'banana',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'Chinese delicious food',
+    label: '中国美食',
+    children: [
+      {
+        value: 'key3',
+        label: '月饼',
+        children: [
+          {
+            value: 'key4',
+            label: '蛋黄馅',
+          },
+          {
+            value: 'key5',
+            label: '五仁馅',
+          },
+        ],
+      },
+    ],
+  },
+];
+export default defineComponent({
+  setup() {
+    return {
+      value: ref<string[]>([]),
+      options,
+    };
+  },
+});
+</script>

components/cascader/index.tsx

@@ -280,6 +280,7 @@ const Cascader = defineComponent({
             ...slots,
             checkable: () => <span class={`${cascaderPrefixCls.value}-checkbox-inner`} />,
           }}
+          tagRender={props.tagRender || slots.tagRender}
           displayRender={props.displayRender || slots.displayRender}
           maxTagPlaceholder={props.maxTagPlaceholder || slots.maxTagPlaceholder}
           showArrow={props.showArrow}