为什么固定列的最下面横向滚动条地方会有遮挡
0
悬赏园豆：10
[已解决问题]
解决于 2023-11-07 17:06
<el-form ref="ruleForm" :model="table">
<el-table :data="table.tableData2" :height="amplificationValue?'610':'540'" border size="small"
@selection-change="handleSelectionChange2" :row-key="getRowKey" ref="multipleTable">
<el-table-column type="selection" width="50" align="center" fixed="left" :reserve-selection="true">
</el-table-column>
<el-table-column width="80" label="序号" prop="sortNo" align="center" fixed="left">
<template slot-scope="scope">
<el-form-item :prop="'tableData2.' + scope.$index + '.sortNo'"
:rules="(rows.length && (rows.indexOf(scope.row) !== -1)) ? rules.sortNo : []">
<el-input v-model="scope.row.sortNo"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column width="200" label="项目名称" prop="projectName" fixed="left" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column width="150" label="建设单位" prop="buildOrgName" align="center" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column width="80" label="电压等级" prop="voltageLevelCode" align="center">
</el-table-column>
<el-table-column width="80" label="项目类别" prop="projectCategoryCode" align="center">
</el-table-column>
<el-table-column width="190" label="计划属性" prop="planAttribute" align="center">
<template slot-scope="scope">
<el-form-item :prop="'tableData2.' + scope.$index + '.planAttribute'"
:rules="(rows.length && (rows.indexOf(scope.row) !== -1)) ? rules.planAttribute : []">
<el-select v-model="scope.row.planAttribute">
<el-option v-for="it in planAttributeList" :label="it.name" :value="it.name"
:key="it.value"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column width="100" label="计划年度" prop="year" align="center">
</el-table-column>
<el-table-column width="220" label="下达批次" prop="emergencyBatch" align="center">
<template slot-scope="scope">
<el-form-item :prop="'tableData2.' + scope.$index + '.emergencyBatch'"
:rules="(rows.length && (rows.indexOf(scope.row) !== -1)) ? rules.emergencyBatch : []">
<el-select v-model="scope.row.emergencyBatch" style="width: 100%">
<el-option v-for="it in emergencyBatchList" :label="it.name" :value="it.value"
:key="it.value"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="建设规模">
<el-table-column label="线路长度" prop="lineLength" width="50" header-align="center" align="center" />
<el-table-column label="变电容量" prop="subsCap" width="50" header-align="center" align="center" />
</el-table-column>
<el-table-column width="80" label="总投资" prop="totalInvest" align="center">
</el-table-column>
<el-table-column width="90" :label="label1" prop="startToYearTotalPublish" align="center"
show-overflow-tooltip>
</el-table-column>
<el-table-column width="90" :label="label2" prop="startToYearTotalComplete" align="center"
show-overflow-tooltip>
</el-table-column>
<el-table-column :label="todayYear">
<el-table-column label="合计" prop="total" header-align="center" align="center" />
<el-table-column label="自有资金" prop="ownMoney" header-align="center" align="center" />
<el-table-column label="中央预算" prop="centerBudget" header-align="center" align="center" />
<el-table-column label="银行贷款" prop="bankLoan" header-align="center" align="center" />
</el-table-column>
<el-table-column label="备注" prop="remarks" show-overflow-tooltip align="center">
</el-table-column>
</el-table>
</el-form>
放大时固定列好像是有横向滚动条遮挡住了文字...
最佳答案
0
解决掉了吗？你可以试试把滚动条变细，固定栏和table最下沿有空隙，将滚动条变细后就不会遮挡了
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #b9b9b9;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f0f0f0;
}
收获园豆：10
貌似是不起作用 放大缩小后 还是会遮挡
@码一码ba: 样式生效了吗，如果生效了滚动条会变细
@Harry宗: 没有 只要是把页面放大在缩小 或是缩小再放大 就会遮挡住
@码一码ba: 样式没生效肯定没效果啊，追求样式统一就把上面的代码放到公共样式里，只要那一个页面变化就把上面代码放到当前vue页面顶级类名里(如果是vue)
@Harry宗: 没用的 之前设置过滚动条高度 放大缩小屏幕 固定列会锁死滚动条的原来位置 而其他列是自适应的滚动条位置. 在放大缩小屏幕之间来回切换 会导致遮挡问题
@Harry宗: 现在生效了 
@Harry宗: 是的 像是滚动条固定住了 但是又好像不是 毕竟我把滚动条高度已经调整小了 不应该遮挡那么多
@码一码ba: 一般来说不会固定滚动条，滚动是因为设置了相关样式，超出高度或者宽度，自动出现的。问题应该解决了吧
@Harry宗: 我和你的分析想法一致 目前还没解决 在找问题点
@码一码ba: 初步怀疑你的页面布局是flex布局吗，是不是写死宽高
@码一码ba: <el-form ref="ruleForm" :model="table">
<el-table :data="table.tableData2" :height="amplificationValue?'610':'540'" border size="small"
@selection-change="handleSelectionChange2" :row-key="getRowKey" ref="multipleTable"> 你怎么还固定了高度 :height="amplificationValue?'610':'540'"
@Harry宗: 这个已经改了
<el-table :data="tableData" border v-loading="loading" size="small" ref="curd"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" fixed="left" v-if="showExport"
:selectable="checkSelectable">
</el-table-column>
<el-table-column type="index" width="55" label="序号" align="center" fixed="left">
<template slot-scope="scope">
{{ scope.row.id ? scope.row.tableIndex + (pagination.currentPage - 1) * pagination.pageSize :
scope.row.subSortNo }}
</template>
</el-table-column>
<el-table-column width="300" label="项目名称" prop="projectName" fixed="left" show-overflow-tooltip>
</el-table-column>
<!-- <el-table-column width="300" label="项目名称" prop="projectName" fixed="left" show-overflow-tooltip>
<template slot-scope="scope" >
<div>
<el-button type="text" @click="handleClickTabel(scope.row)">
</el-button>
{{scope.row.projectName}}
</div>
</template>
</el-table-column> -->
<el-table-column v-for="(item, index) in tableOption" :key="index" :label="item.label" :prop="item.prop"
show-overflow-tooltip :width="item.width" :header-align="item.tableColumn ? 'center' : ''">
<template slot-scope="scope">
<div v-if="item.label != '计划属性'">
{{ item.click ? "" : scope.row[item.prop] }}
<el-button type="text" @click="handleClickTabel(scope.row)" v-if="item.click">{{
scope.row[item.prop]
}}</el-button>
</div>
<!-- <div v-else>
<span class="planattr planattr01" v-if="(item.label=='计划属性')&&(scope.row.planAttribute=='01')"></span
>
<span class="planattr planattr02" v-if="(item.label=='计划属性')&&(scope.row.planAttribute=='02')"></span
>
<span class="planattr planattr03" v-if="(item.label=='计划属性')&&(scope.row.planAttribute=='03')"></span
>
<span class="planattr planattr04" v-if="(item.label=='计划属性')&&(scope.row.planAttribute=='04')"></span
>
<span class="planattr planattr05" v-if="(item.label=='计划属性')&&(scope.row.planAttribute=='05')"></span
>
</div> -->
<div v-if="item.label == '计划属性'" class="sequence">
<div class="textover" v-for="(it, i) in planAttributeList" :key="i">
<span :class="['planattr', `planattr${it.value}`]"
v-show="it.value == scope.row.planAttribute && showExport">
</span>
<span v-if="it.value == scope.row.planAttribute && !showExport">{{ planAttrListExport[i].name }}</span>
</div>
</div>
</template>
<el-table-column v-for="(itemColumn, indexColumn) in item.tableColumn" :key="indexColumn"
:label="itemColumn.label" :prop="itemColumn.prop" :width="itemColumn.width" show-overflow-tooltip
header-align="center" align="center">
</el-table-column>
</el-table-column>
</el-table>
这个代码是最新的
已解决 原因是固定列的高度固定导致被遮挡,
解决方案:
.table /deep/.el-table__fixed {
height: 100% !important;
}
其他回答(4)
0
看看..................
0
在你的代码中，你使用了 Element UI 的表格组件 (el-table) 来显示表格数据，并且设置了一些列为固定列（fixed="left"）以便它们在横向滚动时保持可见。如果在固定列的最下面横向滚动条的位置有遮挡，这通常是因为固定列的总宽度超过了表格容器的宽度。
要解决这个问题，你可以考虑以下几个方法：
调整列的宽度：检查固定列的宽度设置，确保它们不过于宽。如果固定列的总宽度太宽，可以适当缩小列宽，以便它们适应表格容器的宽度。
考虑是否需要固定列：如果固定列的总宽度无法适应表格容器的宽度，你可以考虑是否真的需要将这些列设置为固定列。有时，只有一部分列需要固定，而其他列可以滚动显示。
调整表格容器的宽度：如果你使用了 :height 属性来设置表格的高度，也可以考虑调整表格容器的宽度，以便容纳固定列的总宽度。
使用 Element UI 的特定功能：Element UI 提供了一些特定的功能来处理固定列，如 show-overflow-tooltip 属性，它可以在内容溢出时显示提示信息，而不是遮挡内容。你可以尝试使用这些功能来改善用户体验。
最终，根据你的实际需求和界面设计，选择适当的方法来解决固定列的遮挡问题。
不设置列宽和高度 也不行的 会被遮挡
0
第一次表格第一次加载时应该不会出现此问题，一般发生在页面切换后。可以针对该标签编写特殊样式解决。
会出现 表格放大缩小 就会显示出来遮挡 实际放大后就没有了横向滚动条 但是原来在固定列那里有的横向滚动条被遮挡且锁定在那了 就不会消失 所以遮挡了文字
0
解决方案,不使用横向滚动条,避免遮挡
那样会太挤 需求不允许
