样式修改
This commit is contained in:
parent
fb2e787a47
commit
c2f89b0392
|
|
@ -69,6 +69,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格容器，添加最大高度和滚动 -->
|
||||
<div class="table-container" :style="tableContainerStyle">
|
||||
<el-table ref="tableRef" :data="tableList" style="width: 100%" v-loading="loading" select-on-indeterminate
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column width="45" align="center" type="selection" :selectable="selectable"
|
||||
|
|
@ -99,6 +101,7 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<pagination :total="total" @pagination="getTableList" :page.sync="queryParams.pageNum"
|
||||
|
|
@ -190,6 +193,11 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 表格最大高度（像素），默认600px
|
||||
tableMaxHeight: {
|
||||
type: [Number, String],
|
||||
default: 600
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
/* 根据操作栏控制表头是否显示 */
|
||||
|
|
@ -202,13 +210,23 @@ export default {
|
|||
tableCardStyle() {
|
||||
const baseHeight = this.showSearch ? 200 : 120; // 搜索区域高度
|
||||
const toolbarHeight = this.showRightTools ? 40 : 0; // 工具栏高度
|
||||
const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + 25}px)`;
|
||||
const paginationHeight = 60; // 分页区域高度
|
||||
const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + paginationHeight + 25}px)`;
|
||||
return {
|
||||
height: availableHeight,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}
|
||||
},
|
||||
/* 表格容器样式 */
|
||||
tableContainerStyle() {
|
||||
return {
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
columnsList: {
|
||||
|
|
@ -551,8 +569,8 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.table-title {
|
||||
font-size: 16px;
|
||||
|
|
@ -567,15 +585,36 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 新增表格容器样式
|
||||
.table-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0; // 确保容器可以收缩
|
||||
|
||||
::v-deep .el-table {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
||||
// 确保表格体可以滚动
|
||||
.el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-pagination {
|
||||
margin-top: 0;
|
||||
padding-top: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 16px;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
background: #fff;
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -108,10 +108,9 @@ export default {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.sidebar-card {
|
||||
height: 100%;
|
||||
height: calc(100vh - 175px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20px;
|
||||
|
||||
::v-deep .el-card__body {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<!-- 技术方案列表 -->
|
||||
<div class="app-container">
|
||||
<div class="right-table-card">
|
||||
<TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="userTableRef"
|
||||
:columnsList="columnsList" :request-api="listUser">
|
||||
<template slot="tableTitle">
|
||||
|
|
@ -124,7 +124,7 @@ export default {
|
|||
}
|
||||
|
||||
.right-table-card {
|
||||
height: 100%;
|
||||
height: calc(100vh - 175px);
|
||||
overflow-y: hidden;
|
||||
transition: overflow-y 0.3s ease;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="technical-container">
|
||||
<div class="app-container">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="back-container">
|
||||
<el-button type="default" size="small" @click="handleBack" class="back-btn">
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
</el-button>
|
||||
</div>
|
||||
<div class="layout-container">
|
||||
<el-row>
|
||||
<el-row :gutter="18">
|
||||
<el-col :span="5" class="left-col">
|
||||
<LeftType :value="activeCategory" @change="handleCategoryChange" @add-category="handleAddCategory"
|
||||
@category-command="handleCategoryCommand" :enterpriseId="enterpriseId" />
|
||||
|
|
@ -80,7 +80,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.technical-container {
|
||||
.app-container {
|
||||
height: calc(100vh - 84px);
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
|
||||
|
|
@ -90,8 +90,8 @@ export default {
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 20px;
|
||||
padding: 0 0 0 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.back-btn {
|
||||
width: 98px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue