vue+element 级联选择器一级单选，二级多选

在Vue中使用Element UI的级联选择器时，可以通过设置Cascader组件的props属性来实现一级选择器单选和二级选择器多选。以下是一个简单的示例：

<template>
  <el-cascader
    :options="options"
    :props="cascaderProps"
    v-model="selectedOptions"
    @change="handleChange"
  ></el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [], // 用于存储选中的值
      cascaderProps: {
        checkStrictly: true, // 设置为true实现二级多选
        expandTrigger: 'hover', // 设置为'hover'可以在鼠标悬停时展开下级菜单
      },
      options: [
        {
          value: 'option1',
          label: 'Option 1',
          children: [
            {
              value: 'child1',
              label: 'Child 1',
            },
            {
              value: 'child2',
              label: 'Child 2',
            },
          ],
        },
        {
          value: 'option2',
          label: 'Option 2',
          children: [
            {
              value: 'child3',
              label: 'Child 3',
            },
            {
              value: 'child4',
              label: 'Child 4',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log('Selected values:', value);
    },
  },
};
</script>

在这个例子中，Cascader组件的options属性定义了级联选择器的选项，cascaderProps中的checkStrictly设置为true使得二级选择器支持多选，expandTrigger设置为'hover'可以在鼠标悬停时展开下级菜单。v-model用于双向绑定选中的值，@change事件用于监听选项变化。