feat(cascader): adds render-tag prop

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+### NEXT_VERSION
+
+### Features
+
+- `n-cascader` adds `render-tag` prop，closes [#6389](https://github.com/tusen-ai/naive-ui/issues/6389).
+
 ## 2.41.0
 
 ### Breaking Changes

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+### NEXT_VERSION
+
+### Features
+
+- `n-cascader` 新增 `render-tag` 属性，关闭 [#6389](https://github.com/tusen-ai/naive-ui/issues/6389)
+
 ## 2.41.0
 
 `2025-01-05`

src/cascader/demos/enUS/custom-render.demo.vue

@@ -1,5 +1,5 @@
 <markdown>
-# Customized rendering
+# Customized option rendering
 
 The `render-label` can be used to batch render cascader menu options.
 </markdown>

src/cascader/demos/enUS/index.demo-entry.md

@@ -15,6 +15,7 @@ virtual.vue
 check-strategy.vue
 custom-field.vue
 custom-render.vue
+render-tag.vue
 focus.vue
 status.vue
 ```
@@ -52,6 +53,7 @@ status.vue
 | render-prefix | `(info: { option: CascaderOption, node: VNode \| null, checked: boolean }) => VNodeChild` | `undefined` | Render function of all the options' prefix. | 2.38.2 |
 | render-label | `(option: CascaderOption, checked: boolean) => VNodeChild` | `undefined` | Render function for cascader menu option label. | 2.24.0 |
 | render-suffix | `(info: { option: CascaderOption, node: VNode \| null, checked: boolean }) => VNodeChild` | `undefined` | Render function of all the options' suffix. | 2.38.2 |
+| render-tag | `(props: { option: CascaderOption, handleClose: () => void }) => VNodeChild` | `undefined` | Render function for each option tag. | NEXT_VERSION |
 | separator | `string` | `' / '` | Selected option path value separator (used with `show-path`). |  |
 | show | `boolean` | `undefined` | Whether to show the menu. |  |
 | show-path | `boolean` | `true` | Whether to show the selected options as a path. |  |

src/cascader/demos/enUS/render-tag.demo.vue

@@ -0,0 +1,68 @@
+<markdown>
+# Customize tag rendering
+
+Give the tag a little color.
+</markdown>
+
+<script setup lang="ts">
+import { h } from 'vue'
+import type { CascaderOption, CascaderRenderTag } from 'naive-ui'
+import { NTag } from 'naive-ui'
+
+const tagTypes = ['success', 'warning', 'error'] as const
+const renderTag: CascaderRenderTag = ({ option, handleClose }) => {
+  const { level, label } = option
+  return h(
+    NTag,
+    {
+      type: tagTypes[(level as number) - 1],
+      closable: (level as number) === 1,
+      onClose: (e: MouseEvent) => {
+        e.stopPropagation()
+        handleClose()
+      }
+    },
+    { default: () => label }
+  )
+}
+
+const options = getOptions()
+
+function getOptions(depth = 3, iterator = 1, prefix = '') {
+  const length = 12
+  const options: CascaderOption[] = []
+  for (let i = 1; i <= length; ++i) {
+    if (iterator === 1) {
+      options.push({
+        value: `v-${i}`,
+        label: `l-${i}`,
+        level: iterator,
+        disabled: i % 5 === 0,
+        children: getOptions(depth, iterator + 1, `${String(i)}`)
+      })
+    }
+    else if (iterator === depth) {
+      options.push({
+        value: `v-${prefix}-${i}`,
+        label: `l-${prefix}-${i}`,
+        level: iterator,
+        disabled: i % 5 === 0
+      })
+    }
+    else {
+      options.push({
+        value: `v-${prefix}-${i}`,
+        label: `l-${prefix}-${i}`,
+        disabled: i % 5 === 0,
+        level: iterator,
+        children: getOptions(depth, iterator + 1, `${prefix}-${i}`)
+      })
+    }
+  }
+  return options
+}
+</script>
+
+<template>
+  <n-cascader multiple clearable :render-tag="renderTag" :options="options" />
+</template>

src/cascader/demos/zhCN/custom-render.demo.vue

@@ -1,5 +1,5 @@
 <markdown>
-# 自定义渲染
+# 自定义选项渲染
 
 使用 `render-label` 可以批量控制 cascader 菜单的选项渲染。
 </markdown>

src/cascader/demos/zhCN/index.demo-entry.md

@@ -15,6 +15,7 @@ virtual.vue
 check-strategy.vue
 custom-field.vue
 custom-render.vue
+render-tag.vue
 focus.vue
 status.vue
 default-value-debug.vue
@@ -53,6 +54,7 @@ default-value-debug.vue
 | render-prefix | `(info: { option: CascaderOption, node: VNode \| null, checked: boolean }) => VNodeChild` | `undefined` | 节点前缀的渲染函数 | 2.38.2 |
 | render-label | `(option: CascaderOption, checked: boolean) => VNodeChild` | `undefined` | Cascader 菜单选项标签渲染函数 | 2.24.0 |
 | render-suffix | `(info: { option: CascaderOption, checked: boolean }) => VNodeChild` | `undefined` | 节点后缀的渲染函数 | 2.38.2 |
+| render-tag | `(props: { option: CascaderOption, handleClose: () => void }) => VNodeChild` | `undefined` | 标签的渲染函数 | NEXT_VERSION |
 | separator | `string` | `' / '` | 数据分隔符 |  |
 | show | `boolean` | `undefined` | 是否打开菜单 |  |
 | show-path | `boolean` | `true` | 是否在选择器中显示选项路径 |  |

src/cascader/demos/zhCN/render-tag.demo.vue

@@ -0,0 +1,68 @@
+<markdown>
+# 自定义标签渲染
+
+给标签一点颜色看看。
+</markdown>
+
+<script setup lang="ts">
+import { h } from 'vue'
+import type { CascaderOption, CascaderRenderTag } from 'naive-ui'
+import { NTag } from 'naive-ui'
+
+const tagTypes = ['success', 'warning', 'error'] as const
+const renderTag: CascaderRenderTag = ({ option, handleClose }) => {
+  const { level, label } = option
+  return h(
+    NTag,
+    {
+      type: tagTypes[(level as number) - 1],
+      closable: (level as number) === 1,
+      onClose: (e: MouseEvent) => {
+        e.stopPropagation()
+        handleClose()
+      }
+    },
+    { default: () => label }
+  )
+}
+
+const options = getOptions()
+
+function getOptions(depth = 3, iterator = 1, prefix = '') {
+  const length = 12
+  const options: CascaderOption[] = []
+  for (let i = 1; i <= length; ++i) {
+    if (iterator === 1) {
+      options.push({
+        value: `v-${i}`,
+        label: `l-${i}`,
+        level: iterator,
+        disabled: i % 5 === 0,
+        children: getOptions(depth, iterator + 1, `${String(i)}`)
+      })
+    }
+    else if (iterator === depth) {
+      options.push({
+        value: `v-${prefix}-${i}`,
+        label: `l-${prefix}-${i}`,
+        level: iterator,
+        disabled: i % 5 === 0
+      })
+    }
+    else {
+      options.push({
+        value: `v-${prefix}-${i}`,
+        label: `l-${prefix}-${i}`,
+        disabled: i % 5 === 0,
+        level: iterator,
+        children: getOptions(depth, iterator + 1, `${prefix}-${i}`)
+      })
+    }
+  }
+  return options
+}
+</script>
+
+<template>
+  <n-cascader multiple clearable :render-tag="renderTag" :options="options" />
+</template>

src/cascader/index.ts

@@ -1,3 +1,3 @@
 export { cascaderProps, default as NCascader } from './src/Cascader'
 export type { CascaderProps, CascaderSlots } from './src/Cascader'
-export type { CascaderInst, CascaderOption } from './src/interface'
+export type { CascaderInst, CascaderOption, CascaderRenderTag } from './src/interface'

src/cascader/src/Cascader.tsx

@@ -1,4 +1,5 @@
 import type { InternalSelectionInst } from '../../_internal'
+import type { RenderTag } from '../../_internal/selection/src/interface'
 import type { ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import type { FormValidationStatus } from '../../form/src/interface'
@@ -9,6 +10,7 @@ import type {
   CascaderInst,
   CascaderMenuInstance,
   CascaderOption,
+  CascaderRenderTag,
   ExpandTrigger,
   Filter,
   Key,
@@ -160,6 +162,7 @@ export const cascaderProps = {
   renderLabel: Function as PropType<
     (option: CascaderOption, checked: boolean) => VNodeChild
   >,
+  renderTag: Function as PropType<CascaderRenderTag>,
   status: String as PropType<FormValidationStatus>,
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
@@ -467,6 +470,25 @@ export default defineComponent({
         hoverKeyRef.value = key
       }
     }
+    const cascaderRenderTagRef = computed<RenderTag | undefined>(() => {
+      const { renderTag } = props
+      if (!renderTag)
+        return undefined
+      const { getNode } = treeMateRef.value
+      return ({ option, handleClose }) => {
+        const { value } = option
+        if (value !== undefined) {
+          const tmNode = getNode(value)
+          if (tmNode) {
+            return renderTag({
+              option: tmNode.rawNode,
+              handleClose
+            })
+          }
+        }
+        return value
+      }
+    })
     const selectedOptionsRef = computed(() => {
       if (props.multiple) {
         const { showPath, separator, labelField, cascade } = props
@@ -1063,6 +1085,7 @@ export default defineComponent({
       selectedOptions: selectedOptionsRef,
       adjustedTo: adjustedToRef,
       menuModel: menuModelRef,
+      cascaderRenderTag: cascaderRenderTagRef,
       handleMenuTabout,
       handleMenuFocus,
       handleMenuBlur,
@@ -1112,6 +1135,7 @@ export default defineComponent({
                       selectedOption={this.selectedOption}
                       selectedOptions={this.selectedOptions}
                       multiple={this.multiple}
+                      renderTag={this.cascaderRenderTag}
                       filterable={this.filterable}
                       clearable={this.clearable}
                       disabled={this.mergedDisabled}

src/cascader/src/interface.ts

@@ -32,19 +32,19 @@
 
 export type OnUpdateValue = (
   value: string &
-    number &
-    string[] &
-    number[] &
-    Array<string | number> &
-    (string | null) &
-    (number | null) &
-    (string[] | null) &
-    (number[] | null) &
-    (Array<string | number> | null),
+  number &
+  string[] &
+  number[] &
+  Array<string | number> &
+  (string | null) &
+  (number | null) &
+  (string[] | null) &
+  (number[] | null) &
+  (Array<string | number> | null),
   option: null &
-    CascaderOption &
-    CascaderOption[] &
-    Array<CascaderOption | null>,
+  CascaderOption &
+  CascaderOption[] &
+  Array<CascaderOption | null>,
   path: null & CascaderOption[] & Array<CascaderOption[] | null>
 ) => void
 
@@ -119,6 +119,11 @@
   scroll: (index: number, elSize: number) => void
 }
 
+export type CascaderRenderTag = (props: {
+  option: CascaderOption
+  handleClose: () => void
+}) => VNodeChild
+
 export interface CascaderMenuExposedMethods {
   scroll: (depth: number, index: number, elSize: number) => void
   showErrorMessage: (label: string) => void