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

Question

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

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

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

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

我不确定发生了什么，但请注意，如果我反转表中的注释并使用其他复选框运行，则行为是“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

您需要使用b-form-checkbox-group将v-model绑定(bind)为数组。我不确定如何在 v-table 中执行此操作，但有一个使用 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"/>

并定义自定义方法:

 methods: {
    onInputAdminRoles (isCheck, roleId) {
      if (isCheck) {
        this.adminRolePermissions = this.adminRolePermissions.concat([roleId])
      } else {
        this.adminRolePermissions = this.adminRolePermissions.filter (item => item !== roleId)
      }
    }
  }