• 表格权限控制
    • 普通用法
    • Permission Attributes

    表格权限控制

    控制封装中的按钮权限

    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