Javascript 引导Vue：将角色权限实现为b-form-checkbox的多个数组，并在b-table中显示为列。不起作用

问题 我正在尝试创建一个页面，以按角色管理权限，如下图所示：

按照当前的实现，单击任何框都会导致该列中的所有框都被选中

例如：点击“管理员”的“创建用户”将显示如下：

类似地，在任何其他列中进行复选将导致选中该列的所有复选框。无论哪种情况，清除任何复选框都会清除该列中的所有复选框

我不确定发生了什么，但请注意，如果我反转表中的注释并使用其他复选框运行，那么无论我选中了哪一列，该行为都会选中“Admin”下的所有列

下面是组件的相关模板html和脚本，以及vuex应用商店中的相关脚本。提前感谢您的帮助

导入{
商店
}来自“./商店/商店”；
导出默认值{
数据（）{
返回{
项目：此.$store.state.permissions，
角色：此。$store.state.roles，
adminRolePermissions:this.$store.state.roles[this.$store.state.roles.map（函数（权限））{
返回permission.name；
}).indexOf（'Admin'）].rolePermissions，
salesRolePermissions:this.$store.state.roles[this.$store.state.roles.map（功能（权限））{
返回permission.name；
}).indexOf（“销售”）]。角色权限，
maintRolePermissions:this.$store.state.roles[this.$store.state.roles.map（函数（权限））{
返回permission.name；
}).indexOf（“维护”）].角色权限，
accouRolePermissions:this.$store.state.roles[this.$store.state.roles.map（功能（权限））{
返回permission.name；
}).indexOf（“会计”）]。角色权限，
字段：[{
键：“名称”，
标签：“许可”，
类：“文本权限”
},
{
密钥：“管理员”，
标签：“管理员”，
类：“文本中心”
},
{
关键字：“销售”，
标签：“销售”，
类：“文本中心”
},
{
钥匙：“维护”，
标签：“维护”，
类：“文本中心”
},
{
密钥：“帐户”，
标签：“会计”，
类：“文本中心”
},
]
};
}，

---

您需要使用

b-form-checkbox-group

将v-model绑定为一个数组。我不确定如何在v-table中执行此操作，但有一种解决方法可以使用

方法

<b-form-checkbox id="admin" v-model="adminRolePermissions" 
  @input="onInputAdminRoles($event, row.item.id)"
  :checked="adminRolePermissions.includes(row.item.id)" value="row.item.id"/>

---

尝试在复选框上设置一个键

<b-table responsive :items="items" :fields="fields" head-variant="dark">
  <template slot="admin" slot-scope="row">
    <b-form-checkbox id="admin" :key="row.index" v-model="adminRolePermissions" value="row.item.id"/>
    <!-- <b-form-checkbox v-model="adminRolePermissions" v-bind:id="row.item.id"/>               -->
  </template>
  <template slot="sales" slot-scope="row">
    <b-form-checkbox id="sales" :key="row.index" v-model="salesRolePermissions" value="row.item.id"/>
    <!-- <b-form-checkbox v-model="salesRolePermissions" v-bind:id="row.item.id"/>               -->
  </template>
  <template slot="maint" slot-scope="row">
    <b-form-checkbox id="maint" :key="row.index" v-model="maintRolePermissions" value="row.item.id"/>
    <!-- <b-form-checkbox v-model="salesRolePermissions" v-bind:id="row.item.id"/> -->              
  </template>            
  <template slot="account" slot-scope="row">
    <b-form-checkbox id="accou" :key="row.index" v-model="accouRolePermissions" value="row.item.id"/>              
    <!-- <b-form-checkbox v-model="accouRolePermissions" v-bind:id="row.item.id"/> -->
  </template>
</b-table>

---

结合ittus关于b-form-checkbox-group的建议以及对引导vue文档的多次尝试和重读，我得出以下结论：

导出默认值{
数据（）{
返回{
权限：[{
id:“a1”，
名称：“查看资产”
},
{
id:“a2”，
名称：“添加资产”
},
{
身份证号码：“a3”，
名称：“修改资产”
}
],
角色：[{
名称：“管理员”，
权限：[“a1”、“a2”、“a3”]
},
{
名称：“销售”，
权限：[“a1”]
},
{
名称：“维护”，
权限：[“a1”]
},
{
名称：“会计”，
权限：[“a1”]
},
]
};
},
};

海德罗先生{
填充：.75rem；
背景色：#000000；
颜色：#ffffff；
字体大小：粗体；
垂直对齐：底部对齐；
边框底部：2个实心#dee2e6；
}
博迪罗先生{
填充：.75rem；
边框顶部：1px实心#dee2e6；
}

权限
{{role.name}
{{permission.name}

不幸的是，这不起作用，但感谢您提供的帮助。解决方法会导致相同的行为。此外，您需要一个：在@input之后停止，以停止否则发生的无限循环…我最终构建了您答案中的第一句话。我将在下面提供我自己的答案来演示结果。Thanks！！

<b-table responsive :items="items" :fields="fields" head-variant="dark">
  <template slot="admin" slot-scope="row">
    <b-form-checkbox id="admin" :key="row.index" v-model="adminRolePermissions" value="row.item.id"/>
    <!-- <b-form-checkbox v-model="adminRolePermissions" v-bind:id="row.item.id"/>               -->
  </template>
  <template slot="sales" slot-scope="row">
    <b-form-checkbox id="sales" :key="row.index" v-model="salesRolePermissions" value="row.item.id"/>
    <!-- <b-form-checkbox v-model="salesRolePermissions" v-bind:id="row.item.id"/>               -->
  </template>
  <template slot="maint" slot-scope="row">
    <b-form-checkbox id="maint" :key="row.index" v-model="maintRolePermissions" value="row.item.id"/>
    <!-- <b-form-checkbox v-model="salesRolePermissions" v-bind:id="row.item.id"/> -->              
  </template>            
  <template slot="account" slot-scope="row">
    <b-form-checkbox id="accou" :key="row.index" v-model="accouRolePermissions" value="row.item.id"/>              
    <!-- <b-form-checkbox v-model="accouRolePermissions" v-bind:id="row.item.id"/> -->
  </template>
</b-table>