表格权限控制

控制封装中的按钮权限

TIP

1.0.6+

普通用法

权限控制 - 图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. column: [{
  13. label: '姓名',
  14. prop: 'name'
  15. }, {
  16. label: '年龄',
  17. prop: 'sex'
  18. }]
  19. },
  20. data: [{
  21. id: 1,
  22. name: '张三',
  23. sex: 12,
  24. }, {
  25. id: 2,
  26. name: '李四',
  27. sex: 20,
  28. }]
  29. }
  30. },
  31. watch: {
  32. text() {
  33. if (this.text === true) {
  34. this.permission = {
  35. delBtn: false,
  36. addBtn: false,
  37. }
  38. } else {
  39. this.permission = {
  40. delBtn: true,
  41. addBtn: true,
  42. }
  43. }
  44. }
  45. },
  46. methods: {
  47. expandChange(row, expendList) {
  48. this.$message.success('展开回调')
  49. },
  50. }
  51. }
  52. </script>

Permission Attributes

参数说明类型可选值默认值
viewBtn查看按钮Booleanfalse / truetrue
editBtn编辑按钮Booleanfalse / truetrue
addBtn新增按钮Booleanfalse / truetrue
addRowBtn行新增按钮Booleanfalse / truetrue
printBtn打印按钮Booleanfalse / truetrue
excelBtnexcel导出按钮Booleanfalse / truetrue
delBtn删除按钮Booleanfalse / truetrue
cellBtn行编辑按钮Booleanfalse / truetrue
dateBtn日期按钮Booleanfalse / truetrue
refreshBtn刷新按钮Booleanfalse / truetrue
columnBtn列显隐按钮Booleanfalse / truetrue
filterBtn过滤器按钮Booleanfalse / truetrue
searchBtn搜索按钮Booleanfalse / truetrue
menuBtn多功能菜单按钮Booleanfalse / truetrue
selectClearBtn选择清空按钮Booleanfalse / truetrue