时间戳

首页 > 解决方案 > Bootstrap-Vue：将角色权限实现为多个 b-form-checkbox 数组，在 b-table 中显示为列。不工作

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

问题描述

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

还没有选中任何框...

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

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

Admin 中的所有框都已选中！

同样，选中任何其他列都会导致该列的所有复选框都被选中。在任何一种情况下，清除任何复选框也会清除该列中的所有复选框。

我不确定发生了什么，但请注意，如果我反转表中的注释并使用其他复选框运行，则行为是这样的，即无论我选中了哪个列，都会检查“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"]
    }
  ],

标签： javascriptarraysvue.jsvuexbootstrap-vue

解决方案

您需要使用b-form-checkbox-group将 v-model 绑定为数组。我不确定如何在 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)
      }
    }
  }

推荐阅读