This commit is contained in:
张成
2025-11-06 11:52:41 +08:00
parent bd7704f2c9
commit 2bd32e9a34
3 changed files with 26 additions and 25 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Framework Demo</title>
<title>Admin Framework </title>
</head>
<body>
<div id="app"></div>

View File

@@ -4,35 +4,31 @@
<tbody class="endTbody" v-for="(row, index) in subData" :key="row.id">
<tr class="tr-row" v-if="row">
<td v-for="(col, sonColIndex) in columns"
:key="sonColIndex"
:class="[
{'td-expand': sonColIndex === 0},
{'td-operations': col.type === 'operation'},
col.className
]"
:style="{
<td v-for="(col, sonColIndex) in columns" :key="sonColIndex" :class="[
{ 'td-expand': sonColIndex === 0 },
{ 'td-operations': col.type === 'operation' },
col.className
]" :style="{
width: col.width || 'auto',
minWidth: col.minWidth || (sonColIndex === 0 ? '200px' : '100px')
}"
>
}">
<RenderCol v-if="col.render" :col="col.render" :param="{ row, index, col }" />
<template v-else>
<div class="first-box" v-if="sonColIndex == 1">
<div class="col-row expand-row" v-if="row.children && row.children.length > 0" @click="expander(row)">
<span class="indent-span" :style="{width:`${row.indentWidth}px`}"></span>
<i :class="['ivu-icon', 'link', 'ivu-icon-' + row.indexIcon]" aria-hidden="true"></i>
<span class="indent-span" :style="{ width: `${row.indentWidth}px` }"></span>
<i :class="['ivu-icon', 'link', 'ivu-icon-' + row.indexIcon]" aria-hidden="true"></i>
<label>{{ row[col.key] }}</label>
</div>
<div class="col-row" v-else>
<span class="indent-span" :style="{width:`${row.indentWidth}px`}"></span>
<span class="indent-span" :style="{ width: `${row.indentWidth}px` }"></span>
<label>{{ row[col.key] }}</label>
</div>
</div>
<label v-else>{{ row[col.key] }}</label>
<label v-else>{{ row[col.key] }}</label>
</template>
</td>
</tr>
@@ -212,7 +208,8 @@ table {
/* 确保表格可以在容器内滚动 */
.endTbody {
max-height: calc(100vh - 200px); /* 预留头部和其他元素的空间 */
max-height: calc(100vh - 200px);
/* 预留头部和其他元素的空间 */
overflow-y: auto;
}
@@ -236,7 +233,7 @@ table {
transition: background-color 0.2s;
&:hover {
background-color: rgba(45,140,240,0.05);
background-color: rgba(45, 140, 240, 0.05);
}
}
@@ -247,7 +244,7 @@ table {
line-height: 18px;
text-align: center;
border-radius: 2px;
background: rgba(45,140,240,0.08);
background: rgba(45, 140, 240, 0.08);
color: #2d8cf0;
margin-right: 6px;
cursor: pointer;
@@ -256,6 +253,7 @@ table {
.tr-row {
padding: 0px 5px;
td {
text-align: center;
word-wrap: break-word;
@@ -295,7 +293,7 @@ table {
line-height: 1.5;
text-align: left;
border-bottom: 1px solid #e8eaec;
/* 基础文本溢出处理 */
&:not(.td-operations) {
white-space: nowrap;
@@ -307,7 +305,8 @@ table {
/* 展开列样式 */
.td-expand {
width: auto;
min-width: 200px; /* 给展开图标和文本预留足够空间 */
min-width: 200px;
/* 给展开图标和文本预留足够空间 */
}
/* 操作列样式 */
@@ -315,13 +314,16 @@ table {
text-align: right;
white-space: nowrap;
width: auto;
min-width: 180px; /* 增加按钮空间 */
min-width: 180px;
/* 增加按钮空间 */
padding-right: 16px;
overflow: visible !important; /* 强制确保内容可见 */
overflow: visible !important;
/* 强制确保内容可见 */
position: relative;
z-index: 1; /* 确保按钮在最上层 */
z-index: 1;
/* 确保按钮在最上层 */
}
/* 确保操作列中的按钮组样式 */
.td-operations .ivu-btn-group {
display: inline-flex;

View File

@@ -167,7 +167,6 @@ export default {
{
key: 'operat',
title: '操作',
type: 'template',
width: 500,
render: (h, params) => {
let btns = [