# 权限控制
# 普通用法
权限开关
<template>
权限开关
<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>
</template>
<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>显示代码复制代码复制代码
# 函数用法
<template>
<avue-crud :option="option"
:permission="getPermission"
:data="data"></avue-crud>
</template>
<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>显示代码复制代码复制代码
# 自定义用法
<template>
<avue-crud :option="option1"
ref="crud"
:data="data">
<template #menu="{size,row,index}">
<el-button text
type="primary"
icon="el-icon-edit"
:size="size"
:disabled="index==0"
@click="$refs.crud.rowEdit(row,index)">编辑</el-button>
<el-button text
type="primary"
icon="el-icon-delete"
:size="size">删除</el-button>
</template>
</avue-crud>
</template>
<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>显示代码复制代码复制代码