Ant Design Vue <a-cascader>组件multiple与show-checked-strategy共存异常

针对你遇到的问题，可以从以下几个方向尝试解决：

1. 直接使用字符串常量替代枚举引用 #

Cascader.SHOW_ALL对应的实际值是字符串'SHOW_ALL'，在Nuxt3环境中直接引用枚举可能存在导入或注册异常，改用字符串常量可快速规避：

修改组件属性：

<a-cascader
  v-model:value="value"
  style="width: 100%"
  max-tag-count="responsive"
  :options="options"
  placeholder="Please select"
  multiple
  :show-checked-strategy="'SHOW_ALL'"
></a-cascader>

2. 确保正确导入Cascader枚举值 #

如果坚持使用枚举，需在<script setup>中明确导入枚举常量：

import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
import { Cascader, SHOW_ALL } from 'ant-design-vue';

// 组件内使用
:show-checked-strategy="SHOW_ALL"

3. 升级Ant Design Vue版本 #

部分旧版本的Ant Design Vue存在multiple与show-checked-strategy组合使用的兼容性bug，建议升级到v4.x及以上的最新稳定版，适配Vue3和Nuxt3的表现更好。

4. 用<ClientOnly>包裹组件（解决SSR渲染异常） #

Nuxt3的SSR模式下，部分交互组件可能出现渲染异常，将Cascader组件包裹在<ClientOnly>中，确保仅在客户端渲染：

<ClientOnly>
  <a-cascader
    v-model:value="value"
    style="width: 100%"
    max-tag-count="responsive"
    :options="options"
    placeholder="Please select"
    multiple
    :show-checked-strategy="'SHOW_ALL'"
  ></a-cascader>
</ClientOnly>

修改后的完整代码示例 #

<template>
  <a-space direction="vertical" style="width: 100%">
    <h4>SHOW_ALL Mode</h4>
    <ClientOnly>
      <a-cascader
        v-model:value="value"
        style="width: 100%"
        max-tag-count="responsive"
        :options="options"
        placeholder="Please select"
        multiple
        :show-checked-strategy="'SHOW_ALL'"
      ></a-cascader>
    </ClientOnly>
  </a-space>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
import { Cascader } from 'ant-design-vue';

const options: CascaderProps['options'] = [
  {
    label: 'Light',
    value: 'light',
    children: new Array(20)
      .fill(null)
      .map((_, index) => ({ label: `Number ${index}`, value: index })),
  },
  {
    label: 'Bamboo',
    value: 'bamboo',
    children: [
      {
        label: 'Little',
        value: 'little',
        children: [
          {
            label: 'Toy Fish',
            value: 'fish',
          },
          {
            label: 'Toy Cards',
            value: 'cards',
          },
          {
            label: 'Toy Bird',
            value: 'bird',
          },
        ],
      },
    ],
  },
];

const value = ref<string[]>([]);
</script>

内容的提问来源于stack exchange，提问作者YUN0814