feat(cascader): Add dropdownRender Support(#7853)

components/cascader/demo/dropdownRender.vue

@@ -0,0 +1,79 @@
+<docs>
+---
+order: 11
+title:
+  zh-CN: 扩展菜单
+  en-US: Custom dropdown
+---
+
+## zh-CN
+
+使用 dropdownRender 对下拉菜单进行自由扩展。
+
+## en-US
+
+Customize the dropdown menu via dropdownRender.
+
+</docs>
+<template>
+  <a-cascader v-model:value="value" :options="options" placeholder="Please select">
+    <template #dropdownRender="{ menuNode: menu }">
+      <v-nodes :vnodes="menu" />
+      <a-divider style="margin: 4px 0" />
+      <div style="padding: 8px">The footer is not very short.</div>
+    </template>
+  </a-cascader>
+</template>
+<script lang="ts" setup>
+import { defineComponent, ref } from 'vue';
+import type { CascaderProps } from 'ant-design-vue';
+
+const VNodes = defineComponent({
+  props: {
+    vnodes: {
+      type: Object,
+      required: true,
+    },
+  },
+  render() {
+    return this.vnodes;
+  },
+});
+
+const options: CascaderProps['options'] = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const value = ref<string[]>([]);
+</script>

components/cascader/demo/index.vue

@@ -13,6 +13,7 @@
     <suffix />
     <multipleVue />
     <tagRender />
+    <dropdownRender />
   </demo-sort>
 </template>
 <script>
@@ -29,6 +30,7 @@ import FieldsName from './fields-name.vue';
 import Suffix from './suffix.vue';
 import multipleVue from './multiple.vue';
 import tagRender from './tagRender.vue';
+import dropdownRender from './dropdownRender.vue';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -50,6 +52,7 @@ export default defineComponent({
     Suffix,
     multipleVue,
     tagRender,
+    dropdownRender,
   },
 });
 </script>

components/cascader/index.en-US.md

@@ -52,6 +52,7 @@ Cascade selection box.
 | suffixIcon | The custom suffix icon | string \| VNode \| slot | - |  |
 | showCheckedStrategy | The way show selected item in box. ** `SHOW_CHILD`: ** just show child treeNode. **`Cascader.SHOW_PARENT`:** just show parent treeNode (when all child treeNode under the parent treeNode are checked) | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | 3.3.0 |
 | tagRender | Customize tag render when `multiple` | slot | - | 3.0 |
+| dropdownRender | Customize dropdown content | slot | - | 4.2.7 |
 | value(v-model) | selected value | string\[] \| number\[] | - |  |
 
 ### showSearch

components/cascader/index.tsx

@@ -334,6 +334,7 @@ const Cascader = defineComponent({
             showArrow={formItemInputContext.hasFeedback || props.showArrow}
             onChange={handleChange}
             onBlur={handleBlur}
+            dropdownRender={props.dropdownRender || slots.dropdownRender}
             v-slots={slots}
             ref={selectRef}
           />,

components/cascader/index.zh-CN.md

@@ -54,6 +54,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5-ArSLl5UBsAAA
 | size | 输入框大小 | `large` \| `default` \| `small` | `default` |  |
 | suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |  |
 | tagRender | 自定义 tag 内容，多选时生效 | slot | - | 3.0 |
+| dropdownRender | 自定义下拉框内容 | slot | - | 4.2.7 |
 | value(v-model) | 指定选中项 | string\[] \| number\[] | - |  |
 
 ### showSearch