60 lines
1.6 KiB
Vue
60 lines
1.6 KiB
Vue
<template>
|
|
<el-dropdown popper-class="custom-table-operate">
|
|
<el-icon class="custom-table-operate__more">
|
|
<template v-if="show">
|
|
<More />
|
|
</template>
|
|
</el-icon>
|
|
<template v-if="show" #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="formatterIcon(item)" :size="item.size" :disabled="item.disabled" text>
|
|
{{ formatterName(item) }}
|
|
</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: () => {} },
|
|
show: { type: Boolean, default: true },
|
|
});
|
|
|
|
const onPermission = (row) => {
|
|
if (row.auth === undefined) return true;
|
|
return typeof row.auth === 'function' ? row.auth(props.data) : row.auth;
|
|
};
|
|
|
|
const formatterName = (row) => {
|
|
return typeof row.name === 'function' ? row.name(props.data) : row.name;
|
|
};
|
|
|
|
const formatterIcon = (row) => {
|
|
return typeof row.icon === 'function' ? row.icon(props.data) : row.icon;
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.custom-table-operate {
|
|
&__more {
|
|
padding: 20px 5px;
|
|
font-size: 20px;
|
|
color: var(--el-color-primary);
|
|
cursor: pointer;
|
|
}
|
|
.el-button {
|
|
&,
|
|
&:hover &.is-text:hover,
|
|
&.is-text:not(.is-disabled):hover {
|
|
background: none !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|