权限

控制封装中的按钮权限

权限 - 图1

  1. 权限开关
  2. <el-switch :active-value="false" :inactive-value="true" v-model="text" active-color="#13ce66" inactive-color="#ff4949">
  3. </el-switch>
  4. <avue-crud :option="option" :permission="permission" :data="data"></avue-crud>
  5. <script>
  6. export default {
  7. data() {
  8. return {
  9. text: false,
  10. permission: {},
  11. option: {
  12. expand: true,
  13. column: [{
  14. label: '姓名',
  15. prop: 'name'
  16. }, {
  17. label: '年龄',
  18. prop: 'sex'
  19. }]
  20. },
  21. data: [{
  22. id: 1,
  23. name: '张三',
  24. sex: 12,
  25. }, {
  26. id: 2,
  27. name: '李四',
  28. sex: 20,
  29. }]
  30. }
  31. },
  32. watch: {
  33. text() {
  34. if (this.text === true) {
  35. this.permission = {
  36. delBtn: false,
  37. addBtn: false,
  38. }
  39. } else {
  40. this.permission = {
  41. delBtn: true,
  42. addBtn: true,
  43. }
  44. }
  45. }
  46. }
  47. }
  48. </script>

Permission Attributes

参数说明类型可选值默认值
viewBtn查看按钮Booleanfalse / truetrue
editBtn编辑按钮Booleanfalse / truetrue
addBtn新增按钮Booleanfalse / truetrue
delBtn删除按钮Booleanfalse / truetrue
cellBtn行编辑按钮Booleanfalse / truetrue
dateBtn日期按钮Booleanfalse / truetrue
refreshBtn刷新按钮Booleanfalse / truetrue
columnBtn列显隐按钮Booleanfalse / truetrue
searchBtn搜索按钮Booleanfalse / truetrue
selectClearBtn选择清空按钮Booleanfalse / truetrue