1
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
@@ -307,7 +305,8 @@ table {
|
||||
/* 展开列样式 */
|
||||
.td-expand {
|
||||
width: auto;
|
||||
min-width: 200px; /* 给展开图标和文本预留足够空间 */
|
||||
min-width: 200px;
|
||||
/* 给展开图标和文本预留足够空间 */
|
||||
}
|
||||
|
||||
/* 操作列样式 */
|
||||
@@ -315,11 +314,14 @@ 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;
|
||||
/* 确保按钮在最上层 */
|
||||
}
|
||||
|
||||
/* 确保操作列中的按钮组样式 */
|
||||
|
||||
@@ -167,7 +167,6 @@ export default {
|
||||
{
|
||||
key: 'operat',
|
||||
title: '操作',
|
||||
type: 'template',
|
||||
width: 500,
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
|
||||
Reference in New Issue
Block a user