feat(cascader): add popupHeader and popupFooter slot

packages/components/cascader/_example/base.vue

@@ -1,9 +1,67 @@
 <template>
-  <t-cascader v-model="value" :options="options" clearable @change="onChange" @focus="onFocus" @blur="onBlur" />
+  <t-space direction="vertical" style="width: 100%">
+    <!-- 基础搜索：每个层级独立过滤 -->
+    <t-cascader v-model="value" :options="options">
+      <template #popupHeader="{ panelIndex, onFilter }">
+        <t-input
+          v-model="searchValues1[panelIndex]"
+          :placeholder="`搜索第${panelIndex + 1}级`"
+          @change="(val) => onFilter(val)"
+        />
+      </template>
+    </t-cascader>
+
+    <!-- 级联搜索：搜索某级后，后续级别只显示匹配项的子节点 -->
+    <t-cascader v-model="value2" :options="options">
+      <template #popupHeader="{ panelIndex, onFilter }">
+        <t-input
+          v-model="searchValues2[panelIndex]"
+          :placeholder="`搜索第${panelIndex + 1}级（级联）`"
+          @change="(val) => onFilter(val, { cascade: true })"
+        />
+      </template>
+    </t-cascader>
+
+    <!-- 基础搜索 + 底部搜索框（位置不同但功能相同） -->
+    <t-cascader v-model="value3" :options="options">
+      <template #popupHeader="{ panelIndex, onFilter }">
+        <t-input
+          v-model="searchValues3[panelIndex]"
+          :placeholder="'搜索第' + (panelIndex + 1) + '级（顶部）'"
+          @change="(val) => onFilter(val)"
+        />
+      </template>
+      <template #popupFooter="{ panelIndex, onFilter }">
+        <t-input
+          v-model="searchValues3[panelIndex]"
+          :placeholder="'搜索第' + (panelIndex + 1) + '级（底部）'"
+          @change="(val) => onFilter(val)"
+        />
+      </template>
+    </t-cascader>
+
+    <!-- 级联搜索 + 底部搜索框（位置不同但功能相同） -->
+    <t-cascader v-model="value4" :options="options">
+      <template #popupHeader="{ panelIndex, onFilter }">
+        <t-input
+          v-model="searchValues4[panelIndex]"
+          :placeholder="'搜索第' + (panelIndex + 1) + '级（级联-顶部）'"
+          @change="(val) => onFilter(val, { cascade: true })"
+        />
+      </template>
+      <template #popupFooter="{ panelIndex, onFilter }">
+        <t-input
+          v-model="searchValues4[panelIndex]"
+          :placeholder="'搜索第' + (panelIndex + 1) + '级（级联-底部）'"
+          @change="(val) => onFilter(val, { cascade: true })"
+        />
+      </template>
+    </t-cascader>
+  </t-space>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 
 const options = [
   {
@@ -13,10 +71,15 @@ const options = [
       {
         label: '子选项一',
         value: '1.1',
+        children: [
+          { label: '三级-1', value: '1.1.1' },
+          { label: '三级-2', value: '1.1.2' },
+        ],
       },
       {
         label: '子选项二',
         value: '1.2',
+        children: [{ label: '三级-3', value: '1.2.1' }],
       },
       {
         label: '子选项三',
@@ -31,26 +94,34 @@ const options = [
       {
         label: '子选项一',
         value: '2.1',
+        children: [{ label: '三级-4', value: '2.1.1' }],
       },
       {
         label: '子选项二',
         value: '2.2',
       },
     ],
   },
+  {
+    label: '选项三',
+    value: '3',
+    children: [
+      {
+        label: '子选项一',
+        value: '3.1',
+      },
+    ],
+  },
 ];
 
-const value = ref('1.1');
-
-const onChange = (val, context) => {
-  console.log(val, context);
-};
-
-const onFocus = (ctx) => {
-  console.log('focus', ctx);
-};
+const value = ref('1.1.1');
+const value2 = ref('1.1.1');
+const value3 = ref('1.1.1');
+const value4 = ref('1.1.1');
 
-const onBlur = (ctx) => {
-  console.log('blur', ctx);
-};
+// 使用 reactive 维护搜索状态
+const searchValues1 = reactive({});
+const searchValues2 = reactive({});
+const searchValues3 = reactive({});
+const searchValues4 = reactive({});
 </script>

packages/components/cascader/cascader.en-US.md

@@ -30,6 +30,8 @@ option | Slot / Function | - | customize one option。Typescript：`TNode<{ item
 options | Array | [] | Typescript：`Array<CascaderOption>` | N
 panelBottomContent | String / Slot / Function | - | bottom content of the cascader panel。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 panelTopContent | String / Slot / Function | - | top content of the cascader panel。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+popupFooter | Slot / Function | - | footer of each column in the popup panel, supports custom rendering. `panelIndex` is the current column index, `options` is the current column options, `onFilter` is used to filter options。Typescript：`TNode<{ panelIndex: number; options: TreeOptionData[]; onFilter: (filter: string \| ((node: TreeOptionData, panelIndex: number) => boolean), opts?: { cascade?: boolean }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+popupHeader | Slot / Function | - | header of each column in the popup panel, supports custom rendering. `panelIndex` is the current column index, `options` is the current column options, `onFilter` is used to filter options。Typescript：`TNode<{ panelIndex: number; options: TreeOptionData[]; onFilter: (filter: string \| ((node: TreeOptionData, panelIndex: number) => boolean), opts?: { cascade?: boolean }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 placeholder | String | undefined | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/cascader/type.ts) | N
 popupVisible | Boolean | - | \- | N

packages/components/cascader/cascader.md

@@ -30,6 +30,8 @@ option | Slot / Function | - | 自定义单个级联选项, item 是选项本身
 options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
 panelBottomContent | String / Slot / Function | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 panelTopContent | String / Slot / Function | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+popupFooter | Slot / Function | - | 弹出层内每一列的页脚，支持自定义渲染。`panelIndex` 表示当前列索引，`options` 表示当前列选项，`onFilter` 用于过滤当前列选项。TS 类型：`TNode<{ panelIndex: number; options: TreeOptionData[]; onFilter: (filter: string \| ((node: TreeOptionData, panelIndex: number) => boolean), opts?: { cascade?: boolean }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+popupHeader | Slot / Function | - | 弹出层内每一列的标题，支持自定义渲染。`panelIndex` 表示当前列索引，`options` 表示当前列选项，`onFilter` 用于过滤当前列选项。TS 类型：`TNode<{ panelIndex: number; options: TreeOptionData[]; onFilter: (filter: string \| ((node: TreeOptionData, panelIndex: number) => boolean), opts?: { cascade?: boolean }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 placeholder | String | undefined | 占位符 | N
 popupProps | Object | - | 参考 popup 组件 API。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/cascader/type.ts) | N
 popupVisible | Boolean | - | 是否显示下拉框 | N

packages/components/cascader/cascader.tsx

@@ -190,7 +190,13 @@ export default defineComponent({
                   loading={props.loading}
                   loadingText={props.loadingText}
                   cascaderContext={cascaderContext.value}
-                  v-slots={{ option: slots.option, empty: slots.empty, loadingText: slots.loadingText }}
+                  v-slots={{
+                    option: slots.option,
+                    empty: slots.empty,
+                    loadingText: slots.loadingText,
+                    popupHeader: slots.popupHeader,
+                    popupFooter: slots.popupFooter,
+                  }}
                 />
                 {renderTNodeJSX('panelBottomContent')}
               </>