diff --git a/helper/attributes.json b/helper/attributes.json
index e51dd5f3e3..270ef132ef 100644
--- a/helper/attributes.json
+++ b/helper/attributes.json
@@ -1244,7 +1244,7 @@
   },
   "t-cascader/collapsed-items": {
     "type": "TNode",
-    "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量\n\n[docs](https://tdesign.tencent.com/vue-next/components/cascader?tab=api#cascader-props)"
+    "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/cascader?tab=api#cascader-props)"
   },
   "t-cascader/disabled": {
     "type": "Boolean",
@@ -4980,7 +4980,7 @@
   },
   "t-select/collapsed-items": {
     "type": "TNode",
-    "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量\n\n[docs](https://tdesign.tencent.com/vue-next/components/select?tab=api#select-props)"
+    "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/select?tab=api#select-props)"
   },
   "t-select/creatable": {
     "type": "Boolean",
@@ -5203,7 +5203,7 @@
   },
   "t-select-input/collapsed-items": {
     "type": "TNode",
-    "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量\n\n[docs](https://tdesign.tencent.com/vue-next/components/select-input?tab=api#selectinput-props)"
+    "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`onClose` 表示关闭标签时触发的事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/select-input?tab=api#selectinput-props)"
   },
   "t-select-input/disabled": {
     "type": "Boolean",
@@ -6020,7 +6020,7 @@
   },
   "t-tag-input/collapsed-items": {
     "type": "TNode",
-    "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量\n\n[docs](https://tdesign.tencent.com/vue-next/components/tag-input?tab=api#taginput-props)"
+    "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/tag-input?tab=api#taginput-props)"
   },
   "t-tag-input/disabled": {
     "type": "Boolean",
@@ -6848,7 +6848,7 @@
   },
   "t-tree-select/collapsed-items": {
     "type": "TNode",
-    "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量\n\n[docs](https://tdesign.tencent.com/vue-next/components/tree-select?tab=api#treeselect-props)"
+    "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件\n\n[docs](https://tdesign.tencent.com/vue-next/components/tree-select?tab=api#treeselect-props)"
   },
   "t-tree-select/data": {
     "type": "Array",
@@ -7343,4 +7343,4 @@
     "type": "Number",
     "description": "水印元素的 `z-index`，默认值写在 CSS 中\n\n[docs](https://tdesign.tencent.com/vue-next/components/watermark?tab=api#watermark-props)"
   }
