首页 新闻 会员 周边

为什么固定列的最下面横向滚动条地方会有遮挡

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>


放大时固定列好像是有横向滚动条遮挡住了文字...

码一码ba的主页 码一码ba | 初学一级 | 园豆:152
提问于:2023-10-24 10:28
< >
分享
最佳答案
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
Harry宗 | 菜鸟二级 |园豆:216 | 2023-11-02 17:14

貌似是不起作用 放大缩小后 还是会遮挡

码一码ba | 园豆:152 (初学一级) | 2023-11-06 16:51

@码一码ba: 样式生效了吗,如果生效了滚动条会变细

Harry宗 | 园豆:216 (菜鸟二级) | 2023-11-06 16:59

@Harry宗: 没有  只要是把页面放大在缩小 或是缩小再放大  就会遮挡住

码一码ba | 园豆:152 (初学一级) | 2023-11-06 17:08

@码一码ba: 样式没生效肯定没效果啊,追求样式统一就把上面的代码放到公共样式里,只要那一个页面变化就把上面代码放到当前vue页面顶级类名里(如果是vue)

Harry宗 | 园豆:216 (菜鸟二级) | 2023-11-06 17:11

@Harry宗: 没用的  之前设置过滚动条高度   放大缩小屏幕  固定列会锁死滚动条的原来位置  而其他列是自适应的滚动条位置.  在放大缩小屏幕之间来回切换 会导致遮挡问题

码一码ba | 园豆:152 (初学一级) | 2023-11-06 17:17

@Harry宗: 现在生效了 

码一码ba | 园豆:152 (初学一级) | 2023-11-06 17:20

@Harry宗: 是的  像是滚动条固定住了 但是又好像不是  毕竟我把滚动条高度已经调整小了 不应该遮挡那么多

码一码ba | 园豆:152 (初学一级) | 2023-11-06 17:29

@码一码ba: 一般来说不会固定滚动条,滚动是因为设置了相关样式,超出高度或者宽度,自动出现的。问题应该解决了吧

Harry宗 | 园豆:216 (菜鸟二级) | 2023-11-06 17:35

@Harry宗: 我和你的分析想法一致  目前还没解决 在找问题点

码一码ba | 园豆:152 (初学一级) | 2023-11-06 17:39

@码一码ba: 初步怀疑你的页面布局是flex布局吗,是不是写死宽高

Harry宗 | 园豆:216 (菜鸟二级) | 2023-11-06 17:43

@码一码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宗 | 园豆:216 (菜鸟二级) | 2023-11-06 17:46

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

这个代码是最新的

码一码ba | 园豆:152 (初学一级) | 2023-11-06 17:49

已解决 原因是固定列的高度固定导致被遮挡,

解决方案:

.table /deep/.el-table__fixed {
height: 100% !important;
}

码一码ba | 园豆:152 (初学一级) | 2023-11-07 17:05
其他回答(4)
0

看看..................

tea2007 | 园豆:9 (初学一级) | 2023-10-24 11:54
0

在你的代码中,你使用了 Element UI 的表格组件 (el-table) 来显示表格数据,并且设置了一些列为固定列(fixed="left")以便它们在横向滚动时保持可见。如果在固定列的最下面横向滚动条的位置有遮挡,这通常是因为固定列的总宽度超过了表格容器的宽度。

要解决这个问题,你可以考虑以下几个方法:

调整列的宽度:检查固定列的宽度设置,确保它们不过于宽。如果固定列的总宽度太宽,可以适当缩小列宽,以便它们适应表格容器的宽度。

考虑是否需要固定列:如果固定列的总宽度无法适应表格容器的宽度,你可以考虑是否真的需要将这些列设置为固定列。有时,只有一部分列需要固定,而其他列可以滚动显示。

调整表格容器的宽度:如果你使用了 :height 属性来设置表格的高度,也可以考虑调整表格容器的宽度,以便容纳固定列的总宽度。

使用 Element UI 的特定功能:Element UI 提供了一些特定的功能来处理固定列,如 show-overflow-tooltip 属性,它可以在内容溢出时显示提示信息,而不是遮挡内容。你可以尝试使用这些功能来改善用户体验。

最终,根据你的实际需求和界面设计,选择适当的方法来解决固定列的遮挡问题。

Technologyforgood | 园豆:6538 (大侠五级) | 2023-10-24 20:59

不设置列宽和高度 也不行的  会被遮挡

支持(0) 反对(0) 码一码ba | 园豆:152 (初学一级) | 2023-10-26 14:32
0

第一次表格第一次加载时应该不会出现此问题,一般发生在页面切换后。可以针对该标签编写特殊样式解决。

玩屎的猪 | 园豆:59 (初学一级) | 2023-10-25 11:54

会出现  表格放大缩小 就会显示出来遮挡  实际放大后就没有了横向滚动条  但是原来在固定列那里有的横向滚动条被遮挡且锁定在那了 就不会消失  所以遮挡了文字

支持(0) 反对(0) 码一码ba | 园豆:152 (初学一级) | 2023-10-26 14:34
0

解决方案,不使用横向滚动条,避免遮挡

码一码ba | 园豆:152 (初学一级) | 2023-10-26 14:35

那样会太挤 需求不允许

支持(0) 反对(0) 码一码ba | 园豆:152 (初学一级) | 2023-11-06 16:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册