CascaderMenu如何实现多选功能

CascaderMenu 组件实现多选功能的方法类似于 CascaderPanel 组件，也是通过添加多选框和维护已选中的值来实现的。具体实现步骤如下：

1. 在 CascaderMenu 组件中添加一个多选框，例如：

<el-checkbox v-model="multiple" @change="handleMultipleChange">多选</el-checkbox>

其中，`multiple` 表示当前是否多选，`handleMultipleChange` 是多选框值改变时的回调函数。

2. 在 CascaderMenu 组件的 `props` 中添加一个 `checkedKeys` 属性，用于接收已选中的值。例如：

props: {
  // ...
  checkedKeys: {
    type: Array,
    default: () => [],
  },
},

3. 在 CascaderMenu 组件中，当用户点击菜单项时，需要根据 `multiple` 属性的值来判断是单选还是多选。如果是单选，直接触发 `onItemClick` 事件；如果是多选，需要更新 `checkedKeys` 属性，并且触发 `onCheckChange` 事件。例如：

handleItemClick(option) {
  if (this.multiple) {
    const index = this.checkedKeys.indexOf(option.value);
    if (index >= 0) {
      this.checkedKeys.splice(index, 1);
    } else {
      this.checkedKeys.push(option.value);
    }
    this.$emit('check-change', this.checkedKeys);
  } else {
    this.$emit('item-click', option);
  }
}

在多选模式下，通过判断当前值是否已经在 `checkedKeys` 中，来实现添加或删除值的操作，并且触发 `onCheckChange` 事件。

4. 在 CascaderMenu 组件中，需要根据 `multiple` 属性的值来判断是否显示已选中的值。当 `multiple` 为 `true` 时，需要通过 `checkedKeys` 属性来展示已选中的值，例如：

<template v-if="multiple">
  <div class="el-cascader-menu__tags">
    <el-tag v-for="key in checkedKeys" :key="key" closable @close="handleTagClose(key)">
      {{ getCheckedNodeLabel(key) }}
    </el-tag>
  </div>
</template>

其中，`getCheckedNodeLabel` 函数用于获取已选中的节点的标签文本。

5. 在 CascaderMenu 组件中，需要在 `checkedKeys` 属性发生变化时，更新菜单项的选中状态。例如：

watch: {
  checkedKeys: {
    deep: true,
    handler(value) {
      this.updateMenuItemsCheckedState(value);
    },
  },
},

在 `updateMenuItemsCheckedState` 函数中，需要递归处理菜单项的选中状态。

通过上述步骤，就可以在 CascaderMenu 组件中实现多选功能了。