-}
\ No newline at end of file
+}
diff --git a/helper/web-types.json b/helper/web-types.json
index e67f3b7502..d1a70c16b1 100644
--- a/helper/web-types.json
+++ b/helper/web-types.json
@@ -3359,7 +3359,7 @@
             },
             {
               "name": "collapsed-items",
-              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量",
+              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/cascader?tab=api#cascader-props",
               "type": [
                 "TNode"
@@ -3770,12 +3770,12 @@
           "slots": [
             {
               "name": "collapsedItems",
-              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量类型和参数：TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>",
+              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件类型和参数：TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/cascader?tab=api#cascader-props"
             },
             {
               "name": "collapsed-items",
-              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量类型和参数：TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>",
+              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件类型和参数：TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/cascader?tab=api#cascader-props"
             },
             {
@@ -13283,7 +13283,7 @@
             },
             {
               "name": "collapsed-items",
-              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量",
+              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/select?tab=api#select-props",
               "type": [
                 "TNode"
@@ -13702,12 +13702,12 @@
           "slots": [
             {
               "name": "collapsedItems",
-              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量类型和参数：TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>",
+              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件：TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/select?tab=api#select-props"
             },
             {
               "name": "collapsed-items",
-              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量类型和参数：TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>",
+              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件：TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/select?tab=api#select-props"
             },
             {
@@ -13847,7 +13847,7 @@
             },
             {
               "name": "collapsed-items",
-              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量",
+              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`onClose` 表示关闭标签时触发的事件",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/select-input?tab=api#selectinput-props",
               "type": [
                 "TNode"
@@ -14131,12 +14131,12 @@
           "slots": [
             {
               "name": "collapsedItems",
-              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量类型和参数：TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>",
+              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`onClose` 表示关闭标签时触发的事件：TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/select-input?tab=api#selectinput-props"
             },
             {
               "name": "collapsed-items",
-              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量类型和参数：TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>",
+              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`onClose` 表示关闭标签时触发的事件：TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/select-input?tab=api#selectinput-props"
             },
             {
@@ -16089,7 +16089,7 @@
             },
             {
               "name": "collapsed-items",
-              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量",
+              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/tag-input?tab=api#taginput-props",
               "type": [
                 "TNode"
@@ -16371,12 +16371,12 @@
           "slots": [
             {
               "name": "collapsedItems",
-              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量类型和参数：TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>",
+              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件类型和参数：TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/tag-input?tab=api#taginput-props"
             },
             {
               "name": "collapsed-items",
-              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量类型和参数：TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>",
+              "description": "标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件类型和参数：TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/tag-input?tab=api#taginput-props"
             },
             {
@@ -18139,7 +18139,7 @@
             },
             {
               "name": "collapsed-items",
-              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量",
+              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/tree-select?tab=api#treeselect-props",
               "type": [
                 "TNode"
@@ -18528,12 +18528,12 @@
           "slots": [
             {
               "name": "collapsedItems",
-              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量类型和参数：TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>",
+              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件类型和参数：TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/tree-select?tab=api#treeselect-props"
             },
             {
               "name": "collapsed-items",
-              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量类型和参数：TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>",
+              "description": "多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件类型和参数：TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>",
               "doc-url": "https://tdesign.tencent.com/vue-next/components/tree-select?tab=api#treeselect-props"
             },
             {
@@ -19322,4 +19322,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/cascader/_example/collapsed.vue b/src/cascader/_example/collapsed.vue
index 1d6910be60..ac8a60d82f 100644
--- a/src/cascader/_example/collapsed.vue
+++ b/src/cascader/_example/collapsed.vue
@@ -1,24 +1,58 @@
 <template>
   <t-space direction="vertical">
+
+    <h3>default: </h3>
     <t-cascader v-model="value" :options="options" :on-remove="handleBlur" multiple :min-collapsed-num="1" />
-    <t-cascader v-model="value" :options="options" :collapsed-items="collapsedItems" multiple :min-collapsed-num="1" />
-    <t-cascader v-model="value" :options="options" multiple clearable :min-collapsed-num="1">
-      <template #collapsedItems="{ collapsedSelectedItems, count }">
-        <t-popup>
-          <template #content>
-            <p v-for="(item, index) in collapsedSelectedItems" :key="index" style="padding: 10px">
-              {{ item }}
-            </p>
-          </template>
-          <span v-show="count > 0" style="color: #00a870; margin-left: 10px">+{{ count - 1 }}</span>
-        </t-popup>
+
+    <h3>use collapsedItems: </h3>
+    <t-space>
+      <div>size control:</div>
+      <t-radio-group :value="size" :options="['small', 'medium', 'large']" @change="(value) => size = value" />
+    </t-space>
+    <t-space>
+      <span>disabled control:</span>
+      <t-checkbox :checked="disabled" @change="(value) => disabled = value" />
+    </t-space>
+    <t-space>
+      <span>readonly control:</span>
+      <t-checkbox :checked="readonly" @change="(value) => readonly = value" />
+    </t-space>
+    <t-cascader 
+      v-model="value"
+      :options="options"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :collapsed-items="collapsedItems"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    />
+    <t-cascader 
+      v-model="value"
+      :options="options"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    >
+      <template #collapsedItems="{ value, onClose }">
+        <CollapsedItemsRender 
+          :style="{ marginRight: '4px' }"
+          :value="value"
+          :min-collapsed-num="minCollapsedNum"
+          :size="size"
+          :disabled="disabled"
+          :closable="!readonly && !disabled"
+          @close="onClose"
+        />
       </template>
     </t-cascader>
   </t-space>
 </template>
 
 <script lang="jsx" setup>
-import { ref } from 'vue';
+import { defineComponent, computed, ref } from 'vue';
 
 const options = [
   {
@@ -56,29 +90,85 @@ const options = [
 ];
 
 const value = ref(['1.1', '1.2', '1.3']);
+const size = ref('medium');
+const disabled = ref(false);
+const readonly = ref(false);
+const minCollapsedNum = ref(1);
 
 const handleBlur = (e) => {
   console.log(e);
 };
 
-const collapsedItems = (h, { value, count }) => {
-  if (!(value instanceof Array) || !count) return;
+// Function
+const collapsedItems = (h, { value, onClose }) => {
+  if (!(value instanceof Array)) return null;
+  const count = value.length - minCollapsedNum.value;
+  const collapsedTags = value.slice(minCollapsedNum.value, value.length);
+  if (count <= 0) return null;
   return (
     <t-popup
       v-slots={{
         content: () => (
-          <div>
-            {value.map((item) => (
-              <p style="padding: 10px;">{item}</p>
+          <>
+            {collapsedTags.map((item, index) => (
+              <t-tag
+                key={item}
+                style={{ marginRight: '4px' }}
+                size={size.value}
+                disabled={disabled.value}
+                closable={!readonly.value && !disabled.value}
+                onClose={(context) => onClose({ e: context.e, index: minCollapsedNum.value + index })}
+              >
+                {item}
+              </t-tag>
             ))}
-          </div>
+          </>
         ),
       }}
     >
-      <span v-show={count > 0} style="color: #ED7B2F; margin-left: 10px;">
-        +{count - 1}
-      </span>
+      <t-tag size={size.value} disabled={disabled.value}>Function - More({count})</t-tag>
     </t-popup>
   );
 };
+
+// Slot Component
+const CollapsedItemsRender = defineComponent({
+  name: 'CollapsedItemsRender',
+  props: ['value', 'minCollapsedNum'],
+  emits: ['close'],
+  setup(props, { attrs, emit }) {
+
+    const count = computed(() => {
+      return props.value.length - props.minCollapsedNum;
+    });
+    const collapsedTags = computed(() => {
+      return props.value.slice(props.minCollapsedNum, props.value.length)
+    });
+
+    return () => {
+      if (count.value <= 0) return null;
+      return (
+        <t-popup
+          v-slots={{
+            content: () => (
+              <>
+                {collapsedTags.value.map((item, index) => (
+                  <t-tag
+                    {...attrs}
+                    key={item}
+                    onClose={(context) => emit('close', { e: context.e, index: props.minCollapsedNum.value + index })}
+                  >
+                    {item}
+                  </t-tag>
+                ))}
+              </>
+            ),
+          }}
+        >
+          <t-tag {...attrs} closable={false}>Slot - More({count.value})</t-tag>
+        </t-popup>
+      )
+    }
+  }
+});
 </script>
diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md
index f48768f839..fe000fa75b 100644
--- a/src/cascader/cascader.en-US.md
+++ b/src/cascader/cascader.en-US.md
@@ -10,7 +10,7 @@ borderless | Boolean | false | \- | N
 checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
 checkStrictly | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: CascaderOption[]; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
index 900d94dddc..1a73046464 100644
--- a/src/cascader/cascader.md
+++ b/src/cascader/cascader.md
@@ -10,7 +10,7 @@ borderless | Boolean | false | 无边框模式 | N
 checkProps | Object | - | 参考 checkbox 组件 API。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
 checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
 clearable | Boolean | false | 是否支持清空选项 | N
-collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: CascaderOption[]; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用组件 | N
 empty | String / Slot / Function | - | 无匹配选项时的内容，默认全局配置为 '暂无数据'。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
diff --git a/src/cascader/props.ts b/src/cascader/props.ts
index a6c18a8e31..0ac7cf7936 100644
--- a/src/cascader/props.ts
+++ b/src/cascader/props.ts
@@ -20,7 +20,7 @@ export default {
   checkStrictly: Boolean,
   /** 是否支持清空选项 */
   clearable: Boolean,
-  /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 */
+  /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件 */
   collapsedItems: {
     type: Function as PropType<TdCascaderProps['collapsedItems']>,
   },
diff --git a/src/cascader/type.ts b/src/cascader/type.ts
index d159e64fe2..12f3625bc9 100644
--- a/src/cascader/type.ts
+++ b/src/cascader/type.ts
@@ -39,9 +39,9 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件
    */
-  collapsedItems?: TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number }>;
+  collapsedItems?: TNode<{ value: CascaderOption[]; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>;
   /**
    * 是否禁用组件
    */
diff --git a/src/select-input/_example/collapsed-items.vue b/src/select-input/_example/collapsed-items.vue
index 8ae5fe1d3a..c15168b1b8 100644
--- a/src/select-input/_example/collapsed-items.vue
+++ b/src/select-input/_example/collapsed-items.vue
@@ -1,5 +1,7 @@
 <template>
   <t-space direction="vertical" class="tdesign-demo__select-input-collapsed-items">
+
+    <h3>default: </h3>
     <t-select-input
       :value="value"
       :min-collapsed-num="1"
@@ -20,16 +22,31 @@
       </template>
     </t-select-input>
 
+    <h3>use collapsedItems: </h3>
+    <t-space>
+      <div>size control:</div>
+      <t-radio-group :value="size" :options="['small', 'medium', 'large']" @change="(value) => size = value" />
+    </t-space>
+    <t-space>
+      <span>disabled control:</span>
+      <t-checkbox :checked="disabled" @change="(value) => disabled = value" />
+    </t-space>
+    <t-space>
+      <span>readonly control:</span>
+      <t-checkbox :checked="readonly" @change="(value) => readonly = value" />
+    </t-space>
     <!-- 第一种方式：使用渲染函数 collapsed-items 自定义折叠项 -->
     <t-select-input
       :value="value"
-      :min-collapsed-num="2"
-      :collapsed-items="renderCollapsedItems"
+      multiple
       :popup-props="{ overlayInnerStyle: { padding: '6px' } }"
       placeholder="请选择"
       allow-input
-      clearable
-      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :collapsed-items="collapsedItems"
+      :tagInputProps="{ size }"
+      :disabled="disabled"
+      :readonly="readonly"
       @tag-change="onTagChange"
     >
       <template #panel>
@@ -45,23 +62,26 @@
     <!-- 第二种方式：使用插槽 collapsedItems 自定义折叠项 -->
     <t-select-input
       :value="value"
-      :min-collapsed-num="3"
       :popup-props="{ overlayInnerStyle: { padding: '6px' } }"
       placeholder="请选择"
       allow-input
-      clearable
       multiple
+      :min-collapsed-num="minCollapsedNum"
+      :tagInputProps="{ size }"
+      :disabled="disabled"
+      :readonly="readonly"
       @tag-change="onTagChange"
     >
-      <template #collapsedItems="{ collapsedTags }">
-        <t-popup>
-          <t-tag>More({{ collapsedTags.length }})</t-tag>
-          <template #content>
-            <t-tag v-for="item in collapsedTags" :key="item" style="margin: 4px 4px 4px 0">
-              {{ item }}
-            </t-tag>
-          </template>
-        </t-popup>
+      <template #collapsedItems="{ value, onClose }">
+        <CollapsedItemsRender 
+          :style="{ marginRight: '4px' }"
+          :value="value"
+          :min-collapsed-num="minCollapsedNum"
+          :size="size"
+          :disabled="disabled"
+          :closable="!readonly && !disabled"
+          @close="onClose"
+        />
       </template>
       <template #panel>
         <t-checkbox-group
@@ -75,8 +95,7 @@
   </t-space>
 </template>
 <script setup lang="jsx">
-import { computed, ref } from 'vue';
-import { Tag } from 'tdesign-vue-next';
+import { defineComponent, computed, ref } from 'vue';
 
 const OPTIONS = [
   // 全选
@@ -91,6 +110,10 @@ const OPTIONS = [
 
 const options = ref([...OPTIONS]);
 const value = ref(OPTIONS.slice(1));
+const size = ref('medium');
+const disabled = ref(false);
+const readonly = ref(false);
+const minCollapsedNum = ref(1);
 
 const checkboxValue = computed(() => {
   const arr = [];
@@ -135,9 +158,78 @@ const onTagChange = (currentTags, context) => {
   }
 };
 
-const renderCollapsedItems = (_, { collapsedTags }) => {
-  return <Tag>更多({collapsedTags.length})</Tag>;
+// Function
+const collapsedItems = (h, { value, onClose }) => {
+  if (!(value instanceof Array)) return null;
+  const count = value.length - minCollapsedNum.value;
+  const collapsedTags = value.slice(minCollapsedNum.value, value.length);
+  if (count <= 0) return null;
+  return (
+    <t-popup
+      v-slots={{
+        content: () => (
+          <>
+            {collapsedTags.map((item, index) => (
+              <t-tag
+                key={item}
+                style={{ marginRight: '4px' }}
+                size={size.value}
+                disabled={disabled.value}
+                closable={!readonly.value && !disabled.value}
+                onClose={(context) => onClose({ e: context.e, index: minCollapsedNum.value + index })}
+              >
+                {item}
+              </t-tag>
+            ))}
+          </>
+        ),
+      }}
+    >
+      <t-tag size={size.value} disabled={disabled.value}>Function - More({count})</t-tag>
+    </t-popup>
+  );
 };
+
+// Slot Component
+const CollapsedItemsRender = defineComponent({
+  name: 'CollapsedItemsRender',
+  props: ['value', 'minCollapsedNum'],
+  emits: ['close'],
+  setup(props, { attrs, emit }) {
+
+    const count = computed(() => {
+      return props.value.length - props.minCollapsedNum;
+    });
+    const collapsedTags = computed(() => {
+      return props.value.slice(props.minCollapsedNum, props.value.length)
+    });
+
+    return () => {
+      if (count.value <= 0) return null;
+      return (
+        <t-popup
+          v-slots={{
+            content: () => (
+              <>
+                {collapsedTags.value.map((item, index) => (
+                  <t-tag
+                    {...attrs}
+                    key={item}
+                    onClose={(context) => emit('close', { e: context.e, index: props.minCollapsedNum.value + index })}
+                  >
+                    {item}
+                  </t-tag>
+                ))}
+              </>
+            ),
+          }}
+        >
+          <t-tag {...attrs} closable={false}>Slot - More({count.value})</t-tag>
+        </t-popup>
+      )
+    }
+  }
+});
 </script>
 <style>
 .tdesign-demo__panel-options-collapsed-items {
diff --git a/src/select-input/props.ts b/src/select-input/props.ts
index 4e4e25fde0..94476e34c5 100644
--- a/src/select-input/props.ts
+++ b/src/select-input/props.ts
@@ -18,7 +18,7 @@ export default {
   borderless: Boolean,
   /** 是否可清空 */
   clearable: Boolean,
-  /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量 */
+  /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`onClose` 表示关闭标签时触发的事件 */
   collapsedItems: {
     type: Function as PropType<TdSelectInputProps['collapsedItems']>,
   },
diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md
index dff57783ea..e9ce3c7dea 100644
--- a/src/select-input/select-input.en-US.md
+++ b/src/select-input/select-input.en-US.md
@@ -10,7 +10,7 @@ autoWidth | Boolean | false | \- | N
 autofocus | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: SelectInputValue; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N
 inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript：`string` | N
diff --git a/src/select-input/select-input.md b/src/select-input/select-input.md
index 19c95cad23..cab41c47de 100644
--- a/src/select-input/select-input.md
+++ b/src/select-input/select-input.md
@@ -10,7 +10,7 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N
 autofocus | Boolean | false | 自动聚焦 | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可清空 | N
-collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量。TS 类型：`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: SelectInputValue; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用 | N
 inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N
 inputValue | String / Number | - | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型：`string` | N
diff --git a/src/select-input/type.ts b/src/select-input/type.ts
index 26471925c4..01daf0782b 100644
--- a/src/select-input/type.ts
+++ b/src/select-input/type.ts
@@ -38,9 +38,9 @@ export interface TdSelectInputProps {
    */
   clearable?: boolean;
   /**
-   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量
+   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`onClose` 表示关闭标签时触发的事件
    */
-  collapsedItems?: TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>;
+  collapsedItems?: TNode<{ value: SelectInputValue; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>;
   /**
    * 是否禁用
    */
diff --git a/src/select/_example/collapsed.vue b/src/select/_example/collapsed.vue
index 54c2f6a4e6..93c8c3605e 100644
--- a/src/select/_example/collapsed.vue
+++ b/src/select/_example/collapsed.vue
@@ -1,36 +1,61 @@
 <template>
   <t-space direction="vertical">
+
+    <h3>default: </h3>
     <!-- 选项过多时，可折叠 -->
     <t-select v-model="value" placeholder="请选择" multiple :min-collapsed-num="minCollapsedNum" :options="options" />
 
+    <h3>use collapsedItems: </h3>
+    <t-space>
+      <div>size control:</div>
+      <t-radio-group :value="size" :options="['small', 'medium', 'large']" @change="(value) => size = value" />
+    </t-space>
+    <t-space>
+      <span>disabled control:</span>
+      <t-checkbox :checked="disabled" @change="(value) => disabled = value" />
+    </t-space>
+    <t-space>
+      <span>readonly control:</span>
+      <t-checkbox :checked="readonly" @change="(value) => readonly = value" />
+    </t-space>
     <!-- 自定义折叠项内容，collapsedItems 为渲染函数 (value, count, collapsedSelectedItems) -->
     <t-select
       v-model="value"
-      placeholder="请选择"
+      :options="options"
       multiple
       :min-collapsed-num="minCollapsedNum"
       :collapsed-items="collapsedItems"
-      :options="options"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
     />
 
     <!-- 自定义折叠项内容，collapsedItems 为 插槽(slot) { value, count, collapsedSelectedItems }-->
-    <t-select v-model="value" placeholder="请选择" multiple :min-collapsed-num="minCollapsedNum" :options="options">
-      <!-- hover展示折叠部分的已选项 -->
-      <template #collapsedItems="{ collapsedSelectedItems, count }">
-        <t-popup>
-          <template #content>
-            <p v-for="(item, index) in collapsedSelectedItems" :key="index" style="padding: 8px">
-              {{ item }}
-            </p>
-          </template>
-          <span v-show="count > 0" style="color: #00a870; margin-left: 8px">+{{ count }}</span>
-        </t-popup>
+    <t-select
+      v-model="value"
+      :options="options"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    >
+      <template #collapsedItems="{ value, onClose }">
+        <CollapsedItemsRender 
+          :style="{ marginRight: '4px' }"
+          :value="value"
+          :min-collapsed-num="minCollapsedNum"
+          :size="size"
+          :disabled="disabled"
+          :closable="!readonly && !disabled"
+          @close="onClose"
+        />
       </template>
     </t-select>
   </t-space>
 </template>
 <script setup lang="jsx">
-import { ref } from 'vue';
+import { defineComponent, computed, ref } from 'vue';
 
 const options = [
   {
@@ -48,21 +73,81 @@ const options = [
 ];
 
 const value = ref(['1', '3']);
-const minCollapsedNum = 1;
-const collapsedItems = (h, { value, count }) => {
-  if (!(value instanceof Array) || !count) return;
+const size = ref('medium');
+const disabled = ref(false);
+const readonly = ref(false);
+const minCollapsedNum = ref(1);
+
+// Function
+const collapsedItems = (h, { value, onClose }) => {
+  if (!(value instanceof Array)) return null;
+  const count = value.length - minCollapsedNum.value;
+  const collapsedTags = value.slice(minCollapsedNum.value, value.length);
+  if (count <= 0) return null;
   return (
     <t-popup
       v-slots={{
-        content: () => {
-          return value.map((item) => <p style="padding: 8px;">{item}</p>);
-        },
+        content: () => (
+          <>
+            {collapsedTags.map((item, index) => (
+              <t-tag
+                key={item}
+                style={{ marginRight: '4px' }}
+                size={size.value}
+                disabled={disabled.value}
+                closable={!readonly.value && !disabled.value}
+                onClose={(context) => onClose({ e: context.e, index: minCollapsedNum.value + index })}
+              >
+                {item}
+              </t-tag>
+            ))}
+          </>
+        ),
       }}
     >
-      <span v-show={count > 0} style="color: #ED7B2F; margin-left: 8px">
-        +{count}
-      </span>
+      <t-tag size={size.value} disabled={disabled.value}>Function - More({count})</t-tag>
     </t-popup>
   );
 };
+
+// Slot Component
+const CollapsedItemsRender = defineComponent({
+  name: 'CollapsedItemsRender',
+  props: ['value', 'minCollapsedNum'],
+  emits: ['close'],
+  setup(props, { attrs, emit }) {
+
+    const count = computed(() => {
+      return props.value.length - props.minCollapsedNum;
+    });
+    const collapsedTags = computed(() => {
+      return props.value.slice(props.minCollapsedNum, props.value.length)
+    });
+
+    return () => {
+      if (count.value <= 0) return null;
+      return (
+        <t-popup
+          v-slots={{
+            content: () => (
+              <>
+                {collapsedTags.value.map((item, index) => (
+                  <t-tag
+                    {...attrs}
+                    key={item}
+                    onClose={(context) => emit('close', { e: context.e, index: props.minCollapsedNum.value + index })}
+                  >
+                    {item}
+                  </t-tag>
+                ))}
+              </>
+            ),
+          }}
+        >
+          <t-tag {...attrs} closable={false}>Slot - More({count.value})</t-tag>
+        </t-popup>
+      )
+    }
+  }
+});
 </script>
diff --git a/src/select/props.ts b/src/select/props.ts
index 0556695077..635b8f31f2 100644
--- a/src/select/props.ts
+++ b/src/select/props.ts
@@ -16,7 +16,7 @@ export default {
   borderless: Boolean,
   /** 是否可以清空选项 */
   clearable: Boolean,
-  /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量 */
+  /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件 */
   collapsedItems: {
     type: Function as PropType<TdSelectProps['collapsedItems']>,
   },
diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md
index 8b6ca7c1d1..da0d8ddb8a 100644
--- a/src/select/select.en-US.md
+++ b/src/select/select.en-US.md
@@ -9,7 +9,7 @@ autoWidth | Boolean | false | \- | N
 autofocus | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: T[]; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 creatable | Boolean | false | \- | N
 disabled | Boolean | - | \- | N
 empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
diff --git a/src/select/select.md b/src/select/select.md
index b18d0197b1..99e1998ec5 100644
--- a/src/select/select.md
+++ b/src/select/select.md
@@ -9,7 +9,7 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N
 autofocus | Boolean | false | 自动聚焦 | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可以清空选项 | N
-collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量。TS 类型：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: T[]; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 creatable | Boolean | false | 是否允许用户创建新条目，需配合 filterable 使用 | N
 disabled | Boolean | - | 是否禁用组件 | N
 empty | String / Slot / Function | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
diff --git a/src/select/type.ts b/src/select/type.ts
index 08bf55221f..1307e79375 100644
--- a/src/select/type.ts
+++ b/src/select/type.ts
@@ -35,9 +35,9 @@ export interface TdSelectProps<T extends SelectOption = SelectOption> {
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件
    */
-  collapsedItems?: TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>;
+  collapsedItems?: TNode<{ value: T[]; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>;
   /**
    * 是否允许用户创建新条目，需配合 filterable 使用
    * @default false
diff --git a/src/tag-input/_example/collapsed.vue b/src/tag-input/_example/collapsed.vue
index d4164878cd..ac98508509 100644
--- a/src/tag-input/_example/collapsed.vue
+++ b/src/tag-input/_example/collapsed.vue
@@ -1,36 +1,136 @@
 <template>
   <t-space direction="vertical">
+
+    <h3>default: </h3>
     <t-tag-input v-model="tags" :min-collapsed-num="1" />
 
+    <h3>use collapsedItems: </h3>
+    <t-space>
+      <div>size control:</div>
+      <t-radio-group :value="size" :options="['small', 'medium', 'large']" @change="(value) => size = value" />
+    </t-space>
+    <t-space>
+      <span>disabled control:</span>
+      <t-checkbox :checked="disabled" @change="(value) => disabled = value" />
+    </t-space>
+    <t-space>
+      <span>readonly control:</span>
+      <t-checkbox :checked="readonly" @change="(value) => readonly = value" />
+    </t-space>
     <!-- 方式一：使用渲染函数自定义折叠项 -->
-    <t-tag-input v-model="tags" :min-collapsed-num="2" :collapsed-items="renderCollapsedItems" />
+    <t-tag-input 
+      v-model="tags"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :collapsed-items="collapsedItems"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    />
 
     <!-- 方式二：使用插槽自定义折叠项 -->
-    <t-tag-input v-model="tags" :min-collapsed-num="3">
-      <template #collapsedItems="{ collapsedTags }">
-        <t-popup>
-          <t-tag>More({{ collapsedTags.length }})</t-tag>
-          <template #content>
-            <t-tag v-for="item in collapsedTags" :key="item" style="margin-right: 4px">
-              {{ item }}
-            </t-tag>
-          </template>
-        </t-popup>
+    <t-tag-input
+      v-model="tags"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    >
+      <template #collapsedItems="{ value, onClose }">
+        <CollapsedItemsRender 
+          :style="{ marginRight: '4px' }"
+          :value="value"
+          :min-collapsed-num="minCollapsedNum"
+          :size="size"
+          :disabled="disabled"
+          :closable="!readonly && !disabled"
+          @close="onClose"
+        />
       </template>
     </t-tag-input>
   </t-space>
 </template>
 
-<script lang="jsx">
-import { defineComponent, ref } from 'vue';
-import { Tag } from 'tdesign-vue-next';
-
-export default defineComponent({
-  name: 'TTagInputCollapsed',
-  setup() {
-    const tags = ref(['Vue', 'React', 'Miniprogram', 'Angular', 'Flutter']);
-    const renderCollapsedItems = (_, { collapsedTags }) => <Tag>更多({collapsedTags.length})</Tag>;
-    return { tags, renderCollapsedItems };
-  },
+<script setup lang="jsx">
+import { defineComponent, computed, ref } from 'vue';
+
+const tags = ref(['Vue', 'React', 'Miniprogram', 'Angular', 'Flutter']);
+const size = ref('medium');
+const disabled = ref(false);
+const readonly = ref(false);
+const minCollapsedNum = ref(1);
+
+// Function
+const collapsedItems = (h, { value, onClose }) => {
+  if (!(value instanceof Array)) return null;
+  const count = value.length - minCollapsedNum.value;
+  const collapsedTags = value.slice(minCollapsedNum.value, value.length);
+  if (count <= 0) return null;
+  return (
+    <t-popup
+      v-slots={{
+        content: () => (
+          <>
+            {collapsedTags.map((item, index) => (
+              <t-tag
+                key={item}
+                style={{ marginRight: '4px' }}
+                size={size.value}
+                disabled={disabled.value}
+                closable={!readonly.value && !disabled.value}
+                onClose={(context) => onClose({ e: context.e, index: minCollapsedNum.value + index })}
+              >
+                {item}
+              </t-tag>
+            ))}
+          </>
+        ),
+      }}
+    >
+      <t-tag size={size.value} disabled={disabled.value}>Function - More({count})</t-tag>
+    </t-popup>
+  );
+};
+
+// Slot Component
+const CollapsedItemsRender = defineComponent({
+  name: 'CollapsedItemsRender',
+  props: ['value', 'minCollapsedNum'],
+  emits: ['close'],
+  setup(props, { attrs, emit }) {
+
+    const count = computed(() => {
+      return props.value.length - props.minCollapsedNum;
+    });
+    const collapsedTags = computed(() => {
+      return props.value.slice(props.minCollapsedNum, props.value.length)
+    });
+
+    return () => {
+      if (count.value <= 0) return null;
+      return (
+        <t-popup
+          v-slots={{
+            content: () => (
+              <>
+                {collapsedTags.value.map((item, index) => (
+                  <t-tag
+                    {...attrs}
+                    key={item}
+                    onClose={(context) => emit('close', { e: context.e, index: props.minCollapsedNum.value + index })}
+                  >
+                    {item}
+                  </t-tag>
+                ))}
+              </>
+            ),
+          }}
+        >
+          <t-tag {...attrs} closable={false}>Slot - More({count.value})</t-tag>
+        </t-popup>
+      )
+    }
+  }
 });
 </script>
diff --git a/src/tag-input/props.ts b/src/tag-input/props.ts
index a220f668f5..b49f603725 100644
--- a/src/tag-input/props.ts
+++ b/src/tag-input/props.ts
@@ -12,7 +12,7 @@ export default {
   autoWidth: Boolean,
   /** 是否可清空 */
   clearable: Boolean,
-  /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 */
+  /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件 */
   collapsedItems: {
     type: Function as PropType<TdTagInputProps['collapsedItems']>,
   },
diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md
index d456267152..e5b06e27af 100644
--- a/src/tag-input/tag-input.en-US.md
+++ b/src/tag-input/tag-input.en-US.md
@@ -7,7 +7,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 autoWidth | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: TagInputValue; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | \- | N
 dragSort | Boolean | false | \- | N
 excessTagsDisplayType | String | break-line | options: scroll/break-line | N
diff --git a/src/tag-input/tag-input.md b/src/tag-input/tag-input.md
index 7131a227f1..cd7028c04b 100644
--- a/src/tag-input/tag-input.md
+++ b/src/tag-input/tag-input.md
@@ -7,7 +7,7 @@
 -- | -- | -- | -- | --
 autoWidth | Boolean | false | 宽度随内容自适应 | N
 clearable | Boolean | false | 是否可清空 | N
-collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: TagInputValue; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 disabled | Boolean | - | 是否禁用标签输入框 | N
 dragSort | Boolean | false | 拖拽调整标签顺序 | N
 excessTagsDisplayType | String | break-line | 标签超出时的呈现方式，有两种：横向滚动显示 和 换行显示。可选项：scroll/break-line | N
diff --git a/src/tag-input/type.ts b/src/tag-input/type.ts
index 1a17485109..d23708d0f4 100644
--- a/src/tag-input/type.ts
+++ b/src/tag-input/type.ts
@@ -20,9 +20,9 @@ export interface TdTagInputProps {
    */
   clearable?: boolean;
   /**
-   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量
+   * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件
    */
-  collapsedItems?: TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>;
+  collapsedItems?: TNode<{ value: TagInputValue; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>;
   /**
    * 是否禁用标签输入框
    */
diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx
index 5e8bc8a1e0..65977e0821 100644
--- a/src/tag-input/useTagList.tsx
+++ b/src/tag-input/useTagList.tsx
@@ -20,11 +20,11 @@ export default function useTagList(props: TagInputProps) {
   const oldInputValue = ref<InputValue>();
 
   // 点击标签关闭按钮，删除标签
-  const onClose = (p: { e?: MouseEvent; index: number; item: string | number }) => {
+  const onClose = (p: { e?: MouseEvent; index: number; }) => {
     const arr = [...tagValue.value];
-    arr.splice(p.index, 1);
-    setTagValue(arr, { trigger: 'tag-remove', ...p });
-    onRemove.value?.({ ...p, trigger: 'tag-remove', value: arr });
+    const [item] = arr.splice(p.index, 1); // 当前删除的item无需参数传递
+    setTagValue(arr, { trigger: 'tag-remove', ...p, item });
+    onRemove.value?.({ ...p, item, trigger: 'tag-remove', value: arr });
   };
 
   const clearAll = (context: { e: MouseEvent }) => {
@@ -81,7 +81,7 @@ export default function useTagList(props: TagInputProps) {
               key={`${item}${index}`}
               size={size.value}
               disabled={disabled.value}
-              onClose={(context: { e: MouseEvent }) => onClose({ e: context.e, item, index })}
+              onClose={(context: { e: MouseEvent }) => onClose({ e: context.e, index })}
               closable={!readonly.value && !disabled.value}
               {...getDragProps.value?.(index, item)}
               {...tagProps.value}
@@ -103,9 +103,7 @@ export default function useTagList(props: TagInputProps) {
       const more = renderTNode('collapsedItems', {
         params: {
           value: tagValue.value,
-          count: tagValue.value.length - minCollapsedNum.value,
-          collapsedTags: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length),
-          collapsedSelectedItems: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length),
+          onClose,
         },
       });
       list.push(more ?? <Tag key="more">+{len}</Tag>);
diff --git a/src/tree-select/_example/collapsed.vue b/src/tree-select/_example/collapsed.vue
index 2313de5f65..1f7a3c3762 100644
--- a/src/tree-select/_example/collapsed.vue
+++ b/src/tree-select/_example/collapsed.vue
@@ -1,5 +1,17 @@
 <template>
   <t-space direction="vertical">
+
+    <h3>default: </h3>
+    <t-tree-select
+      v-model="value"
+      :data="options"
+      class="demo-space"
+      multiple
+      clearable
+      placeholder="请选择"
+      :min-collapsed-num="1"
+    >
+    </t-tree-select>
     <t-tree-select
       v-model="value"
       :data="options"
@@ -10,15 +22,56 @@
       :min-collapsed-num="1"
     >
     </t-tree-select>
-    <t-tree-select v-model="slotValue" :data="options" multiple clearable placeholder="请选择" :min-collapsed-num="1">
-      <template #collapsedItems>
-        <t-tag>更多...</t-tag>
+
+    <h3>use collapsedItems: </h3>
+    <t-space>
+      <div>size control:</div>
+      <t-radio-group :value="size" :options="['small', 'medium', 'large']" @change="(value) => size = value" />
+    </t-space>
+    <t-space>
+      <span>disabled control:</span>
+      <t-checkbox :checked="disabled" @change="(value) => disabled = value" />
+    </t-space>
+    <t-space>
+      <span>readonly control:</span>
+      <t-checkbox :checked="readonly" @change="(value) => readonly = value" />
+    </t-space>
+    <t-tree-select
+      v-model="value"
+      :data="options"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :collapsed-items="collapsedItems"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    >
+    </t-tree-select>
+    <t-tree-select
+      v-model="value"
+      :data="options"
+      multiple
+      :min-collapsed-num="minCollapsedNum"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+    >
+      <template #collapsedItems="{ value, onClose }">
+        <CollapsedItemsRender 
+          :style="{ marginRight: '4px' }"
+          :value="value"
+          :min-collapsed-num="minCollapsedNum"
+          :size="size"
+          :disabled="disabled"
+          :closable="!readonly && !disabled"
+          @close="onClose"
+        />
       </template>
     </t-tree-select>
   </t-space>
 </template>
-<script setup>
-import { ref } from 'vue';
+<script setup lang="jsx">
+import { defineComponent, computed, ref } from 'vue';
 
 const options = [
   {
@@ -51,5 +104,81 @@ const options = [
   },
 ];
 const value = ref(['guangzhou', 'shenzhen']);
-const slotValue = ref(['guangzhou', 'shenzhen']);
+const size = ref('medium');
+const disabled = ref(false);
+const readonly = ref(false);
+const minCollapsedNum = ref(1);
+
+// Function
+const collapsedItems = (h, { value, onClose }) => {
+  if (!(value instanceof Array)) return null;
+  const count = value.length - minCollapsedNum.value;
+  const collapsedTags = value.slice(minCollapsedNum.value, value.length);
+  if (count <= 0) return null;
+  return (
+    <t-popup
+      v-slots={{
+        content: () => (
+          <>
+            {collapsedTags.map((item, index) => (
+              <t-tag
+                key={item}
+                style={{ marginRight: '4px' }}
+                size={size.value}
+                disabled={disabled.value}
+                closable={!readonly.value && !disabled.value}
+                onClose={(context) => onClose({ e: context.e, index: minCollapsedNum.value + index })}
+              >
+                {item}
+              </t-tag>
+            ))}
+          </>
+        ),
+      }}
+    >
+      <t-tag size={size.value} disabled={disabled.value}>Function - More({count})</t-tag>
+    </t-popup>
+  );
+};
+
+// Slot Component
+const CollapsedItemsRender = defineComponent({
+  name: 'CollapsedItemsRender',
+  props: ['value', 'minCollapsedNum'],
+  emits: ['close'],
+  setup(props, { attrs, emit }) {
+
+    const count = computed(() => {
+      return props.value.length - props.minCollapsedNum;
+    });
+    const collapsedTags = computed(() => {
+      return props.value.slice(props.minCollapsedNum, props.value.length)
+    });
+
+    return () => {
+      if (count.value <= 0) return null;
+      return (
+        <t-popup
+          v-slots={{
+            content: () => (
+              <>
+                {collapsedTags.value.map((item, index) => (
+                  <t-tag
+                    {...attrs}
+                    key={item}
+                    onClose={(context) => emit('close', { e: context.e, index: props.minCollapsedNum.value + index })}
+                  >
+                    {item}
+                  </t-tag>
+                ))}
+              </>
+            ),
+          }}
+        >
+          <t-tag {...attrs} closable={false}>Slot - More({count.value})</t-tag>
+        </t-popup>
+      )
+    }
+  }
+});
 </script>
diff --git a/src/tree-select/props.ts b/src/tree-select/props.ts
index e19329c67d..c183a7b678 100644
--- a/src/tree-select/props.ts
+++ b/src/tree-select/props.ts
@@ -14,7 +14,7 @@ export default {
   borderless: Boolean,
   /** 是否允许清空 */
   clearable: Boolean,
-  /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义 */
+  /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件 */
   collapsedItems: {
     type: Function as PropType<TdTreeSelectProps['collapsedItems']>,
   },
diff --git a/src/tree-select/tree-select.en-US.md b/src/tree-select/tree-select.en-US.md
index c3ec424f4f..03fc15e239 100644
--- a/src/tree-select/tree-select.en-US.md
+++ b/src/tree-select/tree-select.en-US.md
@@ -9,7 +9,7 @@ autoWidth | Boolean | false | \- | N
 autofocus | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: DataOption[]; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 data | Array | [] | Typescript：`Array<DataOption>` | N
 disabled | Boolean | - | \- | N
 empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md
index 32163b52c9..079fb0f851 100644
--- a/src/tree-select/tree-select.md
+++ b/src/tree-select/tree-select.md
@@ -9,7 +9,7 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N
 autofocus | Boolean | false | 自动聚焦 | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否允许清空 | N
-collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件。TS 类型：`TNode<{ value: DataOption[]; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 data | Array | [] | 树选择的数据列表。结构：`[{ label: TNode, value: string \| number, text: string, ... }]`，其中 `label` 表示选项呈现的内容，可自定义；`value` 表示选项的唯一值；表示当 `label` 用于选项复杂内容呈现时，`text` 用于搜索功能。<br />其中 `label` 和 `value` 可以使用 `keys` 属性定义别名。TS 类型：`Array<DataOption>` | N
 disabled | Boolean | - | 是否禁用组件 | N
 empty | String / Slot / Function | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts
index e196338051..3803d03da4 100644
--- a/src/tree-select/type.ts
+++ b/src/tree-select/type.ts
@@ -30,9 +30,9 @@ export interface TdTreeSelectProps<DataOption extends TreeOptionData = TreeOptio
    */
   clearable?: boolean;
   /**
-   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义
+   * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`onClose` 表示关闭标签时触发的事件
    */
-  collapsedItems?: TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>;
+  collapsedItems?: TNode<{ value: DataOption[]; onClose: (p: { e?: MouseEvent; index: number; }) => void; }>;
   /**
    * 数据
    * @default []