72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="tableAction" :style="`justify-content: ${getAlign}`">
|
||
|
|
<template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
|
||
|
|
<n-button v-if="!action.type || action.type === 'button'" class="tableAction__item" v-bind="action.props">{{ action.label }}</n-button>
|
||
|
|
<n-popconfirm
|
||
|
|
v-if="action.type === 'popconfirm'"
|
||
|
|
v-bind="action.props"
|
||
|
|
>
|
||
|
|
<template #trigger>
|
||
|
|
<n-button v-bind="action.ButtonProps" class="tableAction__item">{{ action.label }}</n-button>
|
||
|
|
</template>
|
||
|
|
{{ action.tip }}
|
||
|
|
</n-popconfirm>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { defineComponent, computed, toRaw, reactive } from 'vue'
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'TableAction',
|
||
|
|
props: {
|
||
|
|
actions: {
|
||
|
|
type: Array,
|
||
|
|
default: null,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
align: {
|
||
|
|
type: String,
|
||
|
|
default: 'center',
|
||
|
|
validator: (value) => {
|
||
|
|
return ['left', 'right', 'center'].indexOf(value) !== -1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(props, { emit }) {
|
||
|
|
const data = reactive({
|
||
|
|
permissionList: [
|
||
|
|
'basic_list'
|
||
|
|
]
|
||
|
|
})
|
||
|
|
|
||
|
|
const getActions = computed(() => {
|
||
|
|
return (toRaw(props.actions) || [])
|
||
|
|
.filter((action) => {
|
||
|
|
return data.permissionList.includes(action.auth) || action.auth === ''
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
const getAlign = computed(() => {
|
||
|
|
return toRaw(props.align)
|
||
|
|
})
|
||
|
|
|
||
|
|
return {
|
||
|
|
getActions,
|
||
|
|
getAlign
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
.tableAction{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.tableAction__item{
|
||
|
|
margin: 0 5px;
|
||
|
|
}
|
||
|
|
// justify-content: center;
|
||
|
|
}
|
||
|
|
</style>
|