bonus
/
smart-bid-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

This commit is contained in:
cwchen 2025-10-27 18:09:44 +08:00
parent fb2e787a47
commit c2f89b0392
4 changed files with 83 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/TableModel2/index.vue
View File

@ -69,36 +69,39 @@
</div>
</div>
<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"
v-if="selectionShow && isSelectShow" />
<el-table-column fixed width="55" label="序号" type="index" align="center" :index="(index) =>
(queryParams.pageNum - 1) * queryParams.pageSize +
index +
1
" v-if="indexNumShow" />
<el-table-column :key="v" align="center" :label="item.t_label" :prop="item.t_props"
:width="item.t_width" show-overflow-tooltip v-for="(item, v) in tableColumCheckProps">
<template slot-scope="scope">
<!-- 判断当前列数据是否需要使用插槽的数据 -->
<template v-if="item.t_slot">
<slot :data="scope.row" :name="item.t_slot"></slot>
<!-- 表格容器，添加最大高度和滚动 -->
<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"
v-if="selectionShow && isSelectShow" />
<el-table-column fixed width="55" label="序号" type="index" align="center" :index="(index) =>
(queryParams.pageNum - 1) * queryParams.pageSize +
index +
1
" v-if="indexNumShow" />
<el-table-column :key="v" align="center" :label="item.t_label" :prop="item.t_props"
:width="item.t_width" show-overflow-tooltip v-for="(item, v) in tableColumCheckProps">
<template slot-scope="scope">
<!-- 判断当前列数据是否需要使用插槽的数据 -->
<template v-if="item.t_slot">
<slot :data="scope.row" :name="item.t_slot"></slot>
</template>
<template v-else>
{{ scope.row[item.t_props] || '-' }}
</template>
</template>
<template v-else>
{{ scope.row[item.t_props] || '-' }}
</el-table-column>
<el-table-column align="center" label="操作" :width="handleColWidth" :show-overflow-tooltip="false"
fixed="right" v-if="handleShow && showOperation">
<template slot-scope="{ row }">
<div class="optionDivRef">
<slot :data="row" name="handle">-</slot>
</div>
</template>
</template>
</el-table-column>
<el-table-column align="center" label="操作" :width="handleColWidth" :show-overflow-tooltip="false"
fixed="right" v-if="handleShow && showOperation">
<template slot-scope="{ row }">
<div class="optionDivRef">
<slot :data="row" name="handle">-</slot>
</div>
</template>
</el-table-column>
</el-table>
</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 {
}
}
::v-deep .el-table {
width: 100%;
margin-bottom: 0;
// 新增表格容器样式
.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;
}
}

3
src/views/enterpriseLibrary/technical/components/LeftType.vue
View File

@ -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%;

4
src/views/enterpriseLibrary/technical/components/RightTable.vue
View File

@ -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;

10
src/views/enterpriseLibrary/technical/index.vue
View File

@ -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;