1
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
/* 确保按钮在最上层 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 确保操作列中的按钮组样式 */
|
/* 确保操作列中的按钮组样式 */
|
||||||
|
|||||||
@@ -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 = [
|
||||||
|
|||||||
Reference in New Issue
Block a user