fix(管理端): SchemaTable 行操作改文字链接并统一操作列固定右侧

This commit is contained in:
吴昊天 2026-10-12 15:06:13 +08:00
parent 134b4b38af
commit f4d2b0cbb7
5 changed files with 20 additions and 40 deletions

View File

@ -25,19 +25,12 @@
<SchemaTableCell :column="column" :row="row" @switch-change="onSwitchChange" />
</template>
</el-table-column>
<!-- 操作列:行操作按钮(删除类动作用危险色;visible 声明行级显示条件) -->
<!-- 操作列:行操作文字链接(与用户列表等常规列表页一致:主色 <a> + 竖分隔线;visible 声明行级显示条件) -->
<el-table-column v-if="rowActions.length" label="操作" :width="actionColumnWidth" fixed="right">
<template #default="{ row }">
<template v-for="actionItem in rowActions" :key="actionItem.action">
<el-button
v-if="isActionVisible(actionItem, row)"
:type="actionItem.theme || (actionItem.action === 'delete' ? 'danger' : 'primary')"
link
v-db-click
@click="emit('row-action', { actionItem, row })"
>
{{ actionItem.label }}
</el-button>
<template v-for="(actionItem, index) in visibleRowActions(row)" :key="actionItem.action">
<el-divider v-if="index > 0" direction="vertical"></el-divider>
<a v-db-click @click="emit('row-action', { actionItem, row })">{{ actionItem.label }}</a>
</template>
</template>
</el-table-column>
@ -51,7 +44,7 @@
/**
* 通用页面表格(独立组件)
*
* 基于 el-table 封装:按列定义分发渲染(SchemaTableCell),操作列按行操作配置输出链接按钮。
* 基于 el-table 封装:按列定义分发渲染(SchemaTableCell),操作列按行操作配置输出文字链接。
*/
import { computed } from 'vue';
import SchemaTableCell from './SchemaTableCell.vue';
@ -88,10 +81,10 @@ const props = defineProps({
const emit = defineEmits(['row-action', 'switch-change', 'sort-change', 'selection-change']);
/** 操作列宽度:按按钮数量与文案长度估算 */
/** 操作列宽度:按链接文案长度与分隔线数量估算 */
const actionColumnWidth = computed(() => {
const totalChars = props.rowActions.reduce((sum, item) => sum + (item.label || '').length, 0);
return Math.max(100, totalChars * 15 + 60);
return Math.max(100, totalChars * 13 + 20 * props.rowActions.length + 40);
});
/** 超长文本列的气泡配置:通过 popperClass 限定最大宽度(样式见文件底部全局样式块) */
@ -132,6 +125,15 @@ function isActionVisible(actionItem, row) {
});
}
/**
* 当前行可见的行操作列表(模板按序渲染链接,分隔线插在相邻可见动作之间)
* @param {object} row 行数据
* @returns {Array}
*/
function visibleRowActions(row) {
return props.rowActions.filter((item) => isActionVisible(item, row));
}
/** 开关列切换透传 */
function onSwitchChange(payload) {
emit('switch-change', payload);
@ -154,28 +156,6 @@ function onSortChange({ prop, order }) {
}
</script>
<style lang="scss" scoped>
/* 操作列文字按钮:强制无背景无边框(项目主题改写了按钮变量体系,link 态被实心样式覆盖) */
:deep(.el-button.is-link) {
background: transparent !important;
border: none !important;
height: auto;
padding: 0 2px !important;
}
:deep(.el-button.is-link.el-button--primary) {
color: var(--el-color-primary) !important;
}
:deep(.el-button.is-link.el-button--danger) {
color: var(--el-color-danger) !important;
}
:deep(.el-button.is-link.el-button--success) {
color: var(--el-color-success) !important;
}
:deep(.el-button.is-link.el-button--warning) {
color: var(--el-color-warning) !important;
}
</style>
<style lang="scss">
/* 表格超长文本气泡(append-to-body 渲染在 body 下,scoped 样式不生效):
限制最大宽度,避免长描述撑满整屏 */

View File

@ -95,7 +95,7 @@
<span>{{ scope.row._pay_time }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<el-table-column label="操作" width="100" fixed="right">
<template #default="scope">
<a
href="javascript:void(0);"

View File

@ -73,7 +73,7 @@
<div>{{ scope.row.mark }}</div>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<el-table-column label="操作" width="100" fixed="right">
<template #default="scope">
<a v-db-click @click="setMark(scope.row)">修改备注</a>
</template>

View File

@ -55,7 +55,7 @@
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<el-table-column label="操作" width="100" fixed="right">
<template #default="scope">
<a v-db-click @click="edit(scope.row.id)">编辑</a>
<el-divider direction="vertical" v-if="currentTab === '1'"></el-divider>

View File

@ -61,7 +61,7 @@
<span v-else class="empty-text">暂无监听器</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<el-table-column label="操作" width="100" fixed="right">
<template #default="scope">
<a v-db-click @click="showDetail(scope.row)">详情</a>
</template>