47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<el-dropdown popper-class="custom-table-operate">
|
||
|
|
<el-icon class="custom-table-operate__more"><More /></el-icon>
|
||
|
|
<template #dropdown>
|
||
|
|
<el-dropdown-menu v-if="!isEmpty(actions)">
|
||
|
|
<template v-for="item in actions" :key="item.name">
|
||
|
|
<el-dropdown-item v-if="onPermission(item)" @click="item.event(data)">
|
||
|
|
<el-button :type="item.type ?? 'primary'" :icon="item.icon" :size="item.size" :disabled="item.disabled" text>
|
||
|
|
{{ item.name }}
|
||
|
|
</el-button>
|
||
|
|
</el-dropdown-item>
|
||
|
|
</template>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown>
|
||
|
|
</template>
|
||
|
|
<script setup name="custom-table-operate">
|
||
|
|
import { isEmpty } from '@/utils';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
actions: { type: Array, default: () => [] },
|
||
|
|
data: { type: Object, default: () => {} },
|
||
|
|
});
|
||
|
|
|
||
|
|
const onPermission = (row) => {
|
||
|
|
if (row.auth === undefined) return true;
|
||
|
|
return typeof row.auth === 'function' ? row.auth(props.data) : row.auth;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.custom-table-operate {
|
||
|
|
&__more {
|
||
|
|
padding: 20px 5px;
|
||
|
|
font-size: 20px;
|
||
|
|
color: $color-primary;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.el-button {
|
||
|
|
&,
|
||
|
|
&:hover &.is-text:hover,
|
||
|
|
&.is-text:not(.is-disabled):hover {
|
||
|
|
background: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|