权限控制
... 2021-7-29 About 1 min
# 权限控制
Tips
2.6.0+
# 普通用法
权限开关
权限开关
<el-switch :active-value="false" :inactive-value="true" v-model="text" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</br></br>
<avue-crud :option="option" :permission="permission" :data="data"></avue-crud>
<script>
export default {
data() {
return {
text: false,
permission: {},
option: {
column: [{
label: '姓名',
prop: 'name'
}, {
label: '年龄',
prop: 'sex'
}]
},
data: [{
id: 1,
name: '张三',
sex: 12,
}, {
id: 2,
name: '李四',
sex: 20,
}]
}
},
watch: {
text() {
if (this.text === true) {
this.permission = {
delBtn: false,
addBtn: false,
menu:false,
}
} else {
this.permission = {
delBtn: true,
addBtn: true,
menu:true,
}
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
Expand Copy Copy
# 函数用法
<avue-crud :option="option" :permission="getPermission" :data="data"></avue-crud>
<script>
export default {
data() {
return {
option: {
column: [{
label: '姓名',
prop: 'name'
}, {
label: '年龄',
prop: 'sex'
}]
},
data: [{
id: 1,
name: '张三',
sex: 12,
}, {
id: 2,
name: '李四',
sex: 20,
}]
}
},
methods: {
getPermission(key, row, index){
if(key==='editBtn' && index==0){
return false;
}else if(key==='delBtn' && index==1){
return false;
}
return true;
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
Expand Copy Copy
# 自定义用法
<avue-crud :option="option1" ref="crud" :data="data">
<div slot="menu" slot-scope="{size,type,row,index}">
<el-button :type="type" :size="size" icon="el-icon-edit" :disabled="index==0" @click="$refs.crud.rowEdit(row,index)">编辑</el-button>
<el-button :type="type" :size="size" icon="el-icon-delete">删除</el-button>
</div>
</avue-crud>
<script>
export default {
data() {
return {
option1: {
editBtn:false,
delBtn:false,
column: [{
label: '姓名',
prop: 'name'
}, {
label: '年龄',
prop: 'sex'
}]
},
data: [{
id: 1,
name: '张三',
sex: 12,
}, {
id: 2,
name: '李四',
sex: 20,
}]
}
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Expand Copy Copy