반응형
부트스트랩-뷰:b-table에 열로 표시된 b-form-checkbox의 여러 배열로 Role Permissions 구현.작동하지 않음
다음 이미지에 설명된 대로 역할별 사용 권한을 관리하는 페이지를 만들려는 문제:
현재 구현된 대로 아무 상자나 클릭하면 해당 열의 모든 상자가 확인된다.
예: "관리자"의 "사용자 만들기"를 클릭하면 다음과 같이 나타난다.
마찬가지로, 다른 열 중 하나를 체크하면 해당 열의 모든 확인란이 체크된다.두 경우 모두 확인란을 지우면 해당 열의 모든 확인란도 지워진다.
무슨 일이 일어나고 있는지는 잘 모르겠지만, 만약 내가 표의 코멘트를 뒤집고 다른 확인란과 함께 실행한다면, 내가 어떤 열을 확인했는지에 관계없이 "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"]
}
],사용할 필요가 있음b-form-checkbox-groupv-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)
}
}
}
b-form-checkbox 그룹에 관한 ittus의 제안을 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 docs가 모두 명시하듯이, 우리는 포장해야 한다.<b-form-checkbox>의<b-form-checkbox-group>그리고 나서 사용하다v-model그룹을 배열과 연결하십시오.잠시(약 10시간) 가지고 놀다가 드디어 머리뼈를 통해 그때서야 겨우 묶기만 하면 된다는 것을 알게 되었다.value의 속성<b-form-checkbox>에게permission.id에서 얻은 변수v-for위의 행 정의에서.
나는 이것이 왜 어떻게 작용하는지에 대한 어떤 추가적인 코멘트가 있으면 좋겠다.나는 그 일이 놀랍다고 생각한다.<b-form-checkbox>외부 변수에 대한 가시성이 있음<b-form-checkbox-group>
여기에서 발견된 관련 부트스트랩-뷰 설명서의 인용문
값
기본적으로 값은 선택 시 참이고 선택 취소 시 거짓이 된다.값과 선택되지 않은 값 속성을 지정하여 선택한 값과 선택되지 않은 값을 사용자 정의할 수 있다.
v-model이 선택한 속성에 바인딩됨.단일 데이터 상태 변수에 바인딩되는 여러 개의 확인란이 있는 경우 v-model에 어레이 참조 []를 제공해야 함!
v-model이 여러 개의 확인란(즉, 어레이 참조)에 바인딩된 경우 선택되지 않은 값은 사용되지 않는다는 점에 유의하십시오.v-model 바인딩된 어레이에서는 체크된 chcekbox 값만 반환된다.각 확인란의 값 받침대에 고유한 값을 제공해야 한다.
여러 개의 확인란 및 접근성
여러 개의 확인란을 함께 바인딩할 때는 그룹 내의 모든 s에 대해 개별적으로 또는 의 이름 > prop을 통해 동일한 값으로 이름 프로펠러를 설정해야 한다.이것은 사용자들에게 확인란이 연관되어 있다는 것을 증명하는 기술을 알려줄 것이다.
다중 선택란을 사용할 때마다 구성 요소에 배치하여 전체 확인란 그룹과 레이블을 연결할 것을 권장한다.
확인란에 키를 설정해 보십시오.
<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>
반응형
'programing' 카테고리의 다른 글
| vue에서 조건부 클래스와 조건부 클래스의 결합 (0) | 2022.03.24 |
|---|---|
| *ngFor를 사용하여 개체 키 및 값 액세스 (0) | 2022.03.24 |
| Python에서 XPath를 사용하는 방법? (0) | 2022.03.24 |
| 가져오기 경로 내부의 @는 무엇을 의미하나? (0) | 2022.03.23 |
| (null이 없는) 두 스트림을 병합하여 쌍에 조건을 적용하는 방법 (0) | 2022.03.23 |