element ui 表格合计行+固定列显示时，滚动条无法退拽b
2024-04-07 本文已影响0人
阿巳交不起水电费
前言
现在虽然基本上都使用vue3+element plus了，但仍然还有大量项目是vue2+element ui开发的。
今天在使用 element ui 时遇到个问题，如下：
image.png
当存在左侧固定列（fixed="left"或者fixed="right"）且存在底部合计行时，滚动条在固定列区域无法选中，也就是拖不到滚动条，只有中间部分可以拖动，这明显是有问题的。
element-ui 版本号
"element-ui": "^2.15.7"
问题跟进
审查元素，发现果然是层级覆盖问题
image.png
解决办法
加上这部分样式即可
// 解决有合计行时，横向滚动条在左侧、右侧固定列中无法选中问题
.el-table__fixed,.el-table__fixed-right{
pointer-events: none;
>*{
pointer-events: all;
}
}
问题代码，感兴趣的可以自己试下
<!-- element ui 样式demo -->
<template>
<div class="main-content">
<div class="my-title">固定列</div>
<div class="teme-one">
<el-table :data="tableData" border height="200" style="width: 100%; margin-top: 20px">
<el-table-column prop="id" label="ID" width="180" fixed="left">
</el-table-column>
<el-table-column prop="name" label="姓名" min-width="180" fixed="left">
</el-table-column>
<el-table-column prop="amount1" label="数值 1（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount2" label="数值 2（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount3" label="数值 3（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount1" label="数值 1（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount2" label="数值 2（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount3" label="数值 3（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount1" label="数值 1（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount2" label="数值 2（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount3" label="数值 3（元）" min-width="240">
</el-table-column>
<el-table-column fixed="right" label="操作" width="120">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="my-title">合计行</div>
<div class="teme-one">
<el-table :data="tableData" border height="200" :summary-method="getSummaries" show-summary style="width: 100%; margin-top: 20px">
<el-table-column prop="id" label="ID" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" min-width="180">
</el-table-column>
<el-table-column prop="amount1" label="数值 1（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount2" label="数值 2（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount3" label="数值 3（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount1" label="数值 1（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount2" label="数值 2（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount3" label="数值 3（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount1" label="数值 1（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount2" label="数值 2（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount3" label="数值 3（元）" min-width="240">
</el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="my-title">合计行+固定列</div>
<div class="teme-one">
<el-table :data="tableData" border height="200" :summary-method="getSummaries" show-summary
style="width: 100%; margin-top: 20px">
<el-table-column prop="id" label="ID" width="180" fixed="left">
</el-table-column>
<el-table-column prop="name" label="姓名" min-width="180" fixed="left">
</el-table-column>
<el-table-column prop="amount1" label="数值 1（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount2" label="数值 2（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount3" label="数值 3（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount1" label="数值 1（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount2" label="数值 2（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount3" label="数值 3（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount1" label="数值 1（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount2" label="数值 2（元）" min-width="240">
</el-table-column>
<el-table-column prop="amount3" label="数值 3（元）" min-width="240">
</el-table-column>
<el-table-column fixed="right" label="操作" width="120">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
}
},
methods: {
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总价';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
},
deleteRow(index, rows) {
rows.splice(index, 1);
}
}
}
</script>
<style lang="scss" scoped>
.main-content {
counter-reset: ct;
:deep(.el-button) {
margin-right: 5px;
}
}
.my-title {
background-color: #dddddd;
margin: 10px 0;
padding: 10px;
font-size: 20px;
}
.my-title:before {
counter-increment: ct;
content: "demo" counter(ct)". ";
}
.teme-one {
margin-bottom: 10px;
>p {
margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
font-weight: bold;
}
}
</style>
很简单的问题，但是若对你有帮助，请点个赞吧，谢谢支持！
