arco desion 手动触发级联选择框选项清空

功能实现：

1. 限制选项数量，最多选三个
2. 点击按钮触发级联选择选项清空（文档中无对应方法，追踪对应示例对象，发现有清除选择框内容的方法）
3. 根据当前级联选项是否为空修改按钮显示状态

代码

<template>
  <a-card :style="{ width: '100%' }">
    <a-button shape="round" v-if="!needClear" style="margin-right: 20px"
      >Clear filter</a-button
    >
    <a-button
      shape="round"
      v-if="needClear"
      type="primary"
      style="margin-right: 20px"
      @click="handleClearSelect"
      >Clear filter</a-button
    >
    <span style="margin-right: 20px">fliter:</span>
    <a-cascader
      :options="options"
      :default-value="['datunli']"
      :style="{ width: '320px' }"
      placeholder="Please select ..."
      multiple
      v-model="selected"
      @change="selectChange"
      :format-label="format"
      allow-clear
      @clear="clearSelect"
      ref="levelSelect"
      :max-tag-count="1"
    />
  </a-card>
</template>

<script setup lang="ts">
import { levelSelectValueType } from '@/types/component'
import { CascaderInstance, CascaderOption, Message } from '@arco-design/web-vue'
import { computed, reactive, ref, nextTick } from 'vue'

// 级联选择框的ref对象
const levelSelect = ref<CascaderInstance | undefined>(undefined)
// 级联选择框的绑定值
const selected: levelSelectValueType = reactive([])

// 选项修改后，同步修改对应的绑定值
const selectChange = (val: levelSelectValueType) => {
  if ((val as levelSelectValueType[]).length > 3) {
    return Message.warning('最多选三个')
  }
  selected.length = 0
  selected.push(...(val as levelSelectValueType[]))
}

// 组件的clear事件触发后，清空对应的绑定值
const clearSelect = () => {
  selected.length = 0
}

// 手动触发清除级联选择框数据
const handleClearSelect = () => {
  nextTick(() => {
    const e = {
      stopPropagation: () => {
        console.log('清除选中数据')
      }
    }
    // 级联选择框实例的handleClear方法需要传递一个时间对象阻止冒泡
    // 由于我们外部触发清空，所以不需要阻止冒泡
    // 但是需要传递给他一个包含阻止冒泡方法的参数
    levelSelect.value?.handleClear(e as MouseEvent)
  })
  Message.success('清除选中')
}

// 是否需要清空级联选择
const needClear = computed(() => {
  return selected.length !== 0
})

// 级联选择框数据
const options = [
  {
    value: 'Language',
    label: 'Language',
    children: [
      {
        value: 'Coreference Resolution',
        label: 'Coreference Resolution',
        children: [
          {
            value: 'WSC',
            label: 'WSC'
          },
          {
            value: 'CLUEWSC',
            label: 'CLUEWSC'
          }
        ]
      },
      {
        value: 'Idiom Learning',
        label: 'Idiom Learning',
        children: [
          {
            value: 'CHID',
            label: 'CHID'
          }
        ]
      }
    ]
  },
  {
    value: 'Knowledge',
    label: 'Knowledge',
    children: [
      {
        value: 'Knowledge Question Answering',
        label: 'Knowledge Question Answering',
        children: [
          {
            value: 'BoolQ',
            label: 'BoolQ'
          },
          {
            value: 'CommonSenseQA',
            label: 'CommonSenseQA'
          }
        ]
      }
    ]
  }
]

// 格式化级联选择框显示
const format = (options: CascaderOption[]) => {
  return options[options.length - 1].label as string
}
</script>