我有一个按组划分的多选vue元素，希望按组限制用户的选择

Question

我是vue的新手，所以我不确定这是一个简单还是困难的问题；但我有两个组，一个是针对客户，一个针对部门，我希望用户能够选择一个客户和一个部门。任何帮助都将是伟大的

<el-select v-model="value" multiple filterable placeholder="Filters" >
<el-option-group
v-for="group in options"
:key="group.label"
:label="group.label">
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-option-group>
</el-select>

Answer 1

有几种不同的方法可以做到这一点，但有一种方法是：

对于您拥有的每个组，创建一个计算特性，用于跟踪组中是否选择了一个。然后将该boolean添加到<el-option-group>作为<el-option-group :disabled="groupOneChosen"/>

检查可能类似于：

return this.value.some(element => this.group.options.includes(element))。

如果你想在一个对象中跟踪它们，你可能不必为每个对象创建计算属性，比如：

computed: {
groupsIncuded() {
return {
groupOne: this.value.some(element => this.group.options.includes(element))
}
}
}

然后在每组中检查为:disabled="groupsIncluded.groupOne"