一下是封装好的操作列组件：OperateBtn
<template>
<div class="button-group">
<div
class="visibleButtons"
v-for="(button, index) in visibleButtons"
:key="index"
>
<el-button
link
type="primary"
:icon="button.icon"
@click="button.click"
v-if="button.isshow && button.text !== '删除'"
>
{
{
button.text }}
</el-button>
<el-popconfirm
title="确定删除吗?"
width="200px"
@confirm="button.click"
:teleported="false"
placement="bottom"
v-if="button.isshow && button.text === '删除'"
>
<template #reference>
<el-button
link
type="primary"
:icon="button.icon"
@click.stop="button.del"
>
{
{
button.text }}
</el-button>
</template>
</el-popconfirm>
</div>
<el-dropdown v-if="showMore">
<span class="el-dropdown-link">
更多
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="(button, index) in hiddenButtons"
:key="index"
>
<span v-if="button.text !== '删除'" @click="button.click">
{
{
button.text }}
</span>
<el-popconfirm
title="确定要删除吗？"
confirmButtonText="确定"
cancelButtonText="取消"
@confirm="button.click"
v-if="button.text === '删除'"
>
<template #reference>
<el-button link @click.stop="button.del">
{
{
button.text }}
</el-button>
</template>
</el-popconfirm>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<script lang="ts">
import {
defineComponent, computed, ref } from "vue";
interface Item {
text: string;
icon: string;
isshow: boolean;
click: () => void;
del?: () => void; // 这个是可选属性 不给也没事
}
export default defineComponent({
name: "ButtonGroup",
props: {
buttons: {
type: Array as () => Item[],
default: () => [],
},
},
setup(props) {
const isshowButtons = () => {
return props.buttons?.filter((item: any) => {
return item.isshow;
});
};
let resultBtn = ref(isshowButtons());
const visibleButtons = computed(() => {
if (resultBtn.value.length <= 3) {
return resultBtn.value;
} else {
return resultBtn.value.slice(0, 2);
}
});
const hiddenButtons = computed(() => {
if (resultBtn.value.length <= 3) {
return [];
} else {
return resultBtn.value.slice(2);
}
});
const showMore = computed(() => {
return resultBtn.value.length > 3;
});
const del = () => {
};
return {
visibleButtons, hiddenButtons, showMore, del };
},
});
</script>
<style lang="scss" scoped>
.button-group {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
</style>
下面是在el-table中的使用:
<el-table>
<el-table-column align="right">
<operate-btn
:key="scope.row.id" // 子组件必须绑定一个key，不然切换表格分页的时候，表格操作列不会更新
:buttons="[ // 传给子组件的值，用来渲染按钮，包括：按钮文字、图标、按钮的点击事件、以及按钮的显示与隐藏控制
{
text: '编辑',
icon: 'Edit',
click: () => handleEdit(row),
isshow: row.status !== 1 ? true : false,
},
{
text: '订阅详情',
icon: 'Warning',
click: () => toAuthDetail(row),
isshow: row.status === 2 ? true : false,
},
{
text: '重新上架',
icon: 'RefreshRight',
click: () => handleRack(row),
isshow: row.status === 3 ? true : false,
},
{
text: '下架申请',
icon: 'BottomRight',
click: () => handleUnShelve(row),
isshow: row.status === 2 ? true : false,
},
{
text: '上架申请',
icon: 'TopRight',
click: () => handleRack(row),
isshow: row.status === 0 || row.status === 4 ? true : false,
},
{
text: '删除',
icon: 'Delete',
click: () => delApi(row.id),
isshow:
row.status === 0 || row.status === 3 || row.status === 4
? true
: false,
del: () => del($index),
},
// 只有微服务平台和已上架可见
{
text: '设置流控规则',
icon: 'DataAnalysis',
click: () => openFlowcontrol(row),
isshow: row.status === 2 && row.source === 1 ? true : false,
},
{
text: '设置超时规则',
icon: 'Timer',
click: () => openTimeout(row),
isshow: row.status === 2 && row.source === 1 ? true : false,
},
{
text: '监控',
icon: 'Monitor',
click: () => openMonitor(row),
isshow: row.status === 2 && row.source === 1 ? true : false,
},
]
/>
</el-table-column>
</el-table>