From 31430f53657d0851796b96015de955914519fe2e Mon Sep 17 00:00:00 2001
From: yang <30883395+webvs2@users.noreply.github.com>
Date: Mon, 26 Sep 2022 22:06:52 +0800
Subject: [PATCH] feat: cascader add tagRender slot (#5954)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Cascader ：修复 tagRender 选项，并添加demo  :bug: :memo:
Cascader: Fix the tagRender option and add Demo :bug: :memo:

* 修改 test 中等待时机

* Update index.tsx

* Update index.test.js

Co-authored-by: yang <29636098325@qq.com>
Co-authored-by: tangjinzhou <415800467@qq.com>
---
 components/cascader/demo/index.vue     |  3 +
 components/cascader/demo/tagRender.vue | 91 ++++++++++++++++++++++++++
 components/cascader/index.tsx          |  1 +
 3 files changed, 95 insertions(+)
 create mode 100644 components/cascader/demo/tagRender.vue

diff --git a/components/cascader/demo/index.vue b/components/cascader/demo/index.vue
index 0f5871a9e..deb0e0db5 100644
--- a/components/cascader/demo/index.vue
+++ b/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>
diff --git a/components/cascader/demo/tagRender.vue b/components/cascader/demo/tagRender.vue
new file mode 100644
index 000000000..3052c3445
--- /dev/null
+++ b/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>
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 44ba2625b..9328736c8 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -281,6 +281,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}