求助：多选套多选的需求怎么实现？

中文
, ,
#1

原型图如下：

1
1445×594 58.4 KB

要求是这样的：

2
2857×208 3.39 KB

这种多选套多选，而且必须和原型图一摸一样的排序位置，我用的elementui 实现这种多选套多选要用el-checkbox-group 标签嵌套，这样的话 就不能保证选项的位置和原型一摸一样了。我没有头绪啊，求大佬教我。

#2

不用checkbox-group的方法

<template>
  <!--自行调整位置(样式)-->
  <el-check v-model="/*status.xxx*/">name</el-check>
  <!-- el-check -->
</template>

<script lang = ts setup>
  const status:Record<string,Ref<boolean>> = {}
  // TODO: 给status赋值
  // 获取所有选中的key
  const getSeletedKeys = () => Object.keys(status).filter(key => status[key])
</script>

使用el-check-group的方法

<template>
  <!--自行调整位置(样式)-->
  <el-check-group v-model="/*array*/">
    <el-row>
      <el-check label="/*label*/">name</el-check>
      <!-- el-check -->
    </el-row>
    <!-- el-row -->
  </el-check-group>
</template>
你还可以直接加个div解决
<template>
  <el-check-group>
    <div :style={textAlign:'left'}>
      <!-- el-check ... -->
    </div>
  </el-check-group>
</template>

其他方法

emmmm…自己想啊…
vue2的话转换一下就行，大致都一样