Bootstrap-Vue：将角色权限实现为b-form-checkbox的多个数组，在b-table中显示为列。不工作

Question

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

按照当前的实施方式，在任何框中单击都会导致该列中的所有框都被选中。

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

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

我不确定这是怎么回事，但是请注意，如果我反转表中的注释并与其他复选框一起运行，则其行为是无论我检查了哪一列，都将检查“ Admin”下的所有列框。

这是组件的相关模板html和脚本，以及vuex存储中的相关脚本。在此先感谢您的帮助！

import {
  store
} from "../store/store";

export default {
  data() {
    return {
      items: this.$store.state.permissions,
      roles: this.$store.state.roles,

      adminRolePermissions: this.$store.state.roles[this.$store.state.roles.map(function(permission) {
        return permission.name;
      }).indexOf('Admin')].rolePermissions,
      salesRolePermissions: this.$store.state.roles[this.$store.state.roles.map(function(permission) {
        return permission.name;
      }).indexOf('Sales')].rolePermissions,
      maintRolePermissions: this.$store.state.roles[this.$store.state.roles.map(function(permission) {
        return permission.name;
      }).indexOf('Maintenance')].rolePermissions,
      accouRolePermissions: this.$store.state.roles[this.$store.state.roles.map(function(permission) {
        return permission.name;
      }).indexOf('Accounting')].rolePermissions,

      fields: [{
          key: "name",
          label: "Permission",
          class: "text-right"
        },
        {
          key: "admin",
          label: "Admin",
          class: "text-center"
        },
        {
          key: "sales",
          label: "Sales",
          class: "text-center"
        },
        {
          key: "maint",
          label: "Maintenance",
          class: "text-center"
        },
        {
          key: "account",
          label: "Accounting",
          class: "text-center"
        },
      ]
    };
  },

        <b-table responsive :items="items" :fields="fields" head-variant="dark">
            <template slot="admin" slot-scope="row">
              <b-form-checkbox id="admin" 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" 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" 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" v-model="accouRolePermissions" value="row.item.id"/>              
              <!-- <b-form-checkbox v-model="accouRolePermissions" v-bind:id="row.item.id"/> -->
            </template>
        </b-table>

商店（vuex）：

permissions: [{
      id: "u1",
      name: "View Users",
      grouping: "Users"
    },
    {
      id: "u2",
      name: "Create Users",
      grouping: "Users"
    },
    {
      id: "u3",
      name: "Remove Users",
      grouping: "Users"
    },
    {
      id: "u4",
      name: "Modify Users",
      grouping: "Users"
    },
    {
      id: "u5",
      name: "Assign Users To Roles",
      grouping: "Users"
    },
    {
      id: "r1",
      name: "Create Roles",
      grouping: "Roles"
    },
    {
      id: "r2",
      name: "Modify Roles",
      grouping: "Roles"
    },
    {
      id: "a1",
      name: "View Assets",
      grouping: "Assets"
    },
    {
      id: "a2",
      name: "Create Asset",
      grouping: "Assets"
    },
    {
      id: "a3",
      name: "Update Asset Info",
      grouping: "Assets"
    },
    {
      id: "a4",
      name: "Locate Assets",
      grouping: "Assets"
    },
    {
      id: "a5",
      name: "Change Asset Availability",
      grouping: "Assets"
    },
    {
      id: "m1",
      name: "View Asset Maintenance Records",
      grouping: "Maintenance"
    },
    {
      id: "m2",
      name: "Change Asset Maintenance Records",
      grouping: "Maintenance"
    },
    {
      id: "c1",
      name: "View Customer",
      grouping: "Customers"
    },
    {
      id: "c2",
      name: "Create Customer",
      grouping: "Customers"
    },
    {
      id: "c3",
      name: "Modify Customer Info",
      grouping: "Customers"
    },
    {
      id: "b1",
      name: "Create Booking",
      grouping: "Booking"
    },
    {
      id: "b2",
      name: "Update Booking",
      grouping: "Booking"
    },
    {
      id: "b3",
      name: "Remove Booking",
      grouping: "Booking"
    },
    {
      id: "f1",
      name: "View Invoices",
      grouping: "Accounting"
    },
    {
      id: "f2",
      name: "Create Invoice",
      grouping: "Accounting"
    },
    {
      id: "f3",
      name: "Update Invoice",
      grouping: "Accounting"
    },
    {
      id: "f4",
      name: "Pay Invoice",
      grouping: "Acounting"
    },
    {
      id: "f5",
      name: "Update Customer Status",
      grouping: "Accounting"
    }
  ],

  roles: [{
      name: "Admin",
      rolePermissions: ["u1", "u2", "u3", "u4", "u5", "r1", "r2", "a1", "a2", "a3", "a4", "a5", "m1", "m2", "c1", "c2", "c3", "b1", "b2", "b3", "f1", "f2", "f3", "f4", "f5"]
    },
    {
      name: "Sales",
      rolePermissions: ["a1", "a2", "a3", "a4", "a5", "c1", "c2", "c3", "b1", "b2", "b3", "m1"]
    },
    {
      name: "Maintenance",
      rolePermissions: ["a1", "a5", "m1", "m2"]
    },
    {
      name: "Accounting",
      rolePermissions: ["c1", "f1", "f2", "f3", "f4", "f5"]
    }
  ],

Answer 1

您需要使用package test; import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.remote.DesiredCapabilities; public class FistSeleniumTest { public static void main(String[] args) { System.setProperty("webdriver.gecko.driver", "D:\\Portnov\\Java\\First Project\\SeleniumTest\\libs\\geckodriver\\geckodriver.exe"); DesiredCapabilities capabilities = DesiredCapabilities.firefox(); capabilities.setCapability("marionette", true); WebDriver driver = new FirefoxDriver(); driver.get("https://seleniumhq.org/"); } } 将v-model绑定为一个数组。我不确定如何在v-table中执行此操作，但是b-form-checkbox-group

有解决方法

methods

和定义的自定义方法：

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

Answer 2

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

<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>

Answer 3

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

<script>
export default {
  data() {
    return {
      permissions: [{
          id: "a1",
          name: "View Assets"
        },
        {
          id: "a2",
          name: "Add Asset"
        },
        {
          id: "a3",
          name: "Modifiy Assets"
        }
      ],

      roles: [{
          name: "Admin",
          permissions: ["a1", "a2", "a3"]
        },
        {
          name: "Sales",
          permissions: ["a1"]
        },
        {
          name: "Maintenance",
          permissions: ["a1"]
        },
        {
          name: "Accounting",
          permissions: ["a1"]
        },
      ]
    };
  },
};
</script>

<style>
.headerRow {
  padding: .75rem;
  background-color: #000000;
  color: #ffffff;
  font-weight: bold;
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.bodyRow {
  padding: .75rem;
  border-top: 1px solid #dee2e6;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<template>
  <div>
    <b-row>
      <b-col>
        <b-container>
          <div id='permissionsTable'>
            <b-row class='headerRow'>
              <b-col cols='3'>Permissions</b-col>
              <b-col v-for="role in roles" v-bind:key="role.name">{{role.name}}</b-col>
            </b-row>
            <b-row v-for="permission in permissions" v-bind:key="permission.name" class="bodyRow">
              <b-col cols='3'>{{permission.name}}</b-col>
              <b-col v-for="(role, index) in roles" v-bind:key="role.name">
                <b-form-checkbox-group v-bind:id="role.name" v-bind:name="role.name + 'Permissions'" v-model="roles[index].permissions" >  
                  <b-form-checkbox v-bind:value="permission.id"/>
                </b-form-checkbox-group>
              </b-col>
          </b-row>
         </div>
        </b-container>
      </b-col>
    </b-row>
  </div>
</template>

说明？

正如ittus和bootstrap文档所指定的那样，我们必须将<b-form-checkbox>包装在<b-form-checkbox-group>中，然后使用v-model将组与数组链接。在玩了一段时间（约10小时）后，我终于通过骷髅弄到了它，我只需要将value的{​​{1}}属性绑定到<b-form-checkbox>从上面的行定义中的permission.id获得的变量。

我想补充为什么或如何的其他评论。我想我很惊讶v-for能够从<b-form-checkbox>之外看到变量{strong>

以下是here

中相关的Bootstrap-Vue文档的引用

  

值

     

默认情况下，选中后该值为true   如果未选中，则为false。您可以自定义选中的   通过指定值和未检查值来选择未检查值   属性。

     

v模型绑定到选中的属性。当你有多个   绑定到单个数据状态变量的复选框，您必须提供   v模型的数组引用[]！

     

请注意，将v-model绑定到多个复选框（即数组   ref），则不使用未检查的值。仅值   选中的chcekboxes将在v模型绑定数组中返回。您   应该为每个复选框的值属性提供唯一的值。

     

多个复选框和可访问性

     

将多个复选框绑定在一起时，应将名称prop设置为   群组中所有s的值都相同，也可以通过的名称> prop来获得。这将通知用户   复选框相关的技术。

     

无论何时使用多个复选框，建议    放置在组件中   将标签与整个复选框组相关联。