vue+elementui 表单中实现级联选择，首层多选第二层单选

在Vue中使用Element UI实现级联选择器，首层为多选框（el-checkbox-group），第二层为单选按钮（el-radio-group），可以通过v-model绑定数据以及自定义方法来实现。

以下是一个简单的例子：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="级联选择">
      <el-checkbox-group v-model="form.multipleSelection">
        <el-checkbox v-for="item in checkboxOptions" :label="item.value" :key="item.label">
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
      <div v-for="(item, index) in form.multipleSelection" :key="index">
        <span>{{ item }} 级联选择结果: </span>
        <el-radio-group v-model="form.singleSelection[index]">
          <el-radio v-for="option in radioOptions" :label="option.value" :key="option.label">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </div>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        multipleSelection: [],
        singleSelection: {}
      },
      checkboxOptions: [
        { label: '选项A', value: 'A' },
        { label: '选项B', value: 'B' },
        { label: '选项C', value: 'C' }
      ],
      radioOptions: [
        { label: '选项X', value: 'X' },
        { label: '选项Y', value: 'Y' },
        { label: '选项Z', value: 'Z' }
      ]
    };
  }
};
</script>

在这个例子中，form.multipleSelection 用于存储首层多选的结果，form.singleSelection 是一个对象，用于存储每个首层选项对应的第二层单选结果。通过遍历 form.multipleSelection，为每个选中的项创建一个对应的 el-radio-group。

用户的选择会实时更新到 form.multipleSelection 和 form.singleSelection 中，你可以根据这些数据进行后续的处理。