Ant Design Vue <a-cascader> Issue with 'multiple' and ':show-checked-strategy‘ props

Question

I'm using Ant-Design-Vue in a Nuxt3 project. I found that the <a-cascader> component in Ant-Design-Vue cannot be used with both the multiple and :show-checked-strategy="Cascader.SHOW_ALL" attributes simultaneously. Here is my code copied from antdv official webstie :

<template>
<a-space direction="vertical" style="width: 100%">
  <h4>Cascader.SHOW_ALL</h4>
  <a-cascader
    v-model:value="value"
    style="width: 100%"
    max-tag-count="responsive"
    :options="options"
    placeholder="Please select"
    multiple
    :show-checked-strategy="Cascader.SHOW_ALL"
  ></a-cascader>
</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>

If I use either multiple or :show-checked-strategy="Cascader.SHOW_ALL" alone, there is no issue. Does anyone know how to handle this?

Answer 1

I've found a way to achieve what I wanted. Instead of using :show-checked-strategy="Cascader.SHOW_ALL, I use tagRender and multiple together, handling the data in the template.

This is my code:

<template lang="pug">
  a-space(direction='vertical' style='width: 100%')
    a-cascader(
      v-model:value="customNodes" 
      style='width: 100%' 
      :options='options'
      placeholder='please select' 
      multiple
    )
      template(v-slot:tagRender="data")
        a-tag(:key='data.value') {{ replaceString(data.value) }} 
</template>

<script setup>
const replaceString = (value) => {
  return value.replace(/__RC_CASCADER_SPLIT__/g, " / ");
}
</script>