[Bug Report] When table components use totals, there is a fixed in the column, and the style is confused

[pengzhen-developer]

Element UI version

1.3.6

OS/Browsers version

window / chrome 59.0.3071.86

Vue version

2.3.4

Reproduction Link

https://jsfiddle.net/mwk2d3yh/

Steps to reproduce

table 组件使用 show-summary 的情况下, 如果存在 fixed 的列, 合计样式乱掉了.

What is Expected?

合计在滚动条下方, 拖动滚动条正确滚动合计栏

What is actually happening?

合计在滚动条上方, 滚动条被遮挡

[element-bot]

Translation of this issue:

Element UI version

1.3.6

OS/Browsers version

Window / Chrome 59.0.3071.86

Vue version

2.3.4

Reproduction Link

https://jsfiddle.net/mwk2d3yh/

Steps to reproduce

When table components use show-summary, if there is a column of fixed, the total pattern is out of order

What is Expected?

Below the scroll bar, drag the scroll bar to scroll properly to the total column

What is actually happening?

Above the scroll bar, the scroll bar is blocked

[tianwang8090]

我也遇到同样的问题！！

[magic-code]

到目前还存在这样的问题，好像挺久没修复啊 用的版本1.4.1

[furybean]

Reproduce in 2.x: https://jsfiddle.net/mwk2d3yh/4/

[shiqian123]

` .el-table--scrollable-x .el-table__body-wrapper{
// ::-webkit-scrollbar {display:none}
overflow: hidden
}
.el-table__footer-wrapper{
overflow-x: auto

}`

I reset the style. Now the new problem is that when the mouse is on the last line, it can roll.

[kangxiaoxiao]

我也碰到了同样的问题

[rideron89]

For anyone wrestling with this issue, I was able to work around it with the following code:

<template>
    <el-table ref="invoicesTable">...</el-table>
</template>

<script>
// I use the lodash.debounce library, but any debounce function should work
import debounce from "lodash.debounce"

export default {
    data () {
        return {
            // set here so we don't need to keep setting it for each scroll
            $tableFooter: null
        }
    },

    created () {
        // create a bound function so it can easily by added/removed as an event listener
        this.boundScrollSummaryContent = this.scrollSummaryContent.bind(this)

        // HIGHLY RECOMMEND you debounce this function since it gets called every Vue.update() call
        this.debouncedInitializeSummaryScroller = debounce(this.initializeSummaryScroll.bind(this), 400)
    },

    updated () {
        // when the DOM is updated, add the scrolling event listener
        this.debouncedInitializeSummaryScroller()
    },

    methods: {
        // sets the scroll position of the summary row to that of the table body
        scrollSummaryContent (ev) {
            if (this.$tableFooter) {
                this.$tableFooter.scrollLeft = ev.target.scrollLeft
            }
        },

        initializeSummaryScroll () {
            const $table = this.$refs.invoicesTable
            const $body = $table.$el.querySelector(".el-table__body-wrapper.is-scrolling-left")

            this.$tableFooter = $table.$el.querySelector(".el-table__footer-wrapper")

            if ($body && this.$tableFooter) {
                // make sure we remove the original event listener so it doesn't fire more than once
                $body.removeEventListener("scroll", this.boundScrollSummaryContent)
                $body.addEventListener("scroll", this.boundScrollSummaryContent)
            }
        }
    }
}
</script>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[danyunLu]

Maybe you can try this，it worked in my project

.el-table--scrollable-x .el-table__fixed {
bottom: 8px; // table-scroll-bar-height
height: auto !important;
}

[senolatac]

I have same problem with version 2.13.2