Yajentine/his
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决诊断目录数据展示不全问题

Browse Source
This commit is contained in:
suizihe
2025-11-07 14:08:28 +08:00
parent 43f3d1ba94
commit 08f7e35042
1 changed files with 153 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
openhis-ui-vue3/src/views/catalog/disease/index.vue
View File

@@ -86,84 +86,90 @@
</el-col> --> </el-col> -->
</el-row> </el-row>
<el-table v-loading="loading" :data="diseaseList" @selection-change="handleSelectionChange"> <!-- 添加外层滚动容器，确保表格可以水平滚动 -->
<el-table-column type="selection" width="50" align="center" /> <div class="table-scroll-container">
<el-table-column label="编码" align="center" key="conditionCode" prop="conditionCode" /> <!-- 移除style="width: 100%"，让Element UI表格根据内容自动调整 -->
<el-table-column <el-table v-loading="loading" :data="diseaseList" @selection-change="handleSelectionChange" border resizable>
label="名称" <el-table-column type="selection" width="50" align="center" />
align="center" <!-- 使用prop属性并设置合适的最小宽度，启用列宽调整 -->
key="name" <el-table-column label="编码" align="center" prop="conditionCode" min-width="150" />
prop="name" <!-- 名称列保留自定义模板以处理长文本 -->
:show-overflow-tooltip="true" <el-table-column
/> label="名称"
<el-table-column align="center"
label="疾病分类" prop="name"
align="center" min-width="280"
key="sourceEnum_enumText" >
prop="sourceEnum_enumText" <template #default="scope">
:show-overflow-tooltip="true" <div class="name-cell">
/> {{ scope.row.name }}
<el-table-column </div>
label="拼音助记码" </template>
align="center" </el-table-column>
key="pyStr" <!-- 其他列使用标准配置 -->
prop="pyStr" <el-table-column
:show-overflow-tooltip="true" label="疾病分类"
/> align="center"
<el-table-column prop="sourceEnum_enumText"
label="类型" min-width="180"
align="center" />
key="typeCode_dictText" <el-table-column
prop="typeCode_dictText" label="拼音助记码"
:show-overflow-tooltip="true" align="center"
/> prop="pyStr"
<el-table-column min-width="220"
label="医保编码 " />
align="center" <el-table-column
key="ybNo" label="类型"
prop="ybNo" align="center"
:show-overflow-tooltip="true" prop="typeCode_dictText"
/> min-width="120"
<el-table-column />
label="医保标记" <el-table-column
align="center" label="医保编码"
key="ybMatchFlag" align="center"
prop="ybMatchFlag_enumText" prop="ybNo"
/> min-width="180"
<el-table-column />
label="医保对码标志" <el-table-column
align="center" label="医保标记"
key="ybMatchFlag" align="center"
prop="ybMatchFlag_enumText" prop="ybMatchFlag_enumText"
/> min-width="150"
<el-table-column />
label="状态" <el-table-column
align="center" label="医保对码标志"
key="statusEnum_enumText" align="center"
prop="statusEnum_enumText" prop="ybMatchFlag_enumText"
width="160" min-width="150"
/> />
<el-table-column <el-table-column
label="描述" label="状态"
align="center" align="center"
key="description" prop="statusEnum_enumText"
prop="description" min-width="150"
width="160" />
/> <el-table-column
<el-table-column label="描述"
label="操作" align="center"
align="center" prop="description"
width="150" min-width="250"
class-name="small-padding fixed-width" />
> <el-table-column
<template #default="scope"> label="操作"
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" align="center"
>编辑</el-button min-width="120"
> class-name="small-padding"
</template> >
</el-table-column> <template #default="scope">
</el-table> <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
<pagination >编辑</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total > 0" v-show="total > 0"
:total="total" :total="total"
v-model:page="queryParams.pageNo" v-model:page="queryParams.pageNo"
@@ -504,4 +510,73 @@ getList();
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* 表格外层滚动容器，确保表格整体可以水平滚动 */
.table-scroll-container {
width: 100%;
overflow-x: auto;
margin-bottom: 10px;
}
/* 表格样式调整，移除默认的最大宽度限制 */
.table-scroll-container >>> .el-table {
min-width: 100%;
width: auto;
}
/* 名称列的单元格样式，确保长文本可以水平滚动 */
.name-cell {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 4px 8px;
height: 32px;
min-width: 100%;
display: flex;
align-items: center;
cursor: pointer;
}
/* 美化名称列的滚动条 */
.name-cell::-webkit-scrollbar {
height: 8px;
}
.name-cell::-webkit-scrollbar-thumb {
background: rgba(0, 120, 215, 0.6);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s ease;
}
.name-cell::-webkit-scrollbar-thumb:hover {
background: rgba(0, 120, 215, 0.8);
}
.name-cell::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.05);
}
/* 表格外层容器的滚动条样式 */
.table-scroll-container::-webkit-scrollbar {
height: 12px;
}
.table-scroll-container::-webkit-scrollbar-thumb {
background: rgba(0, 120, 215, 0.7);
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s ease;
}
.table-scroll-container::-webkit-scrollbar-thumb:hover {
background: rgba(0, 120, 215, 0.9);
}
.table-scroll-container::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.15);
border-radius: 6px;
border: 2px solid rgba(0, 0, 0, 0.05);
}
</style> </style>