按钮转换成文字类型

This commit is contained in:
仲么了
2024-01-30 14:11:29 +08:00
parent b921e2a7e5
commit a660ee86be
17 changed files with 94 additions and 107 deletions

View File

@@ -58,86 +58,68 @@
<!-- 按钮组 -->
<!-- 只对默认的编辑删除排序按钮进行鉴权其他按钮请通过 display 属性控制按钮是否显示 -->
<div v-if="field.render == 'buttons' && field.buttons">
<div v-if="field.render == 'buttons' && field.buttons" class="cn-render-buttons">
<template v-for="(btn, idx) in field.buttons" :key="idx">
<!-- 常规按钮 -->
<el-button
v-if="btn.render == 'basicButton'"
@click="onButtonClick(btn)"
:class="btn.class"
class="table-operate"
:type="btn.type"
:loading="props.row.loading || false"
:disabled="btn.disabled && btn.disabled(row, field)"
v-bind="btn.attr"
>
<Icon v-if="!props.row.loading" :name="btn.icon" />
<div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
</el-button>
<!-- 带提示信息的按钮 -->
<el-tooltip
v-if="btn.render == 'tipButton'"
:disabled="btn.title && !btn.disabledTip ? false : true"
:content="btn.title"
placement="top"
>
<template v-if="!(btn.disabled && btn.disabled(row, field))">
<!-- 常规按钮 -->
<el-button
link
v-if="btn.render == 'basicButton'"
@click="onButtonClick(btn)"
:class="btn.class"
class="table-operate"
:type="btn.type"
:disabled="btn.disabled && btn.disabled(row, field)"
:loading="props.row.loading || false"
v-bind="btn.attr"
>
<Icon :name="btn.icon" />
<div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
<div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
</el-button>
</el-tooltip>
<!-- 确认框的按钮 -->
<el-popconfirm
v-if="btn.render == 'confirmButton'"
:disabled="btn.disabled && btn.disabled(row, field)"
v-bind="btn.popconfirm"
@confirm="onButtonClick(btn)"
>
<template #reference>
<div class="ml-6">
<el-tooltip :disabled="btn.title ? false : true" :content="btn.title" placement="top">
<el-button
:class="btn.class"
class="table-operate"
:type="btn.type"
:disabled="btn.disabled && btn.disabled(row, field)"
v-bind="btn.attr"
>
<Icon :name="btn.icon" />
<div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
</el-button>
</el-tooltip>
</div>
</template>
</el-popconfirm>
<!-- 带提示的可拖拽按钮 -->
<el-tooltip
v-if="btn.render == 'moveButton' && btn.name == 'weigh-sort'"
:disabled="btn.title && !btn.disabledTip ? false : true"
:content="btn.title"
placement="top"
>
<el-button
:class="btn.class"
class="table-operate move-button"
:type="btn.type"
:disabled="btn.disabled && btn.disabled(row, field)"
v-bind="btn.attr"
<!-- 提示信息的按钮 -->
<el-tooltip
v-if="btn.render == 'tipButton'"
:disabled="btn.title && !btn.disabledTip ? false : true"
:content="btn.title"
placement="top"
>
<Icon :name="btn.icon" />
<div v-if="btn.text" class="table-operate-text">{{ btn.text }}</div>
</el-button>
</el-tooltip>
<el-button
link
@click="onButtonClick(btn)"
:class="btn.class"
class="table-operate"
:type="btn.type"
v-bind="btn.attr"
>
<div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
</el-button>
</el-tooltip>
<!-- 带确认框的按钮 -->
<el-popconfirm
v-if="btn.render == 'confirmButton'"
:disabled="btn.disabled && btn.disabled(row, field)"
v-bind="btn.popconfirm"
@confirm="onButtonClick(btn)"
>
<template #reference>
<div style="display: inline-block">
<el-tooltip :disabled="btn.title ? false : true" :content="btn.title" placement="top">
<el-button
link
:class="btn.class"
class="table-operate"
:type="btn.type"
v-bind="btn.attr"
>
<div v-if="btn.text || btn.title" class="table-operate-text">
{{ btn.text || btn.title }}
</div>
</el-button>
</el-tooltip>
</div>
</template>
</el-popconfirm>
</template>
</template>
</div>
</template>
@@ -230,4 +212,9 @@ const getTagType = (value: string, custom: any): TagProps['type'] => {
height: 25px;
width: 100%;
}
.cn-render-buttons {
:deep(.el-button) {
margin-left: 0;
}
}
</style>