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

View File

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

View File

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