uniapp多选级联选择框

uniApp中的多选级联选择框是一种组件，它允许用户进行多级的选择，通常用于层级分明的数据结构展示，比如地区管理、部门分类等场景。这种选择框通常包含两部分：主选项列表和子选项列表。用户首先从主选项中选择一项，然后子选项列表会显示与所选主选项相关的子项，用户可以选择其中一个或多个。

在uniApp中，你可以通过`u-select`组件结合`@change`事件来实现多选级联效果。`u-select`组件本身支持单选或多选模式，通过设置`multiple`属性开启多选。当主选项发生变化时，可以根据其值动态加载子选项，或者在初始化时就提供所有级别的数据。

以下是简单的示例代码：

<u-select v-model="selected" multiple @change="handleChange">
  <u-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label">
    {{ item.label }}
    <!-- 使用递归或展开方式展示子选项 -->
    <u-select v-if="item.children && item.children.length" @change="handleSubChange(item)">
      <u-option v-for="subItem in item.children" :value="subItem.value" :label="subItem.label"></u-option>
    </u-select>
  </u-option>
</u-select>

<script>
data() {
  return {
    selected: [],
    options: [
      { value: 'parent1', label: '父选项1', children: [...] },
      { value: 'parent2', label: '父选项2', children: [...] }
    ]
  };
},
methods: {
  handleChange(items) {
    this.selected = items;
  },
  handleSubChange(parent) {
    // 当用户选择父级选项后处理子级操作
  }
}
</script>