权限控制

普通用法

效果预览可直接操作下方示例

正在加载示例…

<template>
  权限开关
  <el-switch :active-value="false"
             :inactive-value="true"
             v-model="text"
             active-color="#13ce66"
             inactive-color="#ff4949" />
  <br /><br />
  <avue-crud :option="option"
             :permission="permission"
             :data="data" />
</template>

<script setup>
import { ref, watch } from 'vue';
const text = ref(false);
const permission = ref({});
const option = ref({
  column: [
    { label: '姓名', prop: 'name' },
    { label: '年龄', prop: 'sex' }
  ]
});
const data = ref([
  { id: 1, name: '张三', sex: 12 },
  { id: 2, name: '李四', sex: 20 }
]);

watch(text, (newVal) => {
  if (newVal === true) {
    permission.value = {
      delBtn: false,
      addBtn: false,
      menu: false
    };
  } else {
    permission.value = {
      delBtn: true,
      addBtn: true,
      menu: true
    };
  }
});
</script>

函数用法

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-crud :option="option"
             :permission="getPermission"
             :data="data" />
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    { label: '姓名', prop: 'name' },
    { label: '年龄', prop: 'sex' }
  ]
});
const data = ref([
  { id: 1, name: '张三', sex: 12 },
  { id: 2, name: '李四', sex: 20 }
]);

const 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="option"
             ref="crud"
             :data="data">
    <template #menu="{ size, row, index }">
      <el-button text
                 type="primary"
                 icon="el-icon-edit"
                 :size="size"
                 :disabled="index === 0"
                 @click="handleEdit(row, index)">编辑</el-button>
      <el-button text
                 type="primary"
                 icon="el-icon-delete"
                 :size="size">删除</el-button>
    </template>
  </avue-crud>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  editBtn: false,
  delBtn: false,
  column: [
    { label: '姓名', prop: 'name' },
    { label: '年龄', prop: 'sex' }
  ]
});
const data = ref([
  { id: 1, name: '张三', sex: 12 },
  { id: 2, name: '李四', sex: 20 }
]);

const crud = ref(null);


const handleEdit = (row, index) => {
  if (crud.value) {
    crud.value.rowEdit(row, index);
  }
};

</script